[코드팩토리] 객체 기본 (Object basics)

자바스크립트에서 객체(object)는 사용빈도가 가장 높고 정말 중요한 기능이다.

그리고 이 객체를 다루는 능력에 따라 코드의 품질과 개발자의 실력차가 뚜렷하게 드러나는 기능이다.

따라서 심도있게 공부하면 좋다.

 

객체(Object)는 속성들의 집합이고 비슷한 속성을 가진 값들을 묶는데 사용한다.

그리고 그 객체는 key : value가 쌍으로 중괄호 안에 묶여있다.

객체를 선언하는 방법

일반적인 방법

기본형 : let(const 등) 변수명 = { key : value }.

let wonyoung = {
    name: '장원영',
    group: '아이브',
};

console.log(wonyoung);

그런데 key : value에서 value에는 함수가 들어갈 수도 있다.

let wonyoung = {
    name: '장원영',
    group: '아이브',
    dance: function(){
        return '장원영이 춤을 춥니다.';
    }
};

console.log(wonyoung);

console.log(wonyoung.name);
console.log(wonyoung['name']);

const key = 'name';
console.log(wonyoung[key]);
// 위 세 개는 키의 value를 받아오는 같은 방법

console.log(wonyoung.dance());

{ name: '장원영', group: '아이브', dance: [Function: dance] }

장원영

장원영

장원영

장원영이 춤을 춥니다.

 

그런데 위 예제에서 아쉬운 점이 있다.

wonyoung이라는 객체를 보면 name이라는 key에 '장원영'이 이미 value로 설정되어 있는데,

밑에서 dance라는 key에 function(){return '장원영이 춤을 춥니다.'}라고 넣어 불필요하게 장원영을 두 번 타이핑했다.

DRY법칙에 따라 repeat, 즉 반복되는 행위를 줄이기 위해 위 코드를 개선하면 아래와 같다.

let wonyoung = {
    name: '장원영',
    group: '아이브',
    dance: function(){
        return `${this.name}이 춤을 춥니다.`;
    }
};

console.log(wonyoung.dance());

 

일단 @@@이 춤을 춥니다라는 텍스트를 넣기 위해 따옴표를 템플릿 리터럴 (``)로 바꾼다. 그 다음 ${} 구문을 사용하여 특정 key를 지목한다.

여기서 this를 사용하는데, 자바스크립트에서 this의 의미는 이 객체를 의미한다. 즉 let wonyoung 자체를 의미한다.

(다른 언어에서는 this의 의미가 다르다.)

즉 this.name의 의미는 wonyoung이라는 이 객체 안에서의 name을 지목하는 것이다.

따라서 콘솔에는 장원영이 들어간 채로 출력된다.

장원영이 춤을 춥니다.

변수를 사용해서 객체를 선언하는 방법

기본형 : const 변수명 = { [key변수] : value변수, [key변수2] : value변수 ... } ;

const nameKey = 'name';
const nameValue = '장원영';

const groupKey = 'group';
const groupValue = '아이브';

const wonYoung = {
    [nameKey] : nameValue,
    [groupKey] : groupValue,
};

console.log(wonYoung);

{ name: '장원영', group: '아이브' }

 

value값 변경하기

기본형 : 변수명['바꿀key값'] = '바꿀value값'

wonYoung['group'] = '뉴진스';
console.log(wonYoung);

{ name: '장원영', group: '뉴진스' }

value값 추가하기

위에 value값 변경하기는 기존에 있던 key를 넣으면 변경되는 것이고, 기존에 없던 key를 넣으면 새로운 key와 value가 생성된다.

wonYoung['englishName'] = 'Jang WonYoung';
console.log(wonYoung);

{ name: '장원영', group: '아이브', englishName: 'Jang WonYoung' }

value값 삭제하기

기본형 : delete 변수명['삭제할key']

wonYoung['enlgishName'] = 'Jang WonYoung';
delete wonYoung['englishName'];
console.log(wonYoung);

{ name: '장원영', group: '아이브' }

 

그런데, 이상한 점이 있다.

변수의 선언에서 var와 let으로 선언한 변수는 추후에 값 변경이 가능한데, const는 값을 바꿀 수 없다고 했다.

그런데 지금 계속 값을 수정하는 방법에 대해서 배웠고 잘 작동한다.

 

이유는, const로 선언한 변수는 아래와 같은 특징을 갖고 있기 때문이다.

• 객체 자체를 수정하는 것은 불가능하다.
• 그러나 객체 내의 메서드를 수정하는 것은 가능하다.

예를 들면 아래와 같다.

wonYoung = {};

wonYoung이라는 객체 자체를 공백으로 두어 모든 key와 value를 삭제하도록 wonYoung 객체 자체를 변경하도록 명령하였다.

TypeError: Assignment to constant variable.

이런 오류가 출력된다.

하지만

wonYoung['name'] = '안유진';
console.log(wonYoung);

위와 같이 name이라는 key의 값을 안유진으로 바꾸는 이런 변경은 가능하다.

모든 key값, value값 가져오기

모든 key 값 가져오기

기본형 : Object.keys(가져올변수명)

console.log(Object.keys(wonYoung));

[ 'name', 'group' ]

모든 value 값 가져오기

기본형 : Object.values(가져올변수명)

console.log(Object.values(wonYoung));

[ '장원영', '아이브' ]

 

tip. 객체를 선언하는 데 있어 key값과 value값이 동일한 경우 { key : value } 형태가 아니라 하나만 써도 된다.

const name = '장원영'

const wonYoung = {
	name: name;
};

// 원래대로라면 위 같이 객체를 선언하면 [ name : 장원영 ] 이라고 출력되는데,
// name이 중복되므로 아래와 같이 작성해도 된다.

const wonYoung = {
	name
};

 

 

출처 : https://youtu.be/ZOVG7_41kJE?si=ujb7usAQFvJMxpp7