[JavaScript] Object 기초부터 Destructed Assignment까지 자세히 알아보기

그림 같은 집을 짓고

 

들어가며

이번에 Node를 공부하기 위해 JavaScript를 공부하고 있습니다. 다음은 객체에 대해 기본 설명과 더 나아가 자세한 내용을 적어두었습니다.

Object 란?

객체(Object)는 연관된 데이터와 함수들의 집합(collection)입니다. 다음은 person object의 예시입니다.

const person = {
    firstName: 'Seonkyu',
    lastName: 'Kim',
    age: 22,
    getProfile: function() {
    	return `${this.first} ${this.lastName} is ${this.age} years old.`;
    }
}

Property, Method

프로퍼티(Property)는 객체의 속성들입니다. 위 코드에서 ``firstName``, ``lastName``, ``age``, ``getProfile``이 프로퍼티입니다. 이때 ``getProfile``은 메서드라고 하기도 합니다.

 

위 코드에서 getProfile 메서드에는 익명 함수를 사용하여 함수 표현식(expression) 방식으로 선언되었습니다. 함수 선언에 대해 헷갈리신다면 다음 글을 보고 오시기 바랍니다.

https://gonna-be.tistory.com/17

[Javascript] 함수 기초: 함수 선언식, 표현식, 호이스팅, 화살표 함수

ES6에 와서는 다음과 같이 ``:``를 사용하지 않고 메서드를 더욱 간결하게 작성할 수 있습니다. 

const person = {
    firstName: 'Seonkyu',
    lastName: 'Kim',
    age: 22,
    getProfile() {
    	return `${this.first} ${this.lastName} is ${this.age} years old.`;
    }
}

Property 접근하기

다음과 같이 ``.`` 혹은 `` [ ]``을 이용하여 프로퍼티에 접근할 수 있습니다.

person.firstName;    // Returns 'Seonkyu'
person[lastName]    // Returns 'Kim'

이때 `` [ ]``는 더욱 광범위하게 사용할 수 있습니다. 변수를 사용하거나 숫자, 공백, 특수문자가 들어갈 경우 `` [ ]``만 사용할 수 있습니다.

Nested Object

다음과 같이 객체 안에 객체를 넣어 사용할 수 있습니다.

const memberShip = {
    developer: {
        name: 'Seonkyu',
        age: 22
    }, 
    designer: {
        name: 'Jinha',
        age: 21
    }
}

Looping Through Object

`` for ... in`` 문법을 사용하여 객체의 각각의 속성을 알 수 있습니다. 위의 Nested Object를 돌면서 `` developer: Seonkyu``, `` designer: Jinha``를 출력하는 예시를 보도록 하겠습니다. 꽤나 중요한 예시이므로 꼭 봐주세요.

 

다음과 같이 사용할 경우 `` for ... in`` 문에서 undefined라고 출력됩니다.

for (let member in memberShip) {
    console.log(`${member}: ${member.name}`);
}
// Output
// developer: undefined
// designer: undefined

그 이유는 member가 String으로 처리되기 때문입니다. 원하는 출력을 얻기 위해서는 다음과 같이 해야합니다.

for (let member in memberShip) {
    console.log(`${member}: ${membership[member].name}`);
}
// Output
// developer: Seonkyu
// designer: Jinha

Pass By Reference

객체가 함수로 전달될 때는 참조 형식으로 전달됩니다. 이 부분에 대해서는 따로 글을 쓰도록 하겠습니다.

Advanced Object

앞으로 다음과 같은 Object의 내용을 알아보도록 하겠습니다.

const person = {
    _firstName: 'Seonkyu',
    _lastName: 'Kim',
    _age: 22,
    get age() {
        if (this._firstName){
            return this._age;
        }
    }
    set age(newAge){
    	if (typeof newAge === 'number'){
        	this._age = newAge;
        } else {
            console.log('You must assign a number to age');
        }
    }
}

 

앞으로 위 person object를 하나씩 살펴보도록 하겠습니다.

Privacy

Java 등의 언어를 하셨다면 접근 제한자 private을 아실 겁니다. ``_``는 JavaScript에서 사용하는 접근 제한자입니다. 외부에서 단순히 객체의 프로퍼티에 접근하여 값을 바꾸지 말라고 명시할 때 사용합니다. 단, 개발자에게 알려주기 위한 관습일 뿐 실제로는 값에 접근하여 직접적으로 바꿀 수 있습니다. 다음은 위의 ``person`` 객체의 프로퍼티를 변경한 후 접근한 것입니다.

person._lastName = 'Lim';
person._lastName;    // Returns 'Lim'

Getters, Setters

privacy로 설정된 프로퍼티의 값을 읽어오거나 새로운 값을 할당할 때 사용합니다. ``get``과 ``set`` 키워드를 사용합니다. 메서드를 사용할 때와 달리 `` ( )``를 사용하지 않습니다. ``if``문을 사용하여 원하는 형식의 값을 입력받아야 할 때 유용하게 사용할 수 있습니다.

person.lastName = 'Lim';
person.lastName;  // Returns 'Lim'

Factory Functions

객체를 만들 때마다 생성하기 어려움이 있습니다. 이때 ``class``와 비슷하게 객체를 생성해주는 함수를 만들 수 있습니다.

const personFactory = (firstName, lastName, age) => {
    return {
        firstName: firstName,
        lastName: lastName,
        age: age
    }
};

ES6에서부터는 아래와 같이 간단하게 작성할 수 있습니다.

const personFactory = (firstName, lastName, age) => {
    return {
        firstName,
        lastName,
        age
    }
}

Destructed Assignment

구조 분해 할당이라는 신기한 문법이 있습니다. 다음 가이드에 자세히 나와있으니 참고하시기 바랍니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

구조 분해 할당