[JavaScrpt] ES6 - 계산된 프로퍼티, 객체 메소드

 

계산된 프로퍼티 (Computed property )란?

자바스크립트ES6에서는 객체의 속성명을 동적으로 계산하여 정의할 수 있는데,

이를 "계산된 프로퍼티(Computed Property)"라고 합니다.

계산된 프로퍼티를 활용하면 변수 값을 활용하여 객체의 속성명을 동적으로 지정할 수 있습니다.

 

 

아래는 간단한 예제 코드와 함께 설명합니다.

let n = "name";
let a = "age";

const user = {
    [n] : 'Mike', // 계산된 프로퍼티: 속성명은 n에 할당된 값인 "name"
    [a] : 30, // 계산된 프로퍼티: 속성명은 a에 할당된 값인 "age"
}

console.log(user)

 

계산된 프로퍼티의 활용

1. 동적인 속성명 정의: 변수나 표현식을 사용하여 객체의 속성명을 동적으로 정의할 수 있습니다.
2. 가독성 향상: 코드를 보는 독자가 속성명이 어떻게 결정되는지 명확하게 파악할 수 있습니다.
3. 유연한 코드 작성: 변수 값에 따라 동적으로 속성을 추가할 수 있어 코드의 유연성이 향상됩니다.

 

계산된 프로퍼티 예제 1

let n = "name";
let a = "age";

const user = {
    [n] : 'Mike', // n 변수의 값인 "name"을 속성명으로 사용
    [a] : 30, // a 변수의 값인 "age"를 속성명으로 사용
    [1 + 4] : 5 // 표현식의 결과값인 5를 속성명으로 사용
}

console.log(user)

1. [n]: 'Mike': n 변수의 값인 "name"을 속성명으로 사용하여 'Mike'를 값으로 갖는 속성을 추가했습니다.
2. [a]: 30: a 변수의 값인 "age"를 속성명으로 사용하여 30을 값으로 갖는 속성을 추가했습니다.
3. [1 + 4]: 5: 표현식 1 + 4의 결과값인 5를 속성명으로 사용하여 5를 값으로 갖는 속성을 추가했습니다.

 

결과 확인

{ '5': 5, name: 'Mike', age: 30 }

 

 

계산된 프로퍼티 예제 2

function makeObj(key, val){
    return {
        [key] : val
    }
}

const obj = makeObj("나이", 33);
// const obj = makeObj("성별", "male");
// const obj = makeObj("이름", "Kim");

console.log(obj);

 

위의 코드에서 makeObj 함수는 두 개의 매개변수 key와 val을 받아 객체를 생성하는 역할을 합니다.

1. 매개변수 전달: 함수를 호출할 때, "나이"가 key에 전달되고 33이 val에 전달됩니다. 이는 함수를 호출할 때 원하는 속성명과 값을 전달할 수 있게 합니다.
2. 계산된 프로퍼티 활용: 객체를 생성할 때 [key]: val 형태로 속성을 동적으로 결정합니다. 여기서 key는 매개변수로 전달된 값인 "나이"가 되고, val은 매개변수로 전달된 값인 33이 됩니다.
3. 객체 생성: 위의 동작으로 인해 생성된 객체 obj는 { '나이': 33 } 형태를 가지게 됩니다.

 

결과

{ '나이': 33 } //makeObj의 값에 따라 결과값이 콘솔에 출력

 

 

계산된 프로퍼티를 활용하면 객체를 더 동적으로 다룰 수 있어서 변수나 표현식을 활용한 다양한 상황에 대응할 수 있습니다. 이를 통해 코드의 가독성과 유지보수성을 높이며, 더 유연한 프로그래밍이 가능해집니다.

 

이러한 동적 객체 생성 패턴은 매개변수를 통해 객체의 속성명과 값을 유연하게 결정할 수 있어 다양한 상황에 적용할 수 있습니다.

 

객체 메소드란?

ECMAScript 2015(ES6)에서 도입된 객체 메소드들은 자바스크립트 코드를 더욱 효율적으로 작성할 수 있게 해주며, 다양한 기능을 제공합니다. ES6에서 자주 사용되는 객체 메소드들을 소개하고, 각각의 활용 예제를 제공하겠습니다.

 

1. Object.assign()

메소드는 한 개 이상의 소스 객체로부터 타겟 객체로 속성을 복사할 때 사용됩니다.

이는 객체의 병합에 활용되며, 타겟 객체에 속성이 이미 존재하는 경우 기존 값은 덮어쓰게 됩니다.

Object.assign({gender:'male'},user);

 

1) 예제

const user = {
    name: "mike",
    age: 30,
};

const user2 = Object.assign({},user);
user2.name = "Tom";

console.log(user)
console.log(user2)

 

2) 결과

{ name: 'mike', age: 30 }
{ name: 'Tom', age: 30 }

 

2. Object.keys()

Object.keys() 메소드는 주어진 객체의 속성들의 이름(키)들을 배열로 반환합니다.

이는 객체의 열거 가능한 속성을 순회하거나 검사할 때 사용됩니다.

 

Object.keys(user);

// 값 : ["name", "age", "gender"]

 

1) 예제

const user = {
    name: "mike",
    age: 30,
};

const result = Object.keys(user);

console.log(result)

 

2) 결과

[ 'name', 'age' ]

 

 

3. Object.values()

Object.values() 메소드는 주어진 객체의 속성들의 값들을 배열로 반환합니다. 이는 객체의 값들을 순회하거나 검사할 때 사용됩니다.

Object.values(user);

// 값 : ["Mike", 30, "male"]

 

1) 예제

const user = {
    name: "mike",
    age: 30,
};

const result = Object.values(user);

console.log(result)

 

2) 결과

[ 'mike', 30 ]

 

 

4. Object.entries()

Object.entries() 메소드는 주어진 객체의 속성들을 [키, 값]의 배열로 반환합니다. 이는 객체의 키와 값 쌍을 순회하거나 검사할 때 사용됩니다.

Object.entries(user);

// 값 :[ ["name","Mike"],["age",30],["gender", "male" ]

 

1) 예제

const user = {
    name: "mike",
    age: 30,
};

const result = Object.entries(user);

console.log(result)

 

2) 결과

[ [ 'name', 'mike' ], [ 'age', 30 ] ]

 

5. Object.fromEntries()

Object.fromEntries() 메소드는 [키, 값]의 배열로부터 객체를 생성합니다. 이는 Object.entries()와 상반된 작업을 수행하며, 배열을 객체로 변환할 때 사용됩니다.

const arr = [
 ["name","Mike"],
 ["age",30],
 ["gender","male"]
];

Object.fromEntries(arr);

// {name:'Mike', age:30, gender:'male'}

 

 

1) 예제

const arr = [
    ['mon', '월'], // 앞에가 key 뒤에가 값
    ['tue', '화']
]

const result = Object.fromEntries(arr)

console.log(result)

 

2) 결과

{ mon: '월', tue: '화' }

 

ES6에서 도입된 객체 메소드들은 코드를 더 간결하게 작성하고, 객체의 속성을 효율적으로 다룰 수 있게 해줍니다.

위의 예제 코드를 참고하여 다양한 상황에서 객체 메소드들을 적절히 활용해보세요.