[ 자바스크립트(JavaScript) ] 객체 메소드(Object Methods)에 대해 알아보자.

📍 객체 메소드(Object Methods)에 대해 알아보자.

기본적으로 원시 타입(Primitive)과 객체(Object)의 근본적인 차이점은 원시타입은 값 자체를 저장 또는 할당하고 객체는 저장되어있는 메모리의 주소를 가리킨다는 점이다. (참고: 코어 자바스크립트)

 

일반적으로 다음과 같은 코드는 객체의 주소값이 복사된다. 같은 주소를 가리키고 있기 때문에 user의 프로퍼티 값을 바뀌면 자연스럽게 copyUser의 값도 바뀌게 된다.(맨 처음에 언급했던 객체는 같은 주소 값을 가리키고 있는 것을 생각하자.)

const user = {
    name: "안영우",
    age: 27,
} 

const copyUser = user;
user["name"] = "안영준"
user["age"] = 14

console.log(copyUser);  // { name: '안영준', age: 14 }

 

이전에 var, let, const 변수의 차이점을 공부하면서 떠오른 의문점은 const 변수로 선언된 객체는 선언 + 초기화 + 할당 을 동시에 하기 때문에 변수 선언 이후 프로퍼티가 바뀌면 오류가 나야 하는 것 아닌가??라고 할 수도 있지만, const 변수는 user의 값을 고정하지만 그 내용은 고정하지 않는다. (참고: 코어 자바스크립트)

---

1️⃣ Object.assign()

결론적으로 참조값을 복사하지 않고 객체 자체를 복사하고 싶다면 Object.assign() 함수를 사용하면 되고 다음과 같이 사용할 수 있다.  const copyUser = Object.assign({}, user) 여기서 첫번째 매개변수인 {} 는 초기값을 뜻하고 두 번째 매개변수는 첫 번째 매개변수(초기값 {})와 합친다는 뜻이다. 다음 코드에서 assign을 사용하여 객체를 복사한 변수는 원래의 값을 변경해도 프로퍼티의 값이 변경되지 않는 모습을 볼 수 있다.

const user = {
    name: "안영우",
    age: 27,
} 

const copyUser = Object.assign({}, user);
user["name"] = "안영준"
user["age"] = 14

console.log(copyUser);  // { name: '안영우', age: 27 }

 

위에서 언급한 const copyUser = Object.assign({}, user)코드에서 첫 번째 파라미터인 {}는 초기값을 뜻한다고 했는데, 여기에 초기값을 {} 대신 값이 들어있는 객체 형태로 선언해서 합칠 수도 있다.

const userInfo = {
    age: 27
}
const addUserInfo = Object.assign({name: "안영우"}, userInfo);

console.log(addUserInfo);  // { name: '안영우', age: 27 }

 

만약, 초기객체의 key와 새로 덮으려는 key 값이 중복되면 새로 넘어온 값을 덮어 씌운다.

const userInfo = {
    name: "안영우"
}
const overLapNameInfo = Object.assign(userInfo, {name: "안영준"});

console.log(overLapNameInfo);  // { name: '안영준' }

 

또, 2개 이상의 객체도 합칠 수 있다. 이때 가장 좌측에 있는 초기 객체에 덮어 씌운다.

const mergeMultipleObjs = Object.assign({name: "안영우"}, {age: 27}, {gender: "man"});

console.log(mergeMultipleObjs);  // { name: '안영우', age: 27, gender: 'man' }

---

2️⃣ Object.keys()

객체의 key값을 모아 새로운 배열로 반환시키는 메소드다.

const user = {
    name: "안영우",
    age: 27,
    gender: "male"
} 
const userKey = Object.keys(user);
console.log(userKey);  // [ 'name', 'age', 'gender' ]

---

3️⃣ Object.values()

객체의 value를 모아 새로운 배열로 반환시키는 메소드다.

const user = {
    name: "안영우",
    age: 27,
    gender: "male"
} 
const userKey = Object.values(user);
console.log(userKey);  // [ '안영우', 27, 'male' ]

---

4️⃣ Object.entries()

key와 value를 모두 배열로 반환할 때 사용하는 메소드다.

const user = {
    name: "안영우",
    age: 27,
    gender: "male"
} 
const userKey = Object.values(user);
console.log(userKey);  // [ [ 'name', '안영우' ], [ 'age', 27 ], [ 'gender', 'male' ] ]

---

5️⃣ Object.fromEntries()

Object.entries() 와 반대로 key 와 value 가 쌍으로 묶여있는 배열을 객체로 바꿀 때 사용하는 메소드다

const changeObjFromArray = Object.fromEntries([ [ 'name', '안영우' ], [ 'age', 27 ], [ 'gender', 'male' ] ]);
console.log(changeObjFromArray)   // { name: '안영우', age: 27, gender: 'male' }

---

Reference

1. 자바스크립트 중급 강좌 #3 - 객체 메소드(Object methods), 계산된 프로퍼티(Computed property)
2. 모던 JavaScript 튜토리얼
3. Object.assign() - MDN