모던 자바 스크립트 Deep Dive 를 공부하며 정리하는 글을 또 정리하며 이해하는 글입니다.
1. 객체란?
- 자바스크립트는 객체 이번의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 모든 것이 객체다.
- 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체다.
- 원시 타입의 값, 즉 원시 값은 변경 불가능한 값이지만 객체 타입의 값, 즉 객체는 변경 가능한 값이다.
- 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성된다.
var person = {
name : 'Lee', // 프로퍼티
age : 20 // 프로퍼티 ( 프로퍼티 키 : 프로퍼티 값)
}- 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다.
- 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라 부른다.
var counter = {
num : 0, // 프로퍼티
increase : function () { // 메서드
this.num++;
}
}- 객체는 프로퍼티와 메서드로 구성된 집합체다.
- 프로퍼티 : 객체의 상태를 나타내는 값(data)
- 메서드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(behavior)
- 객체는 객체의 상태를 나타내는 값(프로퍼티)과 프로퍼티를 참조하고 조작할 수 있는 동작(메서드)을 모두 포함할 수 있기 때문에 상태와 동작을 하나의 단위로 구조화할 수 있어 유용하다.
2. 객체 리터럴에 의한 객체 생성
- 자바스크립트는 프로토타입 기반 객체지향 언어로서 클래스 기반 객체지향 언어와는 달리 다양한 객체 생성 방법을 지원한다.
- 객체 리터럴, Object 생성자 함수, 생성자 함수, Object.create 메서드, 클래스(ES6)
- 객체 생성 방법 중에서 가장 일반적이고 간단한 방법은 객체 리터럴을 사용하는 방법이다.
- 리터럴 : 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용하여 값을 생성하는 표기법
- 객체 리터럴 : 객체를 생성하기 위한 표기법
- 객체 리터럴은 중괄호({…}) 내에 0개 이상의 프로퍼티를 정의한다.
- 변수로 할당되는 시점에 자바스크립트 엔진은 객체 리터럴을 해석해 객체를 생성한다.
var person = {
name : 'Lee',
sayHello : function() {
console.log(`Hello! My name is ${this.name}.`);
}
};
console.log(typeof person); // object
console.log(person); // {name : 'Lee', sayHello : f}- 만약 중괄호 내에 프로퍼티를 정의하지 않으면 빈 객체가 생성된다.
- 객체 리처럴의 중괄호는 코드 블록을 의미하지 않는다.
- 객체 리처럴은 값으로 평가되는 표현식이므로 닫는 중괄호 뒤에 세미콜론을 붙인다.
- 객체 리터럴은 자바스크립트의 유연함과 강력함을 대표하는 객체 생성 방식이다.
- 객체 리터럴에 프로퍼티를 포함시켜 객체를 생성함과 동시에 프로퍼티를 만들 수 있고, 객체를 생성한 이후에 프로퍼티를 동적으로 추가할 수도 있다.
- 객체 리터럴 외의 객체 생성 방식은 모두 함수를 사용해 객체를 생성한다.
3. 프로퍼티
- 객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다.
var person = {
name : 'Lee', // 프로퍼티 키 : name, 프로퍼티 값 : 'Lee'
age : 20 // 프로퍼티 키 : age, 프로퍼티 값 : 20
};- 프로퍼티를 나열할 때 쉼표(,)로 구분한다.
- 프로퍼티 키와 프로퍼티 값으로 사용할 수 있는 값
- 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
- 프로퍼티 값 : 자바스크립트에서 사용할 수 있는 모든 값
- 프로퍼티 키는 프로퍼티 값에 접근할 수 있는 이름으로서 식별자 역할을 한다.
- 심벌 값도 프로퍼티 키로 사용할 수 있지만, 일반적으로 문자열을 사용한다.
- 이때 프로퍼티 키는 문자열이므로 따옴표 (’…’ 또는 “…”)로 묶어야 한다.
식별자 네이밍 규칙을 준수하는 이름, 즉 자바스크립트에서 사용 가능한 유효한 이름인 경우 따옴표를 생략할 수 있다.
- 식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야 한다.
문자열 또는 문자열로 평가할 수 있는 표현식을 사용해 프로퍼티 키를 동적으로 생성할 수 있다.
- 이때 프로퍼티 키로 사용할 표현식을 대괄호([…])로 묶어야 한다.
빈 문자열을 프로퍼티 키로 사용해도 에러가 발생하지는 않는다.
- 하지만 키로서의 의미를 갖지 못한다.
프로퍼티 키에 문자열이나 심벌 값 외의 값을 사용하면 암묵적 타입 변환을 통해 문자열이 된다.
- 프로퍼티 키로 숫자 리터럴을 사용하면 따옴표는 붙지 않지만 내부적으로는 문자열로 변환된다.
var, function과 같은 예약어를 프로퍼티 키로 사용해도 에러가 발생하지 않는다.
- 예상치 못한 에러가 발생할 여지가 있으므로 권장하지 않는다.
이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다.
- 에러가 발생하지 않는다.
4. 메서드
- 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값으로 사용할 수 있다.
- 자바스크립트의 함수는 객체(일급 객체)이다.
- 함수는 값으로 취급할 수 있기 때문에 프로퍼티 값으로 사용할 수 있다.
- 프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메서드라 부른다.
- 메서드는 객체에 묶여 있는 함수를 의미한다.
var circle = {
radius : 5, // 프로퍼티
getDiameter : function() { // 메서드
return 2 * this.radius; // this는 circle을 가리킨다.
}
};
console.log(circle.getDiameter()); // 105. 프로퍼티 접근
- 프로퍼티에 접근하는 방법
- 마침표 표기법 : 마침표 프로퍼티 접근 연산자(.)를 사용하는 마침표 표기법
- 대괄호 표기법 : 대괄호 프로퍼티 접근 연산자([…])를 사용하는 대괄호 표기법
- 프로퍼티 키가 식별자 네이밍 규칙을 준수하는 이름, 즉 자바스크립트에서 사용 가능한 유효한 이름이면 마침표 표기법과 대괄호 표기법을 모두 사용할 수 있다.
- 마침표 프로퍼티 접근 연산자 또는 대괄호 프로퍼티 접근 연산자의 좌측에는 객체로 평가되는 표현식을 기술한다.
- 마침표 프로퍼티 접근 연산자의 우측 또는 대괄호 프로퍼티 접근 연산자의 내부에는 프로퍼티 키를 지정한다.
var person = {
name : 'Lee'
};
// 마침표 표기법에 의한 프로퍼티 접근
console.log(person.name); // 'Lee'
// 대괄호 표기법에 의한 프로퍼티 접근
console.log(person['name']); // 'Lee'6. 프로퍼티 값 갱신
- 이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신된다.
var person = {
name : 'Lee'
};
// person 객체에 name 프로퍼티가 존재하므로 name 프로퍼티의 값이 갱신된다.
person.name = 'kim';
console.log(person); // {name : 'Kim'}7. 프로퍼티 동적 생성
- 존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 프로퍼티 값이 할당된다.
var person = {
name : 'Lee'
};
// person 객체에는 age 프로퍼티가 존재하지 않는다.
// 따라서 person 객체에 age 프로퍼티가 동적으로 생성되고 값이 할당된다.
person.age = 20;
console.log(person); // {name : 'Lee', age : 20}8. 프로퍼티 삭제
- delete 연산자는 객체의 프로퍼티를 삭제한다.
- 이때 delete 연산자의 피연산자는 프로퍼티 값에 접근할 수 있는 표현식이어야 한다.
- 만약 존재하지 않는 프로퍼티를 삭제하면 아무런 에러 없이 무시된다.
var person = {
name : 'Lee'
};
// 프로퍼티 동적 생성
person.age = 20;
// person 객체에 age 프로퍼티가 존재한다.
// 따라서 delete 연산자로 age 프로퍼티를 삭제할 수 있다.
delete person.age;
// person 객체에 address 프로퍼티가 존재하지 않는다.
// 따라서 delete 연산자로 address 프로퍼티를 삭제할 수 없다. 이때 에러가 발생하지 않는다.
delete person.address;
console.log(person);9. ES6에서 추가된 객체 리터럴의 확장 기능
- ES6에서는 더욱 간편하고 표현력 있는 객체 리터럴의 확장 기능을 제공한다.
9.1 프로퍼티 축약 표현
- 객체 리터럴의 프로퍼티는 프로퍼티 키와 프로퍼티 값으로 구성된다.
- 프로퍼티 값은 변수에 할당된 값, 즉 식별자 표현식일 수도 있다.
// ES5
var x = 1, y = 2;
var obj = {
x : x,
y : y
};
console.log(obj); // {x : 1, y : 2}- ES6에서는 프로퍼티 값으로 변수를 사용하는 경우 변수 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 키를 생략할 수 있다.
- 이때 프로퍼티 키는 변수 이름으로 자동 생성된다.
// ES6
var x = 1, y = 2;
var obj = { x, y };
console.log(obj); // {x : 1, y : 2}9.2 계산된 프로퍼티 이름
- 문자열 또는 문자열로 타입 변환할 수 있는 값으로 평가되는 표현식을 사용해 프로퍼티 키를 동적으로 생성할 수도 있다.
- 단, 프로퍼티 키로 사용할 표현식을 대괄호([…])로 묶어야 한다.
- 이를 계산된 프로퍼티 이름이라 한다.
- ES5에서 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성하려면 객체 리터럴 외부에서 대괄호([…]) 표기법을 사용해야 한다.
// ES5
var prefix = 'prop';
var i = 0;
var obj = {};
// 계산된 프로퍼티 이름으로 프로퍼티 키 동적 생성
obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;
console.log(obj); // {prop-1 : 1, prop-2 : 2, prop-3 : 3}- ES6에서는 객체 리터럴 내부에서도 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성할 수 있다.
// ES6
var prefix = 'prop';
var i = 0;
var obj = {
[`${prefix}-${++i}`] : i,
[`${prefix}-${++i}`] : i,
[`${prefix}-${++i}`] : i,
};
// 계산된 프로퍼티 이름으로 프로퍼티 키 동적 생성
obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;
console.log(obj); // {prop-1 : 1, prop-2 : 2, prop-3 : 3}9.3 메서드 축약 표현
- ES5에서 메서드를 정의하려면 프로퍼티 값으로 함수를 할당한다.
// ES5
var obj = {
name : 'Lee',
sayHi : function() {
console.log('Hi' + this.name);
}
};
obj.sayHi(); // Hi! Lee- ES6에서는 메서드를 정의할 때 function 키워드를 생략한 축약 표현을 사용할 수 있다.
// ES6
var obj = {
name : 'Lee',
// 메서드 축약 표현
sayHi() {
console.log('Hi' + this.name);
}
};
obj.sayHi(); // Hi! Lee- ES6의 메서드 축약 표현으로 정의한 메서드는 프로퍼티에 할당한 함수와 다르게 동작한다.
전 척척학사지만 말하는 감자에요