📖 객체 리터럴

자바스크립트는 객체 기반의 프로그래밍 언어이며 자바스크립트를 이루고 있는 거의 "모든 것"이 객체이다. 따라서 자바스크립트를 정복하기 위해서는 객체에 대해 잘 알고 있어야 한다.

이번 포스팅에서는 객체 선언 방식 중 하나인 객체 리터럴에 대해 알아보자.

해당 포스팅은 https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Basics 를 참조하여 작성하였습니다.

객체란?🙄

객체란 무엇일까? 객체는 자바스크립트에서 데이터를 표현하는 방식 중 하나로 key,value 쌍으로 구성된다.

객체 생성 방법

자바스크립트는 prototype 기반 객체지향 언어로서 다양한 객체생성 방법을 지원한다.

• 객체 리터럴
• Object 생성자 함수
• 생성자 함수
• Object.create 메서드
• 클래스(ES6)

오늘은 이중에서 객체 리터럴을 통한 객체 생성에 대해 알아보도록 하자!

객체 리터럴

객체 리터럴 방식은 객체 생성 방식 중 가장 일반적이고 간단한 방법으로, 컨텐츠를 그대로 대입하는 방법을 말한다. (개인적으로는 객체 리터럴이란 네이밍 자체가 직관적이진 않은 것 같다)

let myObject = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value
};

위의 형식과 같이 key : value 형식의 data를 직접 입력하는 방법이다.

그러면 이제 객체 리터럴 방식을 통해서 Person이란 객체를 생성해보자!

let person = {
  name: ['Bob', 'Smith'],
  age: 32,
  gender: 'male',
  interests: ['music', 'skiing'],
  bio: function() {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old`);
  },
  greeting: function() {
    console.log(`Hi! I'm ${this.name[0]}.`);
  }
};

위의 person 객체에서 bio와 greeting은 함수이다. 객체는 property로 일반 변수 뿐만 아니라 함수 또한 가질 수 있다.

객체에 묶인 함수는 메서드라고 표현한다.

프로퍼티 접근

그렇다면 선언한 프로퍼티에 어떻게 접근 할 수 있을까?

객체의 프로퍼티에 접근하는 두가지 방법이 있다.

마침표 표기법

마침표(.)를 통해 접근하는 방법으로, person.name, person.age 와 같이 접근할 수 있다.

대괄호 표기법

대괄호([])를 통해 접근하는 방식으로, persone['name'], persone['age'] 와 같이 접근한다.

대괄호를 써서 접근할 경우 ''안에 감싸주지 않으면 name이란 변수의 값으로 인식하기 때문에 꼭 감싸주어야 한다.

마침표 표기법을 이용해 person 객체의 프로퍼티에 접근해 보았다. 메서드도 접근 방식은 동일하다.

프로퍼티 값 갱신 & 생성 & 삭제

갱신

이미 존재하는 property의 값을 수정하면 갱신된다. person.name = 'Brown'과 같이 값을 갱신할 수 있다.

생성

존재하지 않는 property의 값을 할당하면 프로퍼티가 동적으로 생성된다! person.address = 'Seoul'처럼 새로운 property를 할당할 수 있다.

삭제

삭제하고자 하는 property를 delete 키워드를 붙여 사용한다. 없는 property에 접근했을 시에 에러없이 무시된다. delete person.age와 같이 삭제 가능하다.