[자바스크립트 Deep Dive] 10. 객체 리터럴

unhyif·2022년 5월 26일

자바스크립트 Deep Dive

목록 보기

10/19

10.1 객체란?

프로퍼티와 메소드로 구성된 집합체

변경 가능한 값

프로퍼티: 객체의 상태를 나타내는 값
메소드: 프로퍼티를 참조하고 조작할 수 있는 동작
- 프로퍼티 값이 함수일 경우, 메소드라고 부름

const obj = {
  num: 0, // 프로퍼티
  // 메소드
  increase: function () {
    this.num++;
  },
};

10.2 객체 리터럴에 의한 객체 생성

const person = {
  name: "J",
};

객체 생성 방법

객체 리터럴
Object 생성자 함수
생성자 함수
Object.create 메소드
클래스

10.3 프로퍼티

프로퍼티는 키와 값으로 구성됨

프로퍼티 키에는 문자열 및 심벌 값을 사용할 수 있음
- 그 외의 값은 암묵적 타입 변환 됨

const obj = {
  1: "value",
};

식별자 네이밍 규칙을 따르지 않는 프로퍼티 키엔 따옴표를 사용해야 함

const person = {
  firstName: "J",
  "last-name": "Kim",
};

프로퍼티 키가 문자열 또는 문자열로 평가될 수 있는 표현식일 경우 대괄호를 사용함

const key = "lastName";
const person = {
  firstName: "J",
  [key]: "Kim",
};

console.log(person); // {firstName: 'J', lastName: 'Kim'}

프로퍼티 키를 중복 선언하면 나중에 선언된 프로퍼티가 적용됨

const person = {
  name: "J",
  name: "H",
};

console.log(person); // {name: 'H'}

10.4 메소드

객체에 묶여 있는 함수

10.5 프로퍼티 접근

마침표 표기법

const person = {
  firstName: "J",
};

console.log(person.firstName); // 'J'

대괄호 표기법

식별자 네이밍 규칙을 따르지 않는 키는 대괄호 표기법을 사용해야 함
키가 숫자로 이루어진 문자열인 경우 따옴표를 쓰지 않아도 됨

const person = {
  firstName: "J",
  "last-name": "Kim",
  1: "value",
};

console.log(person["firstName"]); // 'J'
console.log(person["last-name"]); // 'Kim'
console.log(person[1]); // 'value'

존재하지 않는 프로퍼티에 접근하면 undefined를 반환함

console.log(person.gender); // undefined

10.6 프로퍼티 값 갱신

이미 존재하는 프로퍼티에 값을 할당하면 값이 갱신됨

const person = {
  firstName: "J",
  "last-name": "K",
};

person.firstName = "H";
person["last-name"] = "L";

console.log(person); // {firstName: 'H', last-name: 'L'}

10.7 프로퍼티 동적 생성

존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 생성됨

const person = {
  firstName: "J",
};

person.lastName = "K";

console.log(person); // {firstName: 'J', lastName: 'K'}

10.8 프로퍼티 삭제

const person = {
  firstName: "J",
};

delete person.firstName;

console.log(person); // {}

cf) 존재하지 않는 프로퍼티를 delete 해도 에러가 발생하지 않음

const person = {
  firstName: "J",
};

delete person.lastName;

console.log(person); // {firstName: 'J'}

10.9 ES6에서 추가된 객체 리터럴의 확장 기능

10.9.1 프로퍼티 축약 표현

프로퍼티 값으로 사용하는 변수와 동일한 이름을 프로퍼티 키로 사용할 때, 프로퍼티 키를 생략할 수 있음 -> 해당 변수 이름으로 프로퍼티 키가 자동 생성됨

const x = 1,
  y = 2;

const obj = {
  x,
  y,
};

console.log(obj); // {x: 1, y: 2}

10.9.2 계산된 프로퍼티 이름

문자열 또는 문자열로 평가될 수 있는 표현식으로 프로퍼티 키를 생성할 수 있음

const key1 = "firstName";
const key2 = "lastName";

const person = {
  [key1]: "J",
};
person[key2] = "K";

console.log(person); // {firstName: 'J', lastName: 'K'}

10.9.3. 메소드 축약 표현

function 키워드를 생략할 수 있음

// ES5
const person = {
  sayHi: function () {
    console.log("Hi");
  },
};

// ES6
const person = {
  sayHi() {
    console.log("Hi");
  },
};

person.sayHi(); // Hi