[Deep Dive] 10장 객체리터럴

2 분 소요

1. 객체

객체 타입은 다양한 타입의 값(원시값, 다른객체)들을 하나의 단위로 묶은 자료구조
0개 이상의 프로퍼티(key, value)로 구성된 집합
프로퍼티 값이 함수일 경우 일반함수와 구분되게 메서드(method)라고 함


프로퍼티	객체의 상태를 나타내는 값
메서드	프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작

2. 객체 리터럴에 의한 객체 생성

자바스크립트는 프로토타입 기반 객체 지향 언어

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

객체 리터럴

중괄호({...}) 내에 0개 이상의 프로퍼티를 정의 (코드블럭 x → 세미콜론 필요)

const jongbin = {
  age = 26,
  location = "suwon",
  // 여러개의 프로퍼티 정의
};

3. 프로퍼티

키(key)와 값(value)로 구성됨

const jongbin = {
  age = 26,
  // age는 키, 26은 값
};

< 프로퍼티 키, 값으로 사용할 수 있는 값 >
키(key)	빈 문자열을 포함하는 모든 문자열 또는 심벌 값
값(value)	자바스크립트에서 사용할 수 있는 모든 값

프로퍼티 키는 식별자 네이밍 규칙(카멜케이스)을 따르지 않는 이름에는 반드시 따옴표 사용
프로퍼티 키로 예약어를 사용하는 것도 가능(권장 x)
중복 선언하면 에러 대신 덮어씀

객체의 프로퍼티를 동적으로 생성

프로퍼티 키를 대괄호([...])로 묶음

jongbin[shoes] = "nike";

4. 프로퍼티 접근

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

< 프로퍼티에 접근하는 방법 >

마침표 프로퍼티 접근 연산자(.)를 사용하는 마침표 표기법
대괄호 프로퍼티 접근 연산자([...])를 사용하는 대괄호 표기법

const jongbin = {
  age = 26
};

// 마침표 표기법
console.log(jongbin.age);

// 대괄호 표기법
console.log(jongbin["age"])

대괄호 표기법을 사용할 때 키 값을 따옴표로 감싸야 함
키값이 네이밍 규칙을 준수하지 않았다면 대괄호 표기법을 이용해야 함

5. 프로퍼티 갱신, 접근, 삭제

갱신

const jongbin = {
  age = 26
};

jongbin.age = 20;

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

생성

const jongbin = {
  age = 26
};

jongbin.shoes = "nike";

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

삭제

const jongbin = {
  age = 26
};

delete jongbin.age;

delete 연산자를 사용하여 프로퍼티값을 삭제함(존재하지 않는 프로퍼티의 경우 무시)

6. ES6의 객체 리터럴

축약 표현

const x = 1, y = 2;

// 기존
const jongbin = {
  x: x,
  y: y
}

// ES6
const jongbin = {
  x,
  y
}

ES6에서는 변수 이름과 프로퍼티 키가 동일한 경우 프로퍼티 키를 생략할 수 있다.

여러개 프로퍼티 동적 생성

const something = "shoes";
let i = 0;
const jongbin = {};

// 기존
jongbin[something + '-' + ++i] = "nike"
jongbin[something + '-' + ++i] = "hoka"

console.log(jongbin)  // {shoes-1: "nike, shoes-2: "hoka"}

// ES6
jongbin = {
  [`${something}-${++i}`] : "nike2"
  [`${something}-${++i}`] : "hoka2"
}

console.log(jongbin)  // {shoes-1: "nike2, shoes-2: "hoka2"}

ES6는 객체리터럴 내부에서도 사용 가능

메서드 축약 표현

// 기존
const jongbin = {
  age: 26,
  myOld: function() {
    console.log("I'm " + this.age.toString())
  }
}

// ES6
const jongbin = {
  age: 26,
  myOld() {
    console.log("I'm " + this.age.toString())
  }
}

function 키워드를 생략할 수 있음.

이웅모 선생님의 모던 자바스크립트 Deep Dive를 공부하기 위해 정리한 글입니다.
혹시나 보시다가 고칠 부분이나 마음에 안드시는 부분이 있다면 말씀해주시면 감사하겠습니다!

Twitter Facebook LinkedIn

원종빈