10장 - 2. 객체 리터럴 (프로퍼티 / 메서드)

10.3  프로퍼티

var person = {
  name: 'Lee', //프로퍼티 키:name, 프로퍼티 값: 'Lee',
  age: 20 //프로퍼티 키:age, 프로퍼티 값: 20
}

- 프로퍼티를 나열할 때는 쉼표(,)로 구분

- 일반적으로 마지막 프로퍼티 뒤에는 쉼표를 사용하지 않지만, 사용해도 괜찮다.

 

- 프로퍼티 키

: 빈 문자열을 포함하는 모든 문자열 또는 심벌 값

(**심벌 값 : ES6에 추가된 7번째 타입. 변경 불가능한 원시 타입의 값. 다른 값과 중복되지 않는 유일무이한 값. Symbol함수를 호출해 생성.)

 

 1) 프로퍼티 값에 접근할 수 있는 이름으로서 '식별자 역할'을 한다. 

하지만 반드시 식별자 네이밍 규칙을 따라야 하는것은 아니지만, 식별자 네이밍규칙을 준수하는 프로퍼티 키와 그렇지 않은 프로퍼티 키는 차이가 존재한다.

   - 식별자 네이밍규칙을 준수하는 프로퍼티 키 : 따옴표 생략 가능

   - 식별자 네이밍규칙을 준수하지 않는 프로퍼티 키 : 반드시 따옴표 사용

var person ={
 firstName: 'Ung-mo', //식별자 네이밍 규칙을 준수하는 프로퍼티 키
 'last-name': 'Lee' //식별자 네이밍 규칙을 준수하지 않는 프로퍼티 키
}

프로퍼티 키로 사용한 firstName은 식별자 네이밍 규칙를 준수하고 있다. 따라서 따옴표 생략 가능.

last-name은 -라는 특수문자가 포함되어 있다.

(**식별자 네이밍 규칙 : 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있다. 즉 특수문자는 포함시킬수 없다.)

 따라서 따옴표를 생략 불가능.

 

2) 프로퍼티 키를 동적으로 생성 가능

문자열 또는 문자열로 평가할 수 있는 표현식을 사용해 프로퍼티 키를 동적으로 생성 가능하다.

이 경우, 프로퍼티 키로 사용할 표현식을 대괄호([])로 묶어야 한다.

var obj = {};
var key = 'hello';
obj[key] = 'world'; //key가 아닌 'key' 이렇게 따옴표를 쓰면 'key'글자 그대로 키가 된다. ex: {key: "world"}
console.log(obj); // {hello: "world"}

 

3) 빈 문자열을 프로퍼티 키로 사용 가능.(하지만 권장 x)

var foo = {
  '': ''
};
console.log(foo); //{"": ""}

 

4) 프로퍼티 키에 문자열, 심벌값 외의 값을 사용하면 문자열로 변환

예를 들면, 프로퍼티 키로 숫자 리터럴을 사용하면 따옴표는 붙지 않지만 내부적으로는 '문자열'로 변환된다.

var foo = {
 0: 1,
 1: 2,
 2: 3
};

console.log(foo); // {0: 1, 1: 2, 2: 3} 프로퍼티 키인 0,1,2가 문자열로 변환됨.

 

5) 예약어를 프로퍼티 키로 사용 가능. (하지만 권장 x)

(** 예약어란? 프로그래밍 언어에서 사용되고 있거나 사용될 예정인 단어)

자바스크립트의 예약어 ex: await, break, case, catch, var, function, if...

var foo = {
 var: '', //var:예약어
 function: '' //function:예약어
};

console.log(foo); // {var: '',function: ''} 가능은 하다. 하지만 권장 x.

 

6) 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다.

(에러 발생하지 않음!!!주의!!)

var foo = {
 name: 'Lee', 
 name: 'Kim' //프로퍼티 키 중복선언! 나중 것이 전에 것을 덮어버린다.
};

console.log(foo); // {name: "Kim"}

 

- 프로퍼티 값

: 자바스크립트에서 사용할 수 있는 모든 값. 

 

 

 

 

10.4 메서드

프로퍼티 값이 함수일 경우, 일반함수와 구분하기 위해 메서드(method)라고 부른다.

즉, 객체에 묶여있는 함수를 의미.

var circle = {
 radius: 5, //프로퍼티
 getDiameter: function (){ //메서드
  return 2 * this.radius; //this는 자신이 속한 객체를 말한다. 여기서는 circle를 뜻한다.
 }
}

console.log(circle.getDiameter()); //10 (2*5)