[JAVASCRIPT-모던자바스크립트] 객체 기본에 대해서 알아보자2

변수 key는 런타임에 평가가 되기 때문에 사용자 입력값 변경 등에 따라 값이 변경될 수 있는데 점 표기법은 이러한 방식이 불가능하다고 볼 수 있다.

let user = {
	name : "John",
    age : 30
};

let key = "name";
console.log(user.key); // undefined

 

계산된 프로퍼티 

객체를 만들 경우 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있는 경우에는 이를 계산된 프로퍼티(computed property) 라고 부른다.

let fruit = prompt('어떤 과일을 구매하시겠습니까?','apple');

let bag {
	[fruit]: 5, // 변수 fruit에서 프로퍼티 이름을 동적으로 받는다.
}

console.log(bag.apple); // fruit에 apple이 할당되면 5가 출력됨

[fruit]는 프로퍼티 이름을 변수 fruit에서 가져오겠다는 것을 말한다. 사용자가 프롬프트 대화상자에다가 apple을 입력했을 경우 bag에는 {apple: 5}가 할당되어있을 것이다. 그래서 이 예시는 아래와 같이 동작한다.

let fruit = prompt('어떤 과일을 구매하시겠습니까?', 'apple');
let bag = {};

// 변수 fruit를 사용해서 프로퍼티 이름을 만들었다.
bag[fruit] = 5;

복잡한 표현식을 사용할 경우 다음과 같이 사용한다.

let fruit = 'apple';
let bag = {
	[fruit + 'Computers']: 5 // bag.appleComputers = 5
}

대괄호 표기법의 경우 프로퍼티 이름과 값의 제약을 없애주기 때문에 점 표기법보다는 훨씬 강력하다고 볼 수 있다. 그렇지만 작성하기 번거롭다는 단점이 있다. 이런 이유들 때문에 프로퍼티 이름이 확정된 상황이며 단순한 이름이라고 한다면 처음에는 점 표기법을 사용했다고 하지만 복잡한 상황이 오게된다고 한다면 대괄호 표기법으로 바뀌는 경우가 많다.

단축 프로퍼티

실무에서는 프로퍼티 값을 기존 변수에서 받아서 사용하는 경우가 있다.

function makeUser(name,age) {
	return {
    	name : name,
        age : age,
        // ... 등등
    };
}

let user = makeUser("John", 30);
console.log(user.name); // John

 

예시를 보면 프로퍼티들은 이름과 값이 변수의 이름과 동일한것을 확인할 수 있다. 이렇게 변수를 사용해서 프로퍼티를 만드는 경우는 아주 흔하다고 볼 수 있는데 프로퍼티 값 단축 구문을 사용하면 코드를 짧게 줄일 수 있다.

function makeUser(name, age) {
	return {
    	name, // name : name과 같음
        age, // age: age와 같음
        ...
    }
}

// name : name대신 name만 적어도 프로퍼티를 설정할 수 있다.

한 객체에서 일반 프로퍼티와 단축 프로퍼티를 같이 사용하는 것이 가능하다.

let user = {
	name, // name : name과 같음
    age: 30
};

프로퍼티 이름의 제약사항

변수 이름(키)에는 for/let/return같은 예약어를 사용할 수 없다.
그렇지만 객체 프로퍼티에는 이러한 제약이 없다.

// 예약어를 키로 사용할 수 있다.
let obj = {
	for : 1,
    let : 2,
    return: 3
};

console.log( obj.for+ obj.let+obj.return ); // 6

이와 같이 프로퍼티 이름에는 특별한 제약이 없다 어떤 문자형이나 심볼형 값도 프로퍼티 키가 될 수 있다. 문자형이나 심볼형에 속하지 않은 값은 문자열로 자동 형 변환된다.

let obj = {
	0: "test" // "0" : "test"와 동일함
}

// 숫자 0은 문자열 "0"으로 변환되기 때문에 두 얼럿 창은 같은 프로퍼티에 접근한다.
console.log(obj["0"]); 
console.log(obj[0]);

// 둘 다 동일한 프로퍼티이다.

이와 같이 객체 프로퍼티 키에 쓸 수 있는 문자열에는 제약이 없지만 역사적인 이유들 때문에 특별 대우를 받는 이름이 바로 __proto__이다.

let obj = {};
obj.__proto__ = 5;
console.log(obj.__proto__); 
// [object Object]- 숫자를 할당했지만 값은 객체가 되었다.

in 연산자로 프로퍼티 존재 여부 확인하기

자바스크립트 객체의 중요한 특징 중 하나라고 한다면 다른 언어와는 달리 존재하지 않은 프로퍼티에 접근하려고 해도 에러가 발생하지 않으며 undefined를 반환한다는 것이다. 이런 특징들을 응용하게 되면 프로퍼티 전재 여부를 쉽게 확인할 수 있다.

let user = {};

console.log( user.noSuchProperty === undefined ); // true는 프로퍼티가 존재하지 않음을 의미한다.

이렇게 undefined와 같이 비교하는 것 이외에도 연산자 in을 사용하면 프로퍼티 존재 여부를 확인할 수 있다.

※ 모던자바스크립트 - 객체편 참조