Frontend/modern javascript
[Modern javascript]객체 리터럴
igoman2
2021. 8. 9. 21:41
728x90
■자바스크립트는 객체 기반 프로그래밍 언어이다.
- 원시 값을 제외한 나머지 값(함수, 배열, 정규표현식 등)은 모두 객체이다.
- 원시 값은 변경 불가능한 값이지만 객체는 변경 가능한 값이다.
- 객체는 0개 이상의 프로퍼티로 구성된 집합이며 프로퍼티는 키(key)와 값(value)으로 구성된다.
■자바스크립트는 프로토타입 기반 객체지향 언어로 클래스 기반 객체지향 언어와 달리 다양한 객체 생성 방법을 지원한다.
- 객체 지향 함수는 new연산자와 함께 생성자를 호출하여 인스턴스를 생성한다.
인스턴스: 클래스에 의해 생성되어 메모리에 올라간 것
클래스: 인스턴스를 생성하기 위한 템플릿
- 객체 리터럴, Object 생성자 함수, 생성자 함수, Object.create 메서드, 클래스 ...
- 식별자 네이밍 규칙을 따르는 프로퍼티 키를 사용할 것
var person = {
firstName: 'Ung-mo', // 식별자 네이밍 규칙을 준수하는 프로퍼티 키
'last-name': 'Lee' // 식별자 네이밍 규칙을 준수하지 않는 프로퍼티 키
};
console.log(person); // {firstName: "Ung-mo", last-name: "Lee"}
var person = {
firstName: 'Ung-mo',
last-name: 'Lee' // SyntaxError: Unexpected token -
};
■프로퍼티 접근
var person = {
name: 'Lee'
};
// 마침표 표기법에 의한 프로퍼티 접근
console.log(person.name); // Lee
// 대괄호 표기법에 의한 프로퍼티 접근
console.log(person['name']); // Lee
■프로퍼티 동적 생성
var person = {
name: 'Lee'
};
// person 객체에는 age 프로퍼티가 존재하지 않는다.
// 따라서 person 객체에 age 프로퍼티가 동적으로 생성되고 값이 할당된다.
person.age = 20;
console.log(person); // {name: "Lee", age: 20}
■프로퍼티 삭제
var person = {
name: 'Lee'
};
// 프로퍼티 동적 생성
person.age = 20;
// person 객체에 age 프로퍼티가 존재한다.
// 따라서 delete 연산자로 age 프로퍼티를 삭제할 수 있다.
delete person.age;
// person 객체에 address 프로퍼티가 존재하지 않는다.
// 따라서 delete 연산자로 address 프로퍼티를 삭제할 수 없다. 이때 에러가 발생하지 않는다.
delete person.address;
console.log(person); // {name: "Lee"}
728x90