[JavaScript] 자바스크립트 객체(Object) 이해하기 - 2

[JavaScript] 자바스크립트 객체(Object) 이해하기 - 1에서 객체가 어떤 것인지, 객체는 어떻게 만드는지에 대해서 정리했었다.

이번에는 객체를 어떻게 다루는지 알아보자.

 

- 객체 접근하기

객체도 결국에는 자료형이기 때문에 변수에 담긴다.
먼저 객체에 접근하려면 객체를 담고 있는 변수명을 호출하면 된다.

const myObject = {
  name: {
    firstName: 'bigtop',
    lastName: 'Kim'
  },
  age: 345,
  phoneNumber: '010-1234-5678',
  address: 'Somewhere in KOREA',
  1234567890: 'Number',
  'phone number': '010-1234-5678',
};

console.log(myObject) // {1234567890: "Number", name: {…}, age: 345, phoneNumber: "010-1234-5678", address: "Somewhere in KOREA", phone number: "010-1234-5678"}

- 객체 속성에 접근하기

객체 속성에 접근하는 방법은 2가지 방법이 있다.

1. 괄호 표기법

속성에 접근하는 첫 번째 방법은 괄호 표기법인데, 객체 이름 다음에 대괄호를 열고 닫은 다음 그 안에 속성명을 문자열로 작성해서 접근하는 방법이다. 속성 값이 객체일 경우에는 한번 더 대괄호를 열고 하위 속성명에 접근하면 된다.

const myObject = {
  name: {
    firstName: 'bigtop',
    lastName: 'Kim'
  },
  age: 345,
  phoneNumber: '010-1234-5678',
  address: 'Somewhere in KOREA',
  1234567890: 'Number',
  'phone number': '010-1234-5678',
};

console.log(myObject['name']); // {firstName: "bigtop", lastName: "Kim"}
console.log(myObject['name']['firstName']); // bigtop
console.log(myObject['name']['lastName']); // Kim
console.log(myObject['age']); // 345
console.log(myObject['phoneNumber']); // 010-1234-5678
console.log(myObject['address']); // Somewhere in KOREA
console.log(myObject['1234567890']); // Number
console.log(myObject['phone number']); // 010-1234-5678

 

2. 점 표기법

두 번째 방법은 객체 이름 뒤에 점을 찍고 속성명을 입력하는 방법이다. 이 경우에 속성 값이 객체일 경우에는 한번 더 점을 찍고 하위 속성명에 접근하면 된다.

const myObject = {
  name: {
    firstName: 'bigtop',
    lastName: 'Kim'
  },
  age: 345,
  phoneNumber: '010-1234-5678',
  address: 'Somewhere in KOREA',
  1234567890: 'Number',
  'phone number': '010-1234-5678'
};

console.log(myObject.name); // {firstName: "bigtop", lastName: "Kim"}
console.log(myObject.name.firstName); // bigtop
console.log(myObject.name.lastName); // Kim
console.log(myObject.age); // 345
console.log(myObject.phoneNumber); // 010-1234-5678
console.log(myObject.address); // Somewhere in KOREA
console.log(myObject.1234567890); // Uncaught SyntaxError: missing ) after argument list
console.log(myObject.phone number); // Uncaught SyntaxError: missing ) after argument list
myObject.1234567890; // Uncaught SyntaxError: Unexpected number
myObject.phone number; // Uncaught SyntaxError: Unexpected identifier

이전에 말했던 속성명에 띄어쓰기와 숫자 사용을 권장하지 않는 이유가 바로 이 점 표기법을 활용할 수 없기 때문이다. 

 

- 객체 속성 추가하고 수정하기

객체의 프로퍼티는 객체를 처음 만들 때 넣어줄 수도 있지만 나중에 추가할 수도 있고 수정도 가능하다.

방법은 간단한데,
점 표기법이나 괄호 표기법으로 
존재하지 않는 속성명에 접근해서 값을 할당하면 추가가 되고
이미 존재하는 속성명에 접근해서 값을 할당하면 수정이 된다.

const myObject = {
  name: {
    firstName: 'bigtop',
    lastName: 'Kim'
  },
  age: 345,
  phoneNumber: '010-1234-5678',
  address: 'Somewhere in KOREA',
  1234567890: 'Number',
  'phone number': '010-1234-5678'
};

// 속성 추가
myObject.gender = 'male';
myObject.name.fullName = 'bigtop Kim';

// 속성값 수정
myObject.age = '서른마흔다섯';
myObject.phoneNumber = '010 1234 5678';

// 결과 확인
console.log(myObject); // {1234567890: "Number", name: {…}, age: "서른마흔다섯", phoneNumber: "010 1234 5678", address: "Somewhere in KOREA", phone number: "010-1234-5678", …}
console.log(myObject.gender); // male
console.log(myObject.name.fullName); // bigtop Kim
console.log(myObject.age); // 서른마흔다섯
console.log(myObject.phoneNumber); // 010 1234 5678

 

- 객체 속성 삭제하기

마지막으로 객체의 프로퍼티를 삭제하는 방법을 알아보자. 객체에서 없는 속성에 접근하려고 하면 undefined 값이 나온다. 그래서 속성 값을 undefined로 수정하면 삭제가 될 거라 오해하는 경우가 있는데, 실제로 그렇게 처리를 하게 되면 undefined 값을 가진 프로퍼티가 계속해서 남아있다.

const myObject = {
  name: {
    firstName: 'bigtop',
    lastName: 'Kim'
  },
  age: 345,
  phoneNumber: '010-1234-5678',
  address: 'Somewhere in KOREA',
  1234567890: 'Number',
  'phone number': '010-1234-5678'
};

// 존재하지 않는 값에 접근하려고 하면 undefined 값이 출력된다.
console.log(myObject.abc) // undefined

// 삭제하고자 하는 값을 undefined로 수정하면 될 것 같지만, myObject에 undefined 값을 가진 속성이 그대로 남아있다.
myObject['1234567890'] = undefined
console.log(myObject) // {1234567890: undefined, name: {…}, age: 345, phoneNumber: "010-1234-5678", address: "Somewhere in KOREA", phone number: "010-1234-5678", …}

객체 속성을 삭제하려면 delete 연산자를 사용해야 한다. delete라는 키워드 다음에 삭제하고자 하는 속성을 호출하면 된다.

const myObject = {
  name: {
    firstName: 'bigtop',
    lastName: 'Kim'
  },
  age: 345,
  phoneNumber: '010-1234-5678',
  address: 'Somewhere in KOREA',
  1234567890: 'Number',
  'phone number': '010-1234-5678'
};

// delete 키워드 뒤에 공백 한 칸을 넣고 삭제하고자 하는 속성을 호출하면 된다.
delete myObject['1234567890'];
delete myObject['phone number'];

// 삭제한 속성이 깔끔하게 삭제된걸 확인할 수 있다.
console.log(myObject) // {name: {…}, age: 345, phoneNumber: "010 1234 5678", address: "Somewhere in KOREA"}

 

이번에는 객체를 생성한 다음 다루는 방법을 정리했다. 몇 가지 다뤄야 할 부분들이 더 있지만 분량이 너무 많아질 것 같고 지루하기도 하고.. 일단 처음에는 이 정도로만 정리해 두고 필요할 때 다시 언급하면서 정리하는 게 더 좋을 것 같다.