ModernJS / 07 - 객체 리터럴

1. 객체란?

• 객체 기반의 언어인 자바스크립트
  • 원시 값을 제외한 나머지 값은 모두 객체

• 변경 가능한 값 mutable value
  • 원시 값은 변경이 불가능한 값 immutable value

 

1-1. 객체의 구성

0개 이상의

프로퍼티로 구성된 집합이며, 프로퍼티는 키(key) 와 값(value) 으로 구성

 

1-1-1. 프로퍼티

• 객체의 상태를 나타내는 값
• 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있음

var obj_name = {
	ppname: 'property name' // 프로퍼티
  // 프로퍼티 키 : 프로퍼티 값
};

console.log(obj_name);

 

1-1-2. 메서드

• 프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메서드라 부름
• 프로퍼티를 참조하고 조작할 수 있는 동작

var obj_name = {
	mthdname: function() { // 메서드
		console.log("hello");
	}
};

console.log(obj_name);

 

---

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

 

2-1. 다양한 객체 생성 방법

• 객체 리터럴
• Object 생성자 함수
• 생성자 함수
• Object.create 메서드
• 클래스(ES6)

 

2-1-1. 객체 리터럴

리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용하여 값을 생성하는 표기법

→ 객체 리터럴은 객체를 생성하기 위한 표기법

• 가장 일반적이고 간단
• 중괄호({}) 내에 0개 이상의 프로퍼티를 정의

 

2-2. 객체 리터럴의 특징

• 객체 리터럴의 중괄호({}) 는 코드 블록을 의미하지 않음
  • 반드시 중괄호({}) 뒤에 세미콜론(;) 을 붙여줘야 함
• 유연함과 강력함을 대표하는 객체 생성 방
• 객체 리터럴 외의 객체 생성 방식은 모두 함수를 사용해 객체를 생성

 

---

3. 프로퍼티

객체는 프로퍼티의 집합이며, 프로퍼티는 키(key) 와 값(value) 으로 구성

• 프로퍼티를 나열할 때는 쉼표(,) 로 구분
• 프로퍼티의 키(key) : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
• 프로퍼티의 값(value) : 프로퍼티의 값(value) 는 자바스크립트에서 사용할 수 있는 모든 값

 

3-1. 키 key

프로퍼티 값(value) 에 접근할 수 있는 이름으로서 식별자 역할

 

3-1-1. 네이밍 규칙

반드시 식별자 네이밍 규칙을 지켜야 하는 것은 아님

준수하는 경우

따옴표(’’, “”) 로 묶어야할 필요가 없음

 

준수하지 않는 경우 (ex symbol)

따옴표(’’, “”) 로 묶어줘야 함

var pptest = {
	ppName: 'with rule', // 준수하는 경우
	'pp-Name': 'without rule' // 준수하지 않는 경우
};

console.log(pptest);

 

3-1-2. 동적 생성

문자열 또는 문자열로 평가할 수 있는 표현식을 사용

→ 프로퍼티 키(key) 로 사용할 표현식을 대괄호([]) 로 묶어야 함

var pptest = {};
var new_key = 'new_key'; // 문자열

pptest[new_key] = 'dynamic creation'; // 대괄호로 묶음

console.log(pptest);

 

3-1-3. 특징

• 문자열이나 심벌 값 외의 값을 사용하면 문자열로 암묵적 타입 변환
• 예약어를 사용해도 에러는 발생하지 않음
• 중복 선언하면 나중에 선언한 프로퍼티가 이전의 프로퍼티를 덮어씀

 

---

4. 메서드

자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값(value) 으로 사용할 수 있음

→ 객체인 함수는 값으로 취급할 수 있기에 프로퍼티의 값(value) 으로 사용 가능

→ 일반 함수와 구분을 위해 메서드라 칭함

 

---

5. 프로퍼티 접근

1. 마침표 프로퍼티 접근 연산자(.) 를 사용하는 마침표 표기법
2. 대괄호 프로퍼티 접근 연산자([]) 를 사용하는 대괄호 표기법

var team = { 
	name: 'modern',
	members: 5
};

console.log(team.name); // 'modern'
console.log(team['members']); // 5

 

5-1. 마침표 표기법

프로퍼티의 키(key) 가 식별자 네이밍 규칙을 준수한 경우에만 사용이 가능

 

5-1-1. 표현 방식

• 연산자의 좌측 : 객체로 평가되는 표현식
• 연산자의 우측 : 프로퍼티의 키(key)

 

5-2. 대괄호 표기법

프로퍼티의 키(key) 가 식별자 네이밍 규칙을 준수하든 안하든 사용이 가능

 

5-2-1. 표현 방식

• 연산자의 좌측 : 객체로 평가되는 표현식
• 연산자의 내부 : 프로퍼티의 키
  • 반드시 따옴표로 감싼 문자열 이어야 함
  • 따옴표가 없다면 식별자로 인식 → 없는 식별자라면 undefined 를 반환하게 됨
  • 숫자로만 이뤄진 경우에는 따옴표가 없어도 됨

 

---

6. 프로퍼티의 추가 기능

 

6-1. 프로퍼티 값(value) 갱신

이미 존재하는 프로퍼티에 값(value) 을 할당하면 갱신됨

var team = { name: 'modern' };

team.name = 'modernJS'; // 값 갱신

console.log(team);

 

6-2. 프로퍼티 동적 생성

존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가됨

var team = { name: 'modern' };

team.members = 5; // members: 5 프로퍼티를 동적으로 생성

console.log(team);

 

6-3. 프로퍼티 삭제

delete 연산자를 이용해 프로퍼티를 삭제

→ 존재하지 않는 프로퍼티라면 에러 없이 그냥 무시됨

var team = { 
	name: 'modern',
	members: 5
};

delete team.members; // members 프로퍼티 삭제
delete team.topic; // 존재하지 않는 프로퍼티 -> 그냥 무시

console.log(team);

 

---

7. 객체 리터럴의 확장 기능

ES6 에서는 더욱 간편하고 표현력 있는 객체 리터럴의 확장 기능을 제공

 

7-1. 프로퍼티 축약 표현

• 프로퍼티의 값은 변수에 할당된 식별자 표현식일 수도 있음
• 변수 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 키를 생략할 수 있음 → 자동생성

var name = 'modern';
var members = 5;

var team = {
	name: name, // 프로퍼티의 값은 변수에 할당된 식별자 표현식
	members // 변수 이름 = 프로퍼티 키 -> 생략 가능
};

console.log(team);

 

7-2. 계산된 프로퍼티 이름

• 문자열, 문자열로 타입 변환할 수 있는 값으로 평가되는 표현식을 사용해 프로퍼티 키를 동적으로 생성 가능
• 프로퍼티 키로 사용할 표현식을 대괄호로 묶어야 함
• 객체 리터럴 내부에서도 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성 가능

var name_1 = 'na';
var name_2 = 'me';
var members_1 = 'mem';
var members_2 = 'bers';

var team = {
	[name_1+name_2]: 'modern' // 내부에서 계산된 프로퍼티 이름으로 동적 생성
};
team[members_1+members_2] = 5; // 외부에서 계산된 프로퍼티 이름으로 동적 생성

console.log(team);

 

7-3. 메서드 축약 표현

메서드를 정의할 때 function 키워드를 생략 가능

var team = {
	name: 'modern',
	
	member_cnt() {
		console.log('total = 5');
	}
};

team.member_cnt();

 

---