객체지향 프로그래밍
객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임
자바스크립트는 객체지향 프로그래밍 언어로, 자바스크립트를 구성하는 거의 '모든 것'이 객체다.
그래서 자바스크립트를 이해하는 데는 객체를 이해하는 것이 가장 중요하다고 생각하여, 객체가 무엇인지는 대충 알고 쓰고 있었지만 다시 한 번 정리하며 완벽히 이해하려 한다.
객체
다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 자료구조
객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성된다.
var person = {
name:'Lee',
age:20
};위의 person 이라는 객체는 2개의 프로퍼티를 가지고 있으며, 각 프로퍼티의 키는 name, age이고 밸류는 'Lee', 20 이다.
자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다. 프로퍼티 값이 함수일 경우, 메서드라 부른다.
- 프로퍼티 : 객체의 상태를 나타내는 값(Data)
- 메서드 : 프로퍼티를 참조하고 조작할 수 있는 동작(함수)
객체 리터럴
객체를 생성하기 위한 표기법.
중괄호 { } 안에 0개 이상의 프로퍼티를 정의한다.
var person = {
name:'Lee',
sayHi() {
console.log('Hi!')
}
}person이라는 객체에 하나의 프로퍼티와 하나의 메서드를 정의하였다.
프로퍼티를 나열할 때는 쉼표(,)로 구분한다. 일반적으로 마지막에는 쉼표를 사용하지 않지만 넣어도 상관없다.
객체 리터럴의 중괄호는 코드 블록을 의미하지 않는다는 데 주의하자. 코드 블록의 닫는 중괄호 뒤에는 세미콜론을 붙이지 않는다. 하지만 객체 리터럴의 닫는 중괄호 뒤에는 세미콜론을 붙인다. 객체는 값으로 여겨지기 때문이다.
프로퍼티 동적 생성
존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 프로퍼티 값이 할당된다.
var person = {
name: 'Lee'
};
person.age = 20;
console.log(person); //{name: "Lee", age: 20}프로퍼티 값 갱신
이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신된다.
person.name = 'Kim';
console.log(person); //{name: "Kim", age: 20}프로퍼티 삭제
delete연산자는 객체의 프로퍼티를 삭제한다. 존재하지 않는 프로퍼티를 삭제하려 하면 아무 에러없이 무시된다.
delete person.age;
console.log(person); //{name: "Kim"}ES6에서 추가된 리터럴의 확장 기능
프로퍼티 축약 표현
ES6에서는 변수 이름과 프로퍼티 키의 이름이 같다면 프로퍼티 키를 생략할 수 있다.
이때 프로퍼티 키는 변수 이름으로 자동 생성된다.
let x = 1;
let y = 2;
const obj = {x, y};
console.log(obj); //{x:1, y:2}메서드 축약 표현
ES6에서는 메서드를 정의할 때 function 키워드를 생략한 축약 표현을 사용할 수 있다.
//ES5
var obj = {
sayHi: function() {
console.log('Hi);
}
};
👇👇👇
//ES6
const obj2 = {
sayHi() {
console.log('Hi');
}
};참고 도서 - 모던 자바크립트 Deep Dive (p.124 ~ p.136)
