객체는 프로퍼니의 집합이며, 프로퍼티는 키와 값으로 구성된다.
프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌값
프로퍼티 값 : 자바스크립트에서 사용할 수 있는 모든 값var person = { //프로퍼티 키는 name, 프로퍼티 값은 'lee' name : 'lee', //프로퍼티 키는 age, 프포퍼티 값은 '20' gae : 20 };
- 프로퍼티는 쉼표(,)로 구분한다.
프로퍼티 값에 접근 할 수 있는 이름으로 식별자 역활을 한다.
심벌값과 문자열을 사용하지만 일반적으로 문자열을 사용한다.
네이밍 규칙을 준수하지 않으면 번거롭기 때문에 가급적 식별자 네이밍 규칙을 준수하는 프로퍼티 키를 사용하는 것을 권장한다.
var person = { firstname:'Ung-mo', //식별자 네이밍 규칙을 준순한 프로퍼티 키 -> 따옴표 생략!!! 'last-name' : 'lee' //식별자 네이밍 규칙을 준수하지 않은 프로퍼티 키 -> 따옴표 생략 불가!!! //(-)는 네이밍 규칙에 어긋난다. }; console.log(person);
- 프로퍼티 키로 사용할 표현식을 대괄호([...])로 묶어야 한다.
var obj ={}; var key = 'hello'; //Es5 프로퍼티 키 동적 생성 obj[key] = 'world'; //변수 key의 값인 hello가 프로퍼티 키가 되고 'world'가 그 값으로 들어가게 된다. //ES6 : 계산된 프로퍼티 이름 //var obj = {[key]: 'world'}; console.log(obj); //{hello:'wolrd'}
var foo ={ '' : '' }; console.log(foo); //{'':''}
var foo = { 0 :1, 1: 2, 2:3 }; console.log(foo); //{0:1,1:2,2:3} // 이 경우에는 프로퍼티 키가 숫자타입이지만, 암묵적 타입 변환으로 문자열이 되었다.
var foo = { var : ' ', function : ' ' }; console.log(foo); //{var : '', function : ''}
var foo={ name: 'Lee', name: 'Kim' }; console.log(foo); //{name : 'Kim'} //lee가 있었지만 나중에 선언된 kim으로 덮어 씌어진 경우이다.
함수는 값으로 취급할 수 있다.
즉 함수가 객체에 묶여 있는 것을 메서드라고 한다.
- 일반 함수와 구분하기 위해 메서드라고 불린다.
var circle = { radius : 5, //원의 지름 getDiameter : function(){ //메서드 return 2 * this.radius; //this는 circle을 가리킨다. } }; console.log(circle.getKIameter()); //10
- 마침표 표기법(dot notation) : 마침표 프로퍼티 접근 연산자(.)이용
- 대괄호 표기법(bracket notaion) : 대괄호 프로퍼티 접근 연산자([ ])사용
var person = { name : 'lee' }; //마침표 표기법에 의한 프로퍼티 접근 console.log(persion.name); //lee //대괄호 표기법에 의한 프로퍼티 접근 console.log(persion['name']); //lee
※ 프로퍼티 키 - 식별자 네이빙을 규칙을 준수하는 경우 : 마침표 표기법과 대괄호 표기법 모두 사용가능
※ 프로퍼티 키 - 식별자 네이밍 규칙을 준수하지 않은 이름 : 대괄호 표기법만 사용!
단, 프로퍼티 키가 숫자로 이뤄진 문자열인 경우에는 따옴표 생략 가능var person = { 'last-name' : 'lee', 1:10 }; person.'last-name'; //SyntaxError : Unexpected string person.last-name; //브라우저 환경 : NaN // Node.js환경 : ReferenceError : name is not defined person[last-name]; //ReffernceErro : last is not defined person['last-name']; //lee
//프로퍼티 키가 숫자로 이루어진 문자열인 경우 따옴표를 생략 할 수 있다. person.1; //SyntaxError : Unexpected number; person.'1'; //SyntaxErro : Unexpected string person[1]; //10 : person[1] -> person['1'] person['1']; //10
- 대괄호 접근법은 대괄호 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이여야 한다.
var person = { name : 'Lee' }; console.log(person[name]); //ReferenceError : name is not defined 즉, 식별자 name을 평가하기 위해 선언된 name을 찾지 못했다는 뜻이다.
- 객체에 존재하지 않은 프로퍼티에 접근하면 undefined를 반환한다.
이때 ReferenceError가 발생하지 않는데에 주의하자.var person = { name : 'Lee' }; console.log(person.age); //undefined
이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신된다.
var person - { name : 'lee' }; //person 객체에 name프로퍼티가 존재하므로 name 프로퍼티의 값이 갱신된다. person.name = 'Kim'; console.log(person); //{name : 'kim'}
존재하지 않은 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 프로퍼티 값이 할당된다.
var person = { name : 'lee' }; //person 객체에는 age 프로퍼티가 존재하지 않는다. //따라서 person 객체에 age 프로퍼티가 동적으로 생성되고 값이 할당된다. person.age = 20; console.log(person); //{name: 'lee', age: 20}
delete 연산자
는 객체의 프로퍼티를 삭제한다.
만약 존재하지 않은 프로퍼티를 삭제하면 아무런 에러없이 무시된다.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'}
프로퍼티 값은 변수에 할당된 값, 즉 식별자 표현식일 수도 있다.
//ES5 var x =1, y =2; var obj = { x : x, y : y }; console.log(obj); //{x: 1, y:2}
ES6에서는 프로퍼티 값으로 변수를 사용하는 경우, 변수 이름과 프로퍼티키가 동일한 이름일 때 프로퍼티 키를 생략할 수 있다. 이때 프로퍼티 키는 변수 이름으로 자동 생성된다.
//ES6 let x= 1, y=2; //프로퍼티 축약표현 const obj{x,y}; console.log(obj); //{x: 1, y:2}
문자열 또는 문자열로 타입 변환할 수 있느느 값으로 평가되는 표현식을 사용해 프로퍼티 키를 동적으로 생성 할 수 있는데
프로퍼티 키로 사용할 표현식을 대괄호([ ])로 묶어야 하는 것
- ES5에서는 객체 리터럴 외부에서 대괄호표기법을 이용해 생성하였다면 ES6에서는 객체 내부에서도 계산된 프로퍼티 이름으로 프로퍼티 키를 생성 할 수 있다.
//ES5 var prefix = 'prop'; var i = 0; var obj ={}; //계산된 프로퍼티 이름으로 프로퍼티 키 동적 생성 obj[prefix + '-' + ++i] = i; obj[prefix + '-' + ++i] = i; obj[prefix + '-' + ++i] = i; console.log(obj); //{prop-1: 1, prop-2:2, prop-3:3}
//ES6 const prefix = 'prop'; let i = 0; //객체 리터럴 내부에서 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성 const obj = { [ `${prefix}=${++i}`]: i, [ `${prefix}=${++i}`]: i, [ `${prefix}=${++i}`]: i }; console.log(obj); //{prop-1: 1, prop-2: 2, prop-3:3}
ES5에서 메서드를 정의하려면 프로퍼티 값으로 함수를 할당한다.
var obj = { name : 'lee' sayHi : function(){ console.log('Hi!'+this.name); } }; obj.sayHi(); //Hi! lee
ES6에서는 메서드를 정의할때 function키워드를 생략한 축약 표현을 사용 할 수 있다.
const obj = { name : 'lee', //메서드 축약 표현 sayHi(){ console.log('Hi!'+ this.name); } }; obj.sayhi(): //Hi! lee
- ES6의 메서드 축약 표현으로 정의한 메서드는 프로퍼티에 할당한 함수와 다르게 동작한다.