[JavaScript] 객체

상수객체

const로 선언된 객체는 수정 될 수 있다.

const user = {
    name: 'John'
};
user.name = 'Pete';
console.log(user.name); // Pete

const는 한 번이라도 값을 할당한 변수가 변경되는 걸 막는다.
변수 user는 객체 참조 값을 저장하고 있는데, const는 이 값이 변경되는걸 막는 것이지, 객체의 내용 (프로퍼티)을 변경하는 건 막지않는다.

계산된 프로퍼티

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

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

let bag = {
    // 변수 fruit에서 프로퍼티 이름을 동적으로 받아온다.
    [fruit]: 5
};
alert(bag.apple);

[fruit]는 프로퍼티 이름을 변수 fruit에서 가져오겠다는 것을 의미한다.
사용자가 프롬프트 대화상자에 apple를 입력했다면 bag엔 {apple: 5}가 할당됨을 알 수 있다.

아래 예시는 위 예시와 동일하게 동작한다.

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

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

아래 예시처럼 대괄호 안에 복잡한 표현식이 올 수 있다.

let fruit = 'apple';
let bag = {
    [fruit + 'Computers']: 5,
}
console.log(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) {
    name,
    age,
}

한 객체에서 일반 프로퍼티와 단축프로퍼티를 함께 사용하는 것도 가능.

let user = {
    name,
    age: 30,
}

프로퍼티의 이름제약

변수 이름(키)엔 for, let, return 같은 예약어를 사용하면 안되나 객체프로퍼티엔 제약이 없다. 하지만 __proto__는 사용하면 안된다.

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

자바스크립트 객체의 중요한 특징은 존재하지 않는 프로퍼티에 접근하려해도 에러가 발생하지 않고 undefined를 반환한다.
이러한 특징을 응용하면 프로퍼티 존재 여보를 쉽게 확인할 수 있다.

"key" in object

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

console.log('age' in user); // true
console.log('name' in user); // true

프로퍼티 존재 여부를 알아내는 (=== undefined)보다 in이 프로퍼티 존재 여부를 확실히 알 수 있다.

let obj = {
    test: undefined
};
console.log(obj.test); // undefined
console.log('test' in obj); // true

obj.test 는 실제 존재하는 프로퍼티이다. 따라서 in연산자는 정상적으로 true를 반환한다.
변수는 정의되어 있으나 값이 할당하지 않은 경우 프로퍼티 값이 undefined인 경우는 흔치 않다. 값을 '알 수 없거나(unknown)' 값이 '비어 있다는(empty)' 것을 나타날 때는 null을 쓴다.

for..in 반복문

for..in반복문을 사용하면 객체의 모든 키 순회 가능.

for (key in object) { // 각 프로퍼티 키(key)를 이용하여 본문(body)을 실행. }

let user = {
    name: 'John',
    age: 30,
    isAdmin: true
};

for(let key in user) {
    console.log(key);
    console.log(user[key]);
}

객체정렬방식

객체는 정수 프로퍼티(integer property)는 자동으로 정렬되고, 그 외의 프로퍼티는 객체에 추가한 순서대로 정렬된다.

let codes = {
    '49': '독일',
    '41': '스위스',
    '44': '영국',
    '1': '미국'
};
for(let code in codes) {
    console.log(code); // 1, 41, 44, 49
}

나라 번호(키)가 정수여서 1, 41, 44, 49순으로 프로퍼티가 자동 정렬되었기 때문이다.

let user = {
    name: 'John',
    sruname: 'Smith'
}
user.age = 25;

for(let prop in user) {
    console.log(prop); // name, surname, age
}

---

Reference

객체