객체 메서드(Object methods), 계산된 프로퍼티(Computed property)

BaeSeong-min·2024년 12월 15일

JS(ES6)

ES6 문법공부

목록 보기

3/22

📙ES6 문법공부

📌계산된 프로퍼티(Computed property)

✨계산된 포로퍼티란?

대괄호를 사용해서 객체의 키를 동적으로 생성하거나 변수의 값을 키로 사용할 때 쓰는 문법이다.

✏️동적 키 생성이란?

객체를 정의할 때, 변수에 저장된 값이나 표현식의 결과를 사용해서 키를 정하는 것을 말한다.

✏️객체의 키를 바꾸려면?

이미 생성된 객체의 키는 기본적으로 바뀌지 않는다. 따라서 객체의 키를 바꾸려면 새로운 키를 추가하고, 기존의 키를 삭제해야 한다. 아래 코드에서 keyName이라는 변수의 값이 객체의 키로 동적으로 한번 생성된다. 그 후, keyName의 값을 변경해도 이미 생성된 user 객체의 키는 바뀌지 않는다.

객체의 키를 바꾸려면 객체를 명시적으로 수정해야한다. 즉, 이미 만들어진 객체의 키는 자동적으로 바뀌지 않는다는 것이다. 새로운 키를 가진 프로퍼티를 객체에 추가하고, 기존의 키를 삭제함으로써 객체의 키를 바꿀 수 있다. delete라는 키워드를 사용해 객체의 프로퍼티를 삭제할 수 있다.

✨계산된 포로퍼티를 객체에 정의하기

대괄호를 사용한 [a]는 계산된 프로퍼티로, 변수 a의 값이 키로 들어간다.

키를 만들 때 단순히 변수만 아니라, 대괄호 안에 식 자체를 넣는 것도 가능하다.

✨계산된 포로퍼티에 접근하기

계산된 프로퍼티에 접근하려면 대괄호 표기법([ ])을 사용해야 한다.

✨계산된 포로퍼티 사용되는 경우

어떤 것이 객체의 키가 될지 모르는 객체를 만들 때, 계산된 프로퍼티를 유용하게 사용할 수 있다.

📌객체에서 사용하는 메서드

✏️Object 객체란?

Object 객체는 자바스크립트 내장 객체이다. 따라서, 자바스크립트 실행시 기본적으로 제공해주며, 따라서 별도로 선언하지 않고도 바로 사용할 수 있다. 객체를 다룰 때 자주 사용되는 메서드와 속성을 제공한다.

✨Object.assign() 메서드

💡Object.assign() 메서드란?

Object.assign() 메서드는 객체를 병합하고, 병합된 결과를 반환해준다.

💡Object.assign() 메서드 사용하는 방법

Object.assign() 메서드의 첫 번째 인수로 전달된 타겟 객체(target)에 두 번째 인수부터 넘겨준 객체들의 프로퍼티를 병합한다. 최종적으로 병합된 타겟 객체를 반환한다.

빈 객체에 user라는 객체를 병합하여 newUser라는 새로운 객체를 만들 수 있다. 이때, user와 newUser는 서로 다른 객체의 메모리 주소를 참조하고 있다. 그리고, Object.assign() 메서드의 첫 번째 인자로 넘겨준 초기값은 빈 객체 뿐만 아니라, 프로퍼티를 추가한 객체를 두어도 된다.

💡객체 복제의 잘못된 생각

user 변수에 객체 자체가 저장된 것이 아니다. 객체가 저장돼 있는 메모리 주소가 저장되어 있다. 다시말해, user 변수에는 참조값이 저장되어 있다는 것이다. 따라서 cloneUser 변수에는 user 객체의 참조값이 저장된다.

user와 cloneUser는 같은 객체를 참조하고 있기 때문에, cloneUser가 참조하는 객체의 name 프로퍼티를 변경하면 user 객체가 참조하는 객체의 name 프로퍼티의 값도 바뀐다.

💡병합을 할 때, 키가 같다면?

덮어쓰게 된다. 객체 가장 마지막에 병합된 객체의 프로퍼티로 덮어쓰여진다.

💡두 개 이상의 객체도 병합 가능

타겟 객체(user)에 순차적으로 info1의 프로퍼티가 병합이 되고, info2의 프로퍼티가 병합된다. 따라서, user 객체 자체가 변경되고 최종적으로 해당 객체가 반환된다. 원본 객체를 유지하고 싶다면 빈 객체 혹은 기본 프로퍼티를 가진 객체를 초기값으로 사용하면 된다.