목차
JavaScript는 동적인 언어로서, 그 구조와 구현 방식이 다양하고 유연합니다. 이번 포스트에서는 JavaScript 객체의 ‘계산된 프로퍼티(Computed property)’와 ‘객체 메소드’에 대해 자세히 알아보겠습니다.
1. 계산된 프로퍼티 (Computed property)
객체를 생성할 때 객체 속성의 키를 동적으로 생성하거나 계산하고 싶을 때가 있습니다. 이럴 때 사용하는 것이 계산된 프로퍼티입니다. 이는 대괄호([]) 내에 표현식을 사용하여 객체의 속성 키를 동적으로 생성하는 방법입니다.
위 예제에서 user 객체의 age 속성은 변수 key에 의해 동적으로 생성되었습니다. key 변수의 값이 변하면 해당 값에 대응하는 속성 이름이 생성됩니다.
다음 예제에서는 표현식을 사용하여 속성 이름을 계산합니다.
2. 객체 메소드
JavaScript 객체에는 다양한 내장 메소드가 있습니다. 이들 메소드를 이용하면 객체를 효과적으로 다룰 수 있습니다.
2.1 Object.assign(): 객체 복제 및 병합
Object.assign() 메소드는 하나 이상의 소스 객체로부터 모든 열거 가능한 속성을 타겟 객체로 복사하는 데 사용됩니다. 소스 객체의 같은 키를 가진 속성은 타겟 객체의 속성을 덮어씁니다.
이 예제에서는 빈 객체를 첫 번째 인자로 주고, user 객체를 두 번째 인자로 주어 user 객체를 복제합니다. 이때 첫 번째 인자의 객체에 이미 존재하는 속성은 두 번째 인자의 객체 속성으로 덮어씌워집니다.
2.2 Object.keys(), Object.values(), Object.entries()
Object.keys() 메소드는 객체의 모든 열거 가능한 속성 키를 배열로 반환합니다. Object.values() 메소드는 객체의 모든 열거 가능한 속성 값들을 배열로 반환합니다. Object.entries() 메소드는 객체의 모든 열거 가능한 속성의 [키, 값] 쌍의 배열을 반환합니다.
const user = { name: 'Mike', age: 30, gender: 'm' };
console.log(Object.keys(user)); // ["name", "age", "gender"]
console.log(Object.values(user)); // ["Mike", 30, "m"]
console.log(Object.entries(user)); // [["name", "Mike"], ["age", 30], ["gender", "m"]]
2.3 Object.fromEntries()
Object.fromEntries() 메소드는 [키, 값] 쌍의 배열을 객체로 변환합니다.
위 예제에서는 [키, 값] 쌍의 배열을 Object.fromEntries() 메소드를 통해 객체로 변환했습니다.
이번 포스트에서는 JavaScript의 계산된 프로퍼티(Computed property)와 객체 메소드에 대해 알아보았습니다. 계산된 프로퍼티를 통해 동적으로 속성 키를 생성할 수 있고, 객체 메소드를 통해 객체를 효과적으로 다룰 수 있습니다. 이러한 기능들은 JavaScript에서 코드를 더욱 효율적이고 동적으로 작성하는 데 큰 도움이 됩니다.[공식문서]
다음 번에는 다른 JavaScript의 주요 기능에 대해 더 깊이 있게 살펴보도록 하겠습니다. 오늘도 좋은 하루 되세요! 블로그