안녕하세요 이번 포스팅은 Javascript에서 사용되는 Object(객체)관련 메소드들을 소개합니다.
Obejct values()는 파라미터로 전달된 객체가 가지는 열거 가능한 속성의 모든 나열형 속성들을 나타내는 문자열 배열.
쉽게 설명하면 Object에 key값을 출력한다고 생각하시면 쉬울 것 같습니다.
let arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']
// array like object
let obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']
// array like object with random key ordering
let anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // ['2', '7', '100']
저희는 브라우저 호환성에 대해서도 생각을하며 개발을 진행해야합니다.
Object.kets()는 IE를 지원하지만 모든 버전을 지원하지 않습니다.
현재 IE9에 버전까지 지원해서 만약 IE6~ IE8 버전에서 구동하게되면 해당 구문이 에러를 발생시킵니다.
위와같은 경우 for in 문을 사용해서 key값을 반환해야합니다.
var arr = [];
for(var key in spaghetti) {
arr.push(key);
}
Obejct values()는 파라미터로 전달된 객체가 가지는 열거 가능한 속성의 값들로 구성된 배열을 반환합니다.
말로 설명하는 것보다 예시를 드는게 이해에 빠르겠죠?
let obj = { name: 'geonsang', nickname: 'Marcus' };
console.log(Object.values(obj)); // ['geonsang', 'Marcus']
// 유사 배열 (숫자를 속성으로 사용하는 객체)
let obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj)); // ['a', 'b', 'c']
// 유사 배열의 경의 속성으로 사용한 숫자의 크기 순으로 정렬되어 반환됩니다.
let an_obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(an_obj)); // ['b', 'c', 'a']
간단하게 Object.values()를 사용하는 방법을 알아봤습니다.
하지만 저희가 웹을 개발할 때 알고있어야하는 점은 브라우져 호환성입니다.
MDN을 참고하면 현재 IE는 지원을 하지않습니다.
그럼 어떻게 지원해줄 수 있을까요?
var obj = { name: 'geonsang', nickName: 'Marcus' };
var values = Object.keys(obj).map(value => {
return obj[value]
})
console.log(values)
위에 설명한 Object.keys로 key값을 뽑은 뒤 map함수를 이용하면 쉽게 할 수 있습니다.
Object.assign() 메서드는 열거할 수 있는 하나 이상의 출처 객체로부터 대상 객체로 속성을 복사할 때 사용합니다.
const obj = { a: 1 };
const copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }
이번 포스팅에서는 Object.keys, Object.values, Object.assign에 대해서 알아봤습니다.
오늘 소개한 메서드들은 제가 평소에 자주 사용하는 메서드들입니다.
오늘 소개드린 모든 정보는 MDN을 참고했습니다
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign