JavaScript 단축 속성명 & 속성 계산명

📚 단축속성명이란? 

단축 속성명(Shorthand Property Names)은 ES6에서 도입된 JavaScript 객체를 더 간단하게 정의할 수 있는 문법

 

// 기존 방식
const name = "철수";
const age = 20;
const obj1 = {
    name: name,
    age: age
};

// 단축 속성명 사용
const obj2 = {
    name,
    age
};

위와 같이 단축해서 잘 사용은 하고 있었는데, 해당 기능의 명칭을 몰랐었다

"단축 속성명" 이라는 문법이라고 한다.

 

단축 속성명은 객체의 키(key)와 값(value)이 동일한 경우, 한 번만 작성하여 객체를 생성할 수 있게 해준다.

 

변수 사용 조건

단축 속성명은 변수가 미리 선언되어 있는 경우에만 사용 가능
문자열, 객체, 함수 등 자료형에 상관없이 적용할 수 있음

 

메서드 정의

// 기존 방식
const obj1 = {
    sayHello: function() {
        console.log('hello');
    }
};

// 단축 메서드명 사용
const obj2 = {
    sayHello() {
        console.log('hello');
    }
};

 

함수 매개변수로 활용

const name = "철수";
const age = 20;

function createUser(name, age) {
    return {
        name,
        age
    };
}

 

객체 메서드 정의

const calculator = {
    add(a, b) {
        return a + b;
    },
    subtract(a, b) {
        return a - b;
    }
}[6]

 

단축 속성명을 사용하면 코드가 더 간결해지고 가독성이 향상되는 효과가 있다.

 

---

📚 속성 계산명이란?

객체의 속성 이름을 동적으로 생성할 수 있게 해주는 문법

대괄호([]) 안에 표현식을 넣어 속성의 이름을 동적으로 정의할 수 있습니다.

 

const prefix = "user";
const obj = {
    [`${prefix}_name`]: "김철수",
    [`${prefix}_age`]: 25
};

 

동적 속성 생성

변수나 표현식을 사용하여 속성 이름을 생성할 수 있고, 런타임에 속성이름이 결정된다.

 

const obj = {
    [1 + 2]: "three",
    [`hello` + `world`]: "greeting"
};

위와 같이 다양한 표현식을 지원한다.

 

API 데이터 처리 활용 사례

const response = {
    [`user_${id}`]: {
        name: "홍길동",
        age: 30
    }
};

 

폼 요소 관리 활용 사례

const formData = {
    [`input_${fieldName}`]: value,
    [`validation_${fieldName}`]: isValid
};

 

속성 이름을 매번 계산해야 하므로 일반 속성보다 성능이 떨어질 수 있다.

계산된 속성명을 적절히 활용하면 더 유연하고 동적인 코드를 작성할 수 있으며, 특히 데이터 처리나 상태 관리에서 유용하게 사용된다.