자바스크립트 오브젝트

업데이트: September 08, 2020

1. 오브젝트?

자바스크립트는 객체기반의 스크립트 언어로 거의 모든 것이 Object(객체)입니다. 오브젝트는 key : value로 이루어진 1개 또는 이상으로 모여진 것으로 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입입니다.
자바스크립트에서는 클래스 없이 {중괄호} 를 사용해서 오브젝트를 생성할 수 있습니다.

const obj = {} - object literal
const obj = new Object() - object constructor

2. 오브젝트를 사용하는 이유?

변수를 이용하면 하나의 변수에 값을 하나만 담을 수 있습니다.

const name = 'chanho';
const phone = '111-1111-1111';
const age = 18;

person(name, phone, age);

const person = (name, phone, age) => console.log(name, phone, age);

와 같이 각각의 변수를 전달해줘야 합니다.

하지만 전달해야 하는 인자 값이 많아질 경우라면 그 만큼 각각의 변수를 일일이 작성 해줘야 합니다.

이러한 단점을 해결할 수 있는 방법이 오브젝트를 사용하는 것 입니다.

3. 오브젝트 생성

위에서 설명한 예시를 오브젝트를 사용하여 바꿔보겠습니다.

const chanho = { name: 'chanho', phone: '111-1111-1111', age: 18, hobby: ['soccer', 'music'] };

person(chanho);

const person = (obj) => {
  console.log(obj);
};
or;
const person = (obj) => {
  console.log(obj.name, obj.phone, obj.age);
};

const chanho = { name : 'chanho', phone : '111-1111-1111', ... } 와 같이

프로퍼티이름(key) : 프로퍼티값(value) 을 { 중괄호 } 안에 선언합니다.

4. 오브젝트 추가 / 삭제

자바스크립트는 런타임에 타입이 결정되는 언어로 이러한 특성으로 인해 초기에 생성한 오브젝트 프로퍼티 이외에 새로운 프로퍼티를 추가하거나 삭제할 수 있습니다.

4.1 점 표기법

const chanho = { name: 'chanho', phone: '111-1111-1111', age: 18, hobby: ['soccer', 'music'] };
chanho.gender = 'men';
delete chanho.gender;

4.2 괄호 표기법

const chanho = { name: 'chanho', phone: '111-1111-1111', age: 18, hobby: ['soccer', 'music'] };
chanho['gender'] = 'men';
delete chanho['gender'];

5. 오브젝트 프로퍼티, 메서드 접근

5.1 점 표기법

const chanho = { name: 'chanho', phone: '111-1111-1111', age: 18, hobby: ['soccer', 'music'] };
chanho.name;
chanho.hobby[0];
chanho.bio();

5.2 괄호 표기법

const chanho = { name: 'chanho', phone: '111-1111-1111', age: 18, hobby: ['soccer', 'music'] };
chanho['name'];
chanho['hobby'][0];
chanho.bio();

6. 점 표기법과 괄호 표기법 차이

점 표기법과 괄호 표기법을 보면 같은 방법인데 어떠한 상황일 때 점 표기법을 사용하고 괄호 표기법을 사용해야할까요??

먼저 말씀드리자면 동적으로 값을 가져올 때 괄호 표기법을 사용합니다. 예시를 들어보겠습니다.

6.1 점 표기법

const chanho = { name: 'chanho', phone: '111-1111-1111', age: 18, hobby: ['soccer', 'music'] };

const changeValue = (obj, key) => {
  console.log(obj.key);
};

changeValue(chanho, 'name');

점 표기법을 사용해서 접근할 경우 “key에 name을 전달했으니 obj.name으로 되겠지?” 라고 생각할 수 있습니다.

하지만 생각과는 반대로 그냥 obj에 key가 있어? 라고 물어보는 것과 같습니다. 그래서 결과는 undefined 입니다.

6.2 괄호 표기법

const chanho = { name: 'chanho', phone: '111-1111-1111', age: 18, hobby: ['soccer', 'music'] };

const changeValue = (obj, key) => {
  console.log(obj[key]);
};

changeValue(chanho, 'name');

위와 같이 괄호 표기법을 사용하면 console.log창에 정상적인 속성 값이 나오는 것을 볼 수 있습니다.

함수에 전달하는 key값은 String으로

7. 오브젝트 생성 응용

만약 오브젝트를 생성하는데 여러 개의 오브젝트를 생성한다고 하면

const chanho = { name : 'chanho', phone : '111-1111-1111',age : 28 }
const manho = { name : 'manho', phone : '111-1111-2343',age : 22 }
const sooho = { name : 'sooho', phone : '111-3434-2343',age : 27 }
...

이와 같이 사용할 수 있습니다. 하지만 자세히 보면 name, phone, age 과 같이 중복된 프로퍼티 이름 값이 존재합니다. 이러한 중복을 줄여주기 위해 함수를 만들어 사용할 수 있습니다.

const createObj = (name, phone, age) => {
  return {
    name: name, or name
    phone: phone, or phone
    age: age, or age
  };
};
const chanho = createObj('chanho', '111-1111-1111', 28);
const manho = createObj('manho', '111-1111-2343', 22);
const sooho = createObj('sooho', '111-3434-2343', 27);

name: name 같이 key 와 value 의 이름이 동일하다면 하나만 써줘도 됩니다.

8. 오브젝트에 해당하는 키가 있는지 확인

key in object 를 사용해서 key값이 object에 있는지 알 수 있습니다.

있다면 true를 없다면 false를 반환하게 됩니다.

console.log('name' in chanho); // true 반환
console.log('nam' in chanho); // false 반환

9. 오브젝트 for in을 활용한 key값 value값 출력

for in 문을 사용해서 오브젝트에 있는 key값들을 출력할 수 있습니다.

9.1 key 값들 출력

for (key in chanho) {
  console.log(key);
}

9.2 value 값들 출력

for (key in chanho) {
  console.log(chanho[key]);
}

참고

Twitter Facebook LinkedIn

Chanho Yoon