10장 객체 리터럴

객체

객체 : 원시 값을 제외한 자바스크립트를 구성하는 거의 '모든 것'. 원시 값은 변경 불가능한 값이지만 객체 타입의 값, 즉 객체는 변경 불가능한 값임.

객체는 0개 이상의 프로퍼티로 구성된 집합이면 프로퍼티는 키와 값으로 구성

let person = {
    name : 'lee'; // 프로퍼티
    age : 20 //프로퍼티 age 프로퍼티 키  20 프로퍼티 값
    increase : function(){  // 메서드
        this.age++;
    }
}

자바스크립트의 객체 생성 방식

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

프로퍼티

프로퍼티 키는 반드시 식별자 네이밍 규칙을 따라야 하는 것은 아니나 식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야 함.

let person = {
    firstName : 'jaemin' // 식별자 네이밍 규칙을 준수하는 프로퍼티 키
    'last-name' : 'lee'  // 식별자 네이밍 규칙을 준수하지 않는 프로퍼티 키
    //last-name : 'lee'   SyntaxError
}

표현식을 사용해 프로퍼티 키를 동적으로 생성. 키로 사용할 표현식을 대괄호([...])

let obj ={};
let key = 'hello';

obj[key] = 'world';
let obj = {[key]: 'world'};

//빈 문자열을 프로퍼티 키로 사용해도 에러가 발생하지는 않음. 하지만 키로서의 의미를 갖지 못함
//예약어를 프로퍼티 키로 사용해도 에러 발생 x. 예상치 못한 에러가 발생할 여지가 있으므로 권장 x
//프로퍼티 키 중복 선언 시 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어씀

프로퍼티 키에 문자열이나 심벌 값 외의 값을 사용하면 암묵적 타입 변환을 통해 문자열로 전환

메서드

프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메서드라 함

프로퍼티 접근

let person ={
    name : 'lee'
}

console.log(person.name) // 마침표 표기법에 의한 프로퍼티 접근
console.log(person['name']) // 대괄호 표기법에 의한 프로퍼티 접근
//대괄호 표기법의 경우 태괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 
//반드시 따옴표로 감싼 문자열이어야 함
// console.log(person[name])  ReferenceError
// console.log(person[name])  객체에 존재하는 않는 프로퍼티에 접근하면 undefined를 반환

프로퍼티 키가 식별자 네이밍 규칙을 준수하지 않는 이름, 즉 자바스크립트에서 사용 가능한 유효한 이름이 아니면 반드시 대괄호 표기법 사용. 단 프로퍼티 키가 숫자로 이루어진 문자열인 경우 따옴표 생략 가능

let person ={
    'last-name' : 'lee',
    1: 10
}

person.'last-name' // SyntaxError
person.last_name // 브라우저 환경 : NaN

person[last-name] //  ReferenceError
person['last-name'] // lee

person.1  // SyntaxError
person.'1'  // SyntaxError
person[1]   // 10   person[1] -> person['1']
person['1']  // 10

프로퍼티 값 갱신

let person ={
    name : 'lee'
}

person.name = 'Kim'

console.log(person) // {name: "Kim"}

프로퍼티 동적 생성

let person ={
    name : 'lee'
}

person.age = 20

프로퍼티 삭제

let person ={
    name : 'lee'
};

person.age = 20;

//delete 연산자로 age 프로퍼티를 삭제할 수 있음. 프로퍼티가 존재하지 않아도 에러가 발생하지 x
delete person.age;

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

ES6에서 변수 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 키를 생략할 수 있음

let x = 1, y =2;

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

계산된 프로퍼티 이름

// ES6
let prefix = 'prop'
let i = 0

let obj = {}

obj[prefix + '-' + ++i]: i;
obj[prefix + '-' + ++i]: i;
obj[prefix + '-' + ++i]: i;

//ES6
let prefix = 'prop'
let i = 0

const obj = {
    [`${prefix}-${++i}`]: i,
    [`${prefix}-${++i}`]: i,
    [`${prefix}-${++i}`]: i
};

메서드 축약 표현

// ES5
let obj = {
    name : 'Lee',
    sayHi: function(){
        console.log('Hi! ' + this.name)
    }
};
obj.sayHi();

// ES6
const obj = {
    name : 'Lee',
    sayHi(){
        console.log('Hi! ' + this.name)
    }
}
obj.sayHi()