javascript 객체 생성, 추가, 값 가져오기

객체란 데이터와 함수의 집합입니다.

예제를 통해 javascript 객체의 기본 형태와 빈 객체를 생성하고 값을 추가하고 조회하는 방법에 대해 알아보겠습니다.

기본 객체 생성

객체를 생성하고 속성까지 추가해보도록 하겠습니다.

키와 값은 ':'로 분리됩니다. 한쌍의 키와 값은 ','로 구분합니다. 여기서 name, age는 키가 되고 'Bob', 32의 경우 키에 대한 값이 됩니다.

const person = {
  name: 'Bob',
  age: 32
};

값에는 모든 자료형이 들어갈 수 있으며 함수와 배열도 들어갈 수 있습니다.

const person = {
  name: 'Bob',
  age: 32,
  interests: ['music', 'skiing'],
  greeting: function() {
    alert('hello');
  }
};

객체 속성에 접근할 때 점 표기법과 괄호 표기법으로 접근할 수 있습니다.

console.log(person.name); // Bob
console.log(person.age); // 32
console.log(person.interests[1]); // skiing
person.greeting(); // hello

console.log(person['name']); // Bob
console.log(person['age']); // 32
console.log(person['interests'][1]); //skiing

똑같은 기능을 하는 것처럼 보이지만 두 기능에는 차이점이 있습니다. 괄호 표기법을 사용하면 키를 사용해 객체의 속성에 접근할 수 있습니다.

const key = 'age';
console.log(person[key]); // 32

또한 띄어쓰기가 있는 키에 접근할 때도 점 표기법으로는 접근이 불가능하나 괄호 표기법으로는 접근할 수 있습니다.

const person = {
  name: 'Bob',
  age: 32,
  'like color': 'red'
};

console.log(person['like color']); // red

빈 객체는 두가지 방법으로 생성할 수 있습니다. 첫번째 방법이 간단해 일반적으로 더 많이 사용합니다.

const person = {};
const person = new Object();

객체 person을 생성한 이후 새 속성을 추가할 때 '점 표기법'을 사용합니다.

person.name = 'Bob';

'대괄호 표기법'으로도 객채에 새 속성을 추가할 수 있습니다.

person['name'] = 'Bob';

Reference