CH10 객체리터럴

객체란?

JS는 객체기반의 프로그래밍언어

원시값을 제외한 모든 것들은 객체임

객체타입

객체타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조로 변경가능한 값임

원시타입

변경 불가능한 값임

객체의 구조

0개 이상의 프로퍼티로 구성된 집합

프로퍼티

key-value 쌍으로 구성됨

JS에서 사용하는 모든 값은 프로퍼티 값이 될 수 있음

객체의 상태를 나타내는 값

메서드

js의 함수는 일급 객체이므로 값으로 취급할 수 있음

따라서 함수역시 프로퍼티로 사용이 가능하며, 이를 메서드라고 부름

프로퍼티를 참조하고 조작하는 동작을 말함

객체의 생성

객체 생성의 방법

1. 객체리터럴
2. Object 생성자 함수
3. 생성자 함수
4. Object.create 메서드
5. 클래스(ES6)

객체 리터럴에 의한 생성

가장 일반적인 방법 → 사람이 이해할 수 있는 문자로 표기하는 방법

{}이내에 0개 이상의 프로퍼티를 정의하며, 변수 할당 시점에 객체리터럴을 해석해 객체를 만듦

var person={
    name:'Lee',
    sayHello: function(){
        console.log(`hi! my name is ${this.name}`);
    }
};
console.log(typeof person);
console.log(person);

객체 리터럴의 {}는 코드 블록이 아니다. 따라서 자체 종결성을 가지지 않는다. → 세미콜론이 필요

프로퍼티

객체는 프로퍼티의 집합이며, 키와 값으로 구서오딘다.

프로퍼티는 ,를 사용하여 구분한다.

키

빈 문자열을 포함하는 모든 문자열 또는 심벌값

식별자 네이밍을 따르는 경우 따옴표를 생략해도 되나, 그렇지 않은 경우 따옴표를 붙여야함

var person={
    firstName:'lee',
    'last-name':'v'
};

따옴표가 없으면 -를 연산자로 해석하기 때문임

또한, 키값에 문자열이나 심벌값 외의 값을 사용하면 암묵적으로 문자열형태로 변환됨

var person={
    1:0,
    2:1,
}
console.log(person) //{'1':'0', '2':'1'});

중복된 키를 사용하는 경우, 가장 나중에 선언한 값으로 변경됨

값

자바스크립트에서 사용할 수 있는 모든 값

프로퍼티 추가

객체[키]=값의 형태로 key-value를 추가할 수 있음

프로퍼티 접근

1. .을 사용하는 마침표 표기법
2. []를 사용하는 대괄호 표기법또, 키값이 식별자 네이밍에 맞지 않는경우, 반드시 대괄호 표기법을 사용해야함
3. 대괄호를 사용하는 경우 내부 키값은 반드시 따옴표를 사용한 문자열이어야 함

객체에 존재하지 않는 프로퍼티에 접근하면 오류가 아니라 undefined를 반환함

QUIZ

💡 다음 코드를 브라우저 환경과 nodejs환경에서 각각 수행하고 결과를 확인한 뒤 이유를 알아봅셔~

var person={
    'last-name':'Lee',
    age:10,
}
person.'last-name' //Error
person.last-name //NaN or name is not defined
person['last-name']; //Lee

프로퍼티 삭제

delete연산자로 프로퍼티를 삭제함

없는 프로퍼티 삭제시 아무런 에러 없이 무시됨

var person={
    name:'Lee',
    age:13,
}
delete person.name;

ES6의 객체 리터럴 확장기능

프로퍼티 축약 표현

var x=1;
var y=2;
var obj={
    x:x,
    y:y,
}

를 다음과 같이 표기할 수 있다.

var x=1, y=2;
var obj={x,y};

계산된 프로퍼티

계산된 프로퍼티를 표현식을 통해 동적으로 생성하기 위해서는 []를 사용한다.

var prefix='prop';
var obj={};
var i=0;
for (; i<3; i++){
    obj[prefix+'-'+i]=i;
}

메서드 축약표현

()를 사용하여 함수를 축약형태로 표현할 수 있다.

ES5

var obj={
    name:'Lee',
    sayHi:function(){
        console.log("HI");
    }
}

ES6

const obj={
    name:'Lee',
    sayHi(){
        console.log("HI");
    }
}