[자바스크립트 필기] #5 - 객체 리터럴

 

*이 필기는 웹 프로그래밍 튜토리얼에서 보고 작성합니다. 

 

1. 객체란?

• 원시 타입은 단 하나의 값만 나타냄
• 객체 타입은 다양한 값을 하나의 단위로 구성한 자료구조 
• 원시 값은 변경 불가능한 값
• 객체는 변경 가능한 값 

프로퍼티는 key와 value로 구성된다. 

모든 값이 프로퍼티 value가 될 수 있는데 프로퍼티 value가 함수일 경우, method라고 부른다. 

따라서 객체는 프로퍼티와 메서드로 구성된 집합체이다.

 

2. 객체 리터럴에 의한 객체 생성

다양한 객체 생성 방법이 지원된다. 

• 객체 리터럴 - 가장 일반적이고 간단한 방법
• Object 생성자 함수
• 생성자 함수
• Object.create 메서드
• 클래스

//객체 리터럴 생성법
var person = {
	name: 'lee',
    sayHello: function () {
    	console.log(`Hello ${this.name}`);
    }
}; // <-------- 세미콜론을 붙인다.

이 외의 방법은 모두 함수를 통해 객체를 생성한다.

 

3. 프로퍼티 

프로퍼티는 키와 값으로 구성된다. 

var person = {
	name: 'lee',
    age: 20
};

위 와 같이 프로퍼티를 나열할 때는 쉼표(,)로 구분한다. 

 

식별자 네이밍 규칙을 따르지 않으면 프로퍼티 키에 반드시 따옴표를 써야한다.

 

4. 프로퍼티 접근

접근하는 방법은 두 가지

• 마침표 프로퍼티 접근 연산자(.) 
• 대괄호 프로퍼티 접근 연산자([...]) - 대괄호 안에 따옴표로 감싸야한다. 

var person = {
	name: 'Lee'
};

console.log(person.name); //Lee
console.log(person['name']); //Lee

이 외에 자바스크립트에서 사용 가능한 유효 이름이 아니라면, 반드시 대괄호 접근법을 선택해야 한다. 

 

5. 프로퍼티 값 갱신 

이미 존재하는 프로퍼티에 value를 할당하면 프로퍼티 value가 갱신된다.

var person = {
	name: 'Lee'
};

//갱신
person.name = 'Kim';

console.log(person.name); //Kim

 

6. 프로퍼티 동적 생성 & 삭제 

• 존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 값이 할당된다. 
• delete 연산자는 객체의 프로퍼티를 삭제한다. 

var person = {
	name: 'Lee'
};

person.age = 20;

console.log(person); 
// {name: "Lee", age: 20}

 

var person = {
	name: 'Lee'
};

person.age = 20; //동적 생성 

delete person.age; //age 프로퍼티 존재 -> 삭제 가능 
delete person.address; //address 프로퍼티 존재 X -> 삭제 불가능 & 무시됨

console.log(person); // {name: "Lee"}

 

여기까지 입니다 - 틀린 점이 있다면 꼭 지적해주세요!