객체 리터럴
10. 1 객체
- 객체 기반 프로그래밍 언어이니 자바스크립트에서는 원시 값을 제외한 나머지 값은 모두 객체다.
함수, 배열, 정규 표현식 등이 객체라고 할 수 있다. - 원시값은 변경 불가능한 값(Immutable value)이나 객체는 변경 가능한 값이다.(Mutable value)
- 객체는 0개 이상의 프로퍼티로 구성되어있다.
const a = {}; // 빈 객체도 0이다. - 프로퍼티(Property): key: value로 구성되어있으며, 객체의 상태를 나타내는 값, 이런 프로퍼티가 모여 객체가 된다.
- 메소드: 프로퍼티를 참조하고 조작하는 동작(함수)
객체와 함수
함수로 객체를 생성하거나 함수 자체가 객체가 되기도 하므로 두 개는 한 세트라고 보면 된다.
10.2 객체 리터럴에 의한 객체 생성
자바스크립트에서 객체 생성하는 방법
- 객체 리터럴: obj 변수에 할당되는 시점에 자바스크립트 엔진이 리터럴을 해석해서 객체 생성함
const obj = { name: 'Leona', setName() { console.log(this.name); } }; - Object 생성자 함수
new Object() - 생성자 함수
function Person(name) { this.name = name; } console.log(new Person('Leona').name); // 'Leona' - Object.create
- Class(ES6)
객체 리터럴은 값이다.
- 이는 표현식이기 때문에 세미콜론을 붙인다.
- new 생성자로 생성자를 호출하지 않고 리터럴로 생성할 수 있어 유연하게 객체를 생성할 수 있다.
- 객체를 생성하며 동적으로 프로퍼티를 조작할 수 있다.
10.3 프로퍼티
-
프로퍼티는 Key: value로 구성한다.
-
key: 빈 문자열을 포함한 모든 문자열 또는 심벌 값(그러나 빈 문자열은 key로서 의미가 없다)
-
value: 모든 값
const obj = { // name: key // 'Leona': value name: 'Leona', age: 31, } -
식별자(key)로 유효하지 않은 값을 사용할 경우 따옴표를 사용해야 한다.
const obj = { firstClass: 'Javascript', // -는 연산자로 인식되기 때문에 key로 사용하기에 알맞지 않으므로 따옴표로 구분한다. 'second-class': 'Python', } console.log(obj['second-class']); // 'Python' -
동적으로 프로퍼티를 생성하는 경우 key를 대괄호([])로 묶거나 .으로 생성할 수 있다.
const obj = { firstClass: 'Javascript', 'second-class': 'Python', } obj['third-class'] = 'Dart'; obj.lastClass = 'C++'; // {firstClass: 'Javascript', second-class: 'Python', third-class: 'Dart', lastClass: 'C++'} -
프로퍼티 key에 문자열이나 심벌 외 값을 사용하면 암묵적 형변환을 통해 문자열로 바뀐다.
const obj = { 0: 1, 1: 2, 2: 3, } console.log(obj); // {0: 1, 1: 2, 2: 3}Quiz
위 예제에서 key가 0인 값을 호출하면 어떤 값이 출력되나요?
10.4 메소드
- 객체에 묶여있는 함수로, 메소드도 객체다.
- 일반 함수와 구분하기 위해 메소드라고 부른다.
const obj = { name: 'Leona', setName() { // 메소드 console.log(this.name) // this는 obj.name을 가리킨다. } }; obj.setName(); // 'Leona'
10.5 프로퍼티 접근
- 마침표 프로퍼티 접근
const person = { name: 'Leona', } console.log(person.name); // 'Leona' - 대괄호 프로퍼티 접근
const person = { name: 'Leona', 'name-title': 'The Radiant Dawn', } console.log(person['name-title']); // 'The Radiant Dawn' - 존재하지 않은 프로퍼티에 접근하는 경우 에러를 발생시키지 않고 undefined를 반환한다.
const person = { name: 'Leona', 'name-title': 'The Radiant Dawn', } console.log(person.age); // undefinedQuiz
위 예제에서 person.name-title 프로퍼티에 접근하면 어떤 에러가 발생하나요~?
10.6 프로퍼티 값 갱신
이미 존재하는 프로퍼티에 값을 할당하면 갱신된다.
const person = {
name: 'Leona',
}
person.name = 'She is god';
console.log(person); // {name: 'She is god'}10.7 프로퍼티 동적 생성
존재하지 않는 프로퍼티에 값을 할당하면 동적으로 추가된다.
const person = {
name: 'Leona',
}
person.title = 'The Radiant Dawn';
console.log(person); // {name: 'Leona', title: 'The Radiant Dawn'}10.8 프로퍼티 삭제
- 접근할 수 있는 프로퍼티를 삭제한다.
- 존재하지 않는 프로퍼티를 삭제하려 하는 경우 에러없이 무시된다.
const person = {
name: 'Leona',
title: 'The Radiant Dawn',
}
delete person.title = 'The Radiant Dawn';
console.log(person); // {name: 'Leona'}10.9 싱글벙글 ES6 프로퍼티 축약 표현식
-
요랬는데(ES5)
let a = 1, b = 2; const obj = { a: a, b: b, } console.log(obj); // {a: 1, b: 2} -
요래 댔슴당(ES6): 변수명과 프로퍼티 key 이름이 동일할 때 key를 생략할 수 있다.
let a = 1, b = 2; const obj = { a, b } console.log(obj); // {a: 1, b: 2} -
계산된 프로퍼티 이름(?): 프로퍼티 key를 동적으로 생성하려면 대괄호로 묶어서 생성(ES5)
const prefix = 'prop'; const obj = {}; for (let i = 0; i < 3; i++) { obj[prefix + i] = i; } console.log(obj); // {prop1: 1, prop2: 2, prop3: 3} -
계산된 프로퍼티 이름을 리터럴로 동적 생성 가능(ES6)
const prefix = 'prop'; const obj = {}; for (let i = 0; i < 3; i++) { obj[`${prefix}${i}`] = i; } console.log(obj); // {prop1: 1, prop2: 2, prop3: 3} -
메소드 축약 표현
// ES5 const obj = { name: 'Leona', setName: function(name) { this.name = name; } } // ES6 const obj = { name: 'Leona', setName(name) { this.name = name; } } obj.setName('Diana');
레오나의 기묘한 개발 일지