객체
JavaScript는 객체 기반의 프로그래밍 언어입니다.
앞서 변수 타입에서 설명했던 Primitive Type의 값을 제외한 모든 값은 객체입니다.
프로퍼티는 key와 value로 구성되며, 객체는 0개 이상의 프로퍼티로 구성되어 있습니다.
var phone = {
brand: 'apple',
series: 14,
call: function() {
console.log("ringring");
}
}위 객체를 예로 들어보겠습니다.
객체의 이름은 phone입니다.
객체의 프로퍼티는 3가지로 구성되어 있습니다.
첫 번째는 brand란 키와 'apple'이란 값을 가지는 프로퍼티,
두 번째는 series란 키와 14란 값을 가지는 프로퍼티,
세 번째는 call이란 키와 function() {console.log("ringring"); 이란 값을 가지는 프로퍼티입니다.
여기서 세 번째 프로퍼티의 값은 함수입니다.
JavaScript에서 함수는 일급 객체이고 값으로 사용할 수 있습니다.
이 떼, 프로퍼티의 값이 함수인 것은 일반 함수와 구분짓기 위해 메서드라고 부릅니다.
따라서 위 객체는 2개의 프로퍼티와 1개의 메서드로 이루어져있다고 할 수 있습니다.
객체의 생성
다른 클래스 기반의 언어는 객체 생성을 위한 몇 가지 단계가 나누어집니다.
클래스를 정의하고, 생성자를 호출하여 인스턴스를 생성하게 됩니다.
하지만 JavaScript는 다양한 방법으로 객체를 생성할 수 있습니다.
- 객체 리터럴
- 생성자 함수
- Object 생성자 함수
- Object.create 메서드
- 클래스
이 포스트에서는 객체 리터럴을 통해 객체를 생성하는 방법에 대해 설명하겠습니다.
리터럴이란 사람이 이해할 수 있는 문자나 기호를 사용한 표기법입니다.
객체 리터럴이란 이런 방법으로 객체를 생성하기 위한 표기법입니다.
객체 리터럴을 통해 객체를 생성할 때는 중괄호 내에 0개 이상의 프로퍼티를 정의하면 됩니다.
객체가 변수에 할당되는 시점에 자바스크립트 엔진에 의해 객체가 생성됩니다.
객체를 생성할 때, 모든 프로퍼티를 포함할 필요는 없으며 후에 프로퍼티를 추가하거나 제거할 수 있습니다.
해당 내용은 프로퍼티 접근 방법에 대해 다룬 뒤 설명하도록 하겠습니다.
프로퍼티
프로퍼티는 키와 값으로 이루어진 객체의 구성요소입니다.
프로퍼티의 키와 값엔 다음과 같은 값들을 사용할 수 있습니다.
프로퍼티 키
기본적으로 심볼 값과 모든 문자열 값을 사용할 수 있습니다.
하지만 식별자 네이밍 규칙에 어긋나는 경우는 꼭 따옴표를 사용해야 합니다.
프로퍼티 키에 심볼이나 문자열이 아닌 값이 들어가면 암묵적 타입 변환을 통해 문자열로 변환됩니다.
심지어 예약어도 사용이 가능하지만 이는 권장하지 않습니다.
중복된 값도 허용되며, 이 경우 나중에 선언한 프로퍼티로 덮어씌워집니다.
프로퍼티 값
프로퍼티 값엔 JavaScript에서 사용할 수 있는 모든 값을 넣을 수 있습니다.
아래는 다양한 프로퍼티를 포함한 객체를 선언하는 예시입니다.
code>
var obj = {
firstName: 'Hyeonsik',
'last-name': 'Bae',
age: 30,
30: 'age',
this: 'this',
var: 'var',
'': '',
age: 20,
}
console.log(obj);result>
{
'30': 'age',
firstName: 'Hyeonsik',
'last-name': 'Bae',
age: 20,
this: 'this',
var: 'var',
'': ''
}메서드
JavaScript에서 함수는 일급 객체입니다.
따라서 함수를 값으로써 취급할 수 있고, 이를 프로퍼티 값으로 취급할 수 있습니다.
code>
var obj = {
sayHello: function() {
console.log('Hello');
},
}
console.log(obj);result>
{ sayHello: ƒ sayHello() }프로퍼티 접근
객체 내 프로퍼티에 접근할 수 있는 방법은 두 가지가 있습니다.
- 마침표 표기법
- 대괄호 표기법
마침표 표기법
마침표 표기법은 마침표 프로퍼티 접근 연산자의 좌측엔 객체, 우측엔 프로퍼티 키를 지정하여 사용합니다.
하지만 프로퍼티 키가 식별자 네이밍 규칙을 준수하지 않는 경우엔 Syntax Error가 발생합니다.
code>
var obj = {
firstName: "hyeonsik",
'last-name': "bae",
30: 'age',
}
console.log(obj.firstName);
console.log(obj.last-name);
console.log(obj.'last-name');
console.log(obj.30);
console.log(obj.'30');result>
'hyeonsik'
NaN
Syntax Error
Syntax Error
Syntax Error대괄호 표기법
대괄호 표기법은 객체 우측의 대괄호 내에 따옴표로 감싼 프로퍼티 키를 넣어 사용합니다.
따옴표로 감싸지 않는 경우, 해당 객체가 존재하면 Reference Error를 해당 객체가 존재하지 않으면 undefined를 반환합니다.
프로퍼티 키가 숫자인 경우엔 따옴표를 생략할 수 있습니다.
code>
var obj = {
firstName: "hyeonsik",
'last-name': "bae",
30: 'age',
}
console.log(obj[firstName]);
console.log(obj[`firstName`]);
console.log(obj[last-name]);
console.log(obj['last-name']);
console.log(obj[30]);
console.log(obj['30']);result>
Reference Error
'Hyeonsik'
Reference Error
'bae'
'age'
'age'
프로퍼티 생성, 수정, 삭제
생성되어 있는 객체에 접근하여 프로퍼티를 생성, 수정, 삭제할 수도 있습니다.
프로퍼티 생성
존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 생성됩니다.
var obj = {
name: 'hyeonsik',
}
obj.age = 30;프로퍼티 수정
존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 바뀝니다.
var obj = {
name: 'hyeonsik',
}
obj.name = 'bae';프로퍼티 삭제
delete 연산자를 통해 프로퍼티를 삭제할 수 있습니다.
이 때, 존재하지 않는 프로퍼티를 삭제하면 아무 일도 일어나지 않습니다.
var obj = {
name: 'hyeonsik',
}
delete obj.name;
delete obj.age;ES6 객체 리터럴 확장 기능
ES6에서 추가된 내용들이 있습니다.
프로퍼티 축약 표현
프로퍼티 키에 변수를 삽입하고자 할 때, 프로퍼티 키와 변수 이름이 같으면 프로퍼티 키를 생략할 수 있습니다.
아래의 경우, 변수 name의 값이 객체 obj의 프로퍼티 name의 값으로 자동 생성됩니다.
name = 'Hyeonik';
var obj = {
name,
};계산된 프로퍼티 이름
표현식을 통해 프로퍼티 키를 생성할 수 있습니다.
이 때, 프로퍼티 키는 대괄호로 감싸져야 합니다.
const name = 'property';
let i = 0;
var obj = {
[`${name} [${i}]`]: i,
[`${name} [${++i}]`]: i,
[`${name} [${++i}]`]: i,
}메서드 축약 표현
메서드 정의 시, function 키워드 생략이 가능합니다.
var obj = {
sayHello() {
console.log('Hello');
}
}