[Javascript] 객체를 다루는 Javascript 메소드

 

객체를 다루는 Javascript 메소드
- Object.assign(), Object.values(), Object.entries(), Object.freeze(), Object.keys(),

프론트엔드 개발을 하다보면 서버에서 받은 정보를 바탕으로 객체를 가공, 변경, 복제 등등의 작업들을 해야할 때가 많이 있는데요. 그럴 때 자바스크립트 내장 객체 메소드들을 사용하곤 합니다. 자바스크립는 객체 기반의 script 언어인데요, 자바스크립트를 이루고 있는 대부분의 것이 객체입니다. 자바스크립트의 함수도 일급 객체입니다. 객체는 Key와 Value로 구성된 프로퍼티들이 모인 것인데요. 자주 사용하는 Object 메소드들이 무엇이 있는지 알아 보겠습니다. 

1. Object.assign() 메소드

Object.assign() 메소드는 객체를 병합할때 사용하는 메소드인데요. 대상이 될 객체에 다른 하나 이상의 객체를 병합 할 때 사용합니다. 

const obj01 = { name: "jamie" };
const obj02 = { age: 12 };
const obj03 = { color: "blue" };

// 가장 첫번째 인자가 대상이 될 객체.
// 여기서는 빈객체가 그 대상이 될 객체이다.
const newObj = Object.assign({}, obj01, obj02, obj03);
console.log(newObj);

//결과
//빈 객체에 여러 객체들이 병합되었다.
// { name: 'jamie', age: 12, color: 'blue' }

 

이렇게 빈 객체에 위에 선언된 3가지 객체들이 병합된 객체가 만들어 졌습니다. 그런데 만약 이런 객체들을 Object.assign() 하면 어떻게 될까요?

 

const obj01 = { name: "jamie" };
const obj02 = { name: "tim" };
const obj03 = { name: "luke" };

// 가장 첫번째 인자가 대상이 될 객체.
const newObj = Object.assign({}, obj01, obj02, obj03);
console.log(newObj);

//결과
//{ name: "luke" };

만약 위와 같이 객체의 프로퍼티가 같을 경우 마지막 인수의 value값으로 덮어씌워집니다.

 

2. Object.values()

Object.values() 메소드는 열거할 수 있는 객체를 인자로 받아서, 그 객체를 순회하면서 객체의 value값만 추려서 배열로 return하는 메소드입니다. 어떠한 객체의 value값만 필요할 때가 있는데 그럴 때 사용하기 유용합니다. 예시를 보자면,

// 성적정보를 담은 객체
const score = {
 math: 89,
 english: 97,
 history: 77,
 korean: 76
};

// 객체의 value만 추출한 배열 return
Object.values(score);
// [ 89, 97, 77, 76 ]

 

이렇게 value값만 요소로 들어가있는 배열이 반환됩니다.

 

3. Object.entries()

Object.entries() 역시 객체를 순회하여 새로운 배열을 반환하는 메소드인데요. Object.entries()는 [key, value] 쌍의 배열이 return 됩니다. for..in과 같이 순회하기 때문에 순서를 보장할 수는 없습니다. 이것은 Object.value()도 마찬가지예요. 예시로 Object.assign의 결과로 나온 객체를 한번 이용해보겠습니다. 

console.log(newObj);
//newObj는 { name: 'jamie', age: 12, color: 'blue' }

const entObj = Object.entries(newObj);
console.log(entObj);

//결과
//[ [ 'name', 'jamie' ], [ 'age', 12 ], [ 'color', 'blue' ] ]

이렇게 객체의 key와 value쌍이 담긴 배열의 배열이 return 되었습니다.

 

4. Object.freeze()

개발할 때 불변성을 지키는 것은 매우 중요합니다. 변경된 객체나 배열이 애플리케이션 전체에 어떤 영향을 미칠 지 알 수 없기 때문입니다. 그렇기 때문에 ES6 이후에 var사용보다 const사용을 강력 권장하는 이유이기도 한데요. Object.freeze()메소드는 freeze라는 이름에서도 유추할 수 있듯이 객체를 변경하지 못하게 만드는 메소드 입니다. 

const freezeObj = {
   name: "kay"
};

Object.freeze(freezeObj);

freezeObj.name = "jay";

// 객체가 불변 상태이기 때문에 변경될 수 없다.
console.log(freezeObj.name); // kay

 

5. Object.keys()

Object.keys()는 이름에서도 느껴지듯, 역시 열거가능한 객체를 순회하면서 그 객체안에 들어있는 프로퍼티의 key값만 추려내어 배열로 반환하는 메소드입니다. 개발할 때 종종 어떤 객체는 엄청나게 많은 정보를 담고 있기도 한데요. 그때 어떤 프로퍼티들이 들어있나 확인할 때 굉장히 유용한 메소드입니다. 

// 개인정보가 담긴 객체
const person = {
   name: "Kay",
   age: 21,
   is_student: false,
   address: "Newyork",
   mobile: "01025253737",
   email: "kay@gmail.com"
}

// person객체
 const keysObj = Object.keys(person);
 
 //결과
 console.log(keysObj);
 //[ 'name', 'age', 'is_student', 'address', 'mobile', 'email' ]

결과는 key값들이 담긴 배열이 return 됩니다. 

개발하면서 객체와 배열을 가공하거나, 서버에서 어떤 정보가 넘어오는 지 확인해야할 때가 많은데요. 일일이 콘솔에 모든 정보를 다 그려서 확인하는 것보다 이렇게 메소드들을 이용하면 훨씬 편리하겠죠? 이렇게 유용한 Object메소드들을 잘 알아두면 쉽고 빠른 개발을 할 수 있습니다. 끗!