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