[Javascript] Object 객체 활용하기

자바스크립트는 프론트단에서 기능을 구현할 때 사용하는 언어이며, 사용하기 쉬운 이미지가 강하다.

 

처음에 자바스크립트의 객체화, 모듈화, 상속, 표준 내장 객체, 클로저 등을 제대로 배우지 않는다면 

페이지마다 동일한 함수가 난무할 수 있고 리팩토링을 할 때도 엄청난 스트레스로 다가온다.

 

javscript에서는 Window 객체 말고도 표준 내장 객체가 존재하며 아래 링크를 참고하면 된다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects

 

표준 내장 객체 중 Object 객체는 모든 객체들의 부모 객체이다.

 

크롬 개발자도구(F12)에서 객체를 선언 후 _proto_(프로토타입 링크)를 타고 올라가면 Object 객체가 나오는 것을 확인할 수 있다.

 

자주 사용하는 메소드를 설명하면 아래와 같다.

- Object.keys()

- Object.values()

 

두 개의 메소드는 객체를 다룰 때 매우 유용하다.

 

1. Object.keys(Object obj)

파라미터 : key 배열을 반환받으려는 객체

객체의 key set을 배열로 만들어서 반환하며 key 배열을 이용한 작업을 할 때 용이하다.

const OBJECT = {     
	"name" : "[DEVSONG]"
    , "job" : "developer"
    , "language" : "js" 
};
const KEY_ARRAY = Object.keys(OBJECT); 

// forEach문으로 KEY를 확인 
KEY_ARRAY.forEach(function(K, I){     
	console.log(K); 
}); 

// 람다식으로 KEY를 확인 
KEY_ARRAY.map(K => console.log(K));  

 

2. Object.values(Object obj)

파라미터 : value 배열을 반환받으려는 객체

객체의 value set을 배열로 만들어서 반환하며 value 배열을 이용한 작업을 할 때 용이하다.

const OBJECT = {     
	"name" : "[DEVSONG]"
    , "job" : "developer"
    , "language" : "js" 
};
const VALUE_ARRAY = Object.values(OBJECT);  

// forEach문으로 VALUE를 확인 
VALUE_ARRAY.forEach(function(E, I){ 	
	console.log(E); 
});  

// 람다식으로 VALUE를 확인 
VALUE_ARRAY.map(E => console.log(E)); 

 

단, 예제에서 사용된 람다식은 IE11에서는 지원하지 않는다.

https://stackoverflow.com/questions/40216015/arrow-function-not-working-in-ie-why