Chapter 10 객체 리터럴
자바스크립트는 객체기반의 프로그래밍 언어.
원시값을 제외한 나머지(함수,배열,정규식)등은 모두객체.
원시타입의 값, 즉 원시 값은 변경 불가능한(immutable value)
객체타입의 값, 즉 객체는 변경 가능한 (mutable value)
객체는 0개이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 key value로 구성. 예시를보자.
var 객체 = {
name : "samuel"
}name : "samuel"는 프로퍼티 / name은 프로퍼티key / "samuel"은 프로퍼티 value
자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 된다. 자바스크립트 함수는 일급객체 이므로 값으로 취급가능.
프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해서 "메서드"라 칭함.
var counter - {
num:0,
increase:function(){
this.num++; // this 는 num을 지칭.
}
}메서드
increase:function(){
this.num++; // this 는 num을 지칭.
}
프로퍼티: 객체의 상태를 나타내는 값(data)
메서드 : 프로퍼티를 참조하고 조작할 수 있는 동작(behavior)
상태와 동작을 하나의 단위로 "구조화"할 수 있어서 유용.
객체와 함수
자바스크립트에서 객체는 함수와 밀접한 관계.
함수로 객체를 생성하기도 하고, 함수자체가 객체이기도 함. 함수와 객체를 분리해서 생각할 수 없는 개념.
객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 객체지향 프로그래밍이라 함. 19장에서 볼예정(정리 후 링크 참조예정)
추가로 함수형 프로그래밍에 대한 간단한 설명
var person = {
name: "samuel",
sayHi: function () {
console.log("hi " + this.name);
}
}
person.sayHi();
console.log(typeof person);
console.log(person)
프로퍼티
객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성.
var person = {
name: "samuel", //프로퍼티의 key는 name / value는 "samuel"
age : 28; // key 는 age / value는 28
}식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용.
var person = {
firstName: 'Ung-mo',
last-name: 'Lee' // SyntaxError: Unexpected token '-'
};-연산자로 해석.
메서드
프로퍼티 값이 함수일 경우 일반함수와 구분하기위해 메서드라 칭함. 메서드는 객체에 묶여있는 함수.
var circle={
radius:5,
GetDiameter: function(){
return this.radius*2;
}
}
console.log(circle.GetDiameter());메서드 내부에서 사용된 this키워드는 객체 자신을 가리키는 참조변수. 22장 this에서 더 상세히 알아보자(업데이트 예정)
프로퍼티 접근
두가지 방법이 있는데
1. (접근연산자).마침표 표기법
2. ([...])를 사용하는 대괄호 표기법
var person = {
name: 'Lee'
};
// 마침표 표기법에 의한 프로퍼티 접근
console.log(person.name); // Lee
// 대괄호 표기법에 의한 프로퍼티 접근
console.log(person['name']); // Leeconsole.log(person[name]); // 식별자로 해석 // ReferenceError: name is not defined객체에 존재 하지않는 프로퍼티에 접근하면 undifined반환 RefferenceError가 발생하지 않음.
var person = {
'last-name': 'Lee',
1: 10
};
person.'last-name'; // -> SyntaxError: Unexpected string
person.last-name; // -> 브라우저 환경: NaN
// -> Node.js 환경: ReferenceError: name is not defined
person[last-name]; // -> ReferenceError: last is not defined
person['last-name']; // -> Lee
// 프로퍼티 키가 숫자로 이뤄진 문자열인 경우 따옴표를 생략할 수 있다.
person.1; // -> SyntaxError: Unexpected number
person.'1'; // -> SyntaxError: Unexpected string
person[1]; // -> 10 : person[1] -> person['1']
person['1']; // -> 10
전역변수 name은 window의 이름을 가리키며 기본값은 빈문자열 고로 person.last-name은 undifinded-''와 같으므로 NaN이됨.
프로퍼티 값 갱신
var person = { name: 'Lee' }; // person 객체에 name 프로퍼티가 존재하므로 name 프로퍼티의 값이 갱신된다. person.name = 'Kim'; console.log(person); // {name: "Kim"}
프로퍼티의 동적생성
var person = { name: 'Lee' }; // person 객체에는 age 프로퍼티가 존재하지 않는다. // 따라서 person 객체에 age 프로퍼티가 동적으로 생성되고 값이 할당된다. person.age = 20; console.log(person); // {name: "Lee", age: 20}
공부를 하다가 이런생각이 들었다. var키워드는 중복선언이 가능하고, 값을 계속 재할당이 가능한데. const키워드를 사용한 객체는 어떨까 ?
const person = {
name : 'samuel'
}
person.name = '태진';
person.age =28;
console.log(person.age); //28
console.log(person.name); //태진age라는 프로퍼티가 동적으로 생성이 됨.
const는 변경불가 키워드임에도 object는 수정이 가능하다.
그렇다면 이 객체를 변경불가로 만들려면 뭘 써야할까 해서 찾아본게 object.freeze()다.
const person = {
name : 'samuel'
}
Object.freeze(person);
person.name = '태진';
person.age =28;
console.log(person.age);
console.log(person.name); 
동결시키는 방법이다. 추가적으로 MDN을 참고. Object.freeze();
계산된 프로퍼티 이름
// ES6
let x = 1, y = 2;
// 프로퍼티 축약 표현
const obj = { x, y };
console.log(obj); // {x: 1, y: 2}// ES6
const prefix = 'prop';
let i = 0;
// 객체 리터럴 내부에서 계산된 프로퍼티 이름으로 프로퍼티 키 동적 생성
const obj = {
[`${prefix}-${++i}`]: i,
[`${prefix}-${++i}`]: i,
[`${prefix}-${++i}`]: i
};
console.log(obj); // {prop-1: 1, prop-2: 2, prop-3: 3}메서드 축약 표현
// ES5
var obj = {
name: 'Lee',
sayHi: function() {
console.log('Hi! ' + this.name);
}
};
obj.sayHi(); // Hi! Lee// ES6
const obj = {
name: 'Lee',
// 메서드 축약 표현
sayHi() {
console.log('Hi! ' + this.name);
}
};
obj.sayHi(); // Hi! Lee
step by step