본문 바로가기

Javascript & Jquery

[Javascript] 객체(Object) 생성, 프로퍼티(key, value) 접근하는 다양한 방법

먼저, 객체를 생성하는 방법은 아래와 같이 여러가지 방법이 있습니다. 

객체 생성하는 다양한 방법

//객체 리터럴을 이용해서 객체 생성과 동시에 프로퍼티 설정
var person = {
	name : '홍길동',
    age : 29,
    print : function(){
    	console.log('name : ' + name + ', age : ' + age);
    }
}

//객체 생성 후 프로퍼티 추가1
var person = {}; //또는 var person = new Object();
person.name = '홍길동';
person.age = 29;

//객체 생성 후 프로퍼티 추가2
person["name"] = '홍길동';
person["age"] = 29;

//객체의 Key값을 동적으로 생성하는 방법
var keyArr = ['pk11', 'pk22'];
var personArr = [{name:'홍길동',age:29}, {name:'손흥민', age:33}];
for(var i=0; i<keyArr.length; i++){
  var key = keyArr[i];
  person[key] = personArr[i];
}


//함수를 이용해서 객체 생성(거의 잘 사용하지 않는 방법)
function Person(name, age){
	this.name = name;
    this.age = age;
}
var person = new Person('홍길동', 29);

 

그런데 동적으로 객체의 key와 value를 설정해야 한다면 어떻게 해야 할까요? 

아래와 같은 jsonObj 객체가 있다고 할 때 해당 객체의 프로퍼티(key, value)를 다양하게 핸들링 하는 방법을 알아보겠습니다.

var jsonObj  = {
 pk11 : {name : '홍길동', age : 29},
 pk22 : {name : '손흥민', age : 34},
 pk33 : {name : '배수도', age : 33}
}


1. 내가 원하는 value값에 바로 접근하기 위해 Key값을 변수로 사용하는 방법

var pk = 'pk11';  
var personObj = jsonObj[pk];  // '객체명[변수]'형태로 사용하면 됩니다. 
console.log(personObj.name + ", " + personObj.age); 
//결과 : 홍길동, 29 

 

2. 객체를 loop로 돌면서 값을 핸들링 해야하는 경우

for(var key in jsonObj){
  var personObj = jsonObj[key]; 
  console.log(key + ", " + personObj.name + ", " + personObj.age);  
  //결과 : 
  //pk11, 홍길동, 29 
  //pk22, 손흥민, 34
  //pk33, 배수도, 33
}

 

3. 객체에 저장된 값(프로퍼티)의 length(갯수)를 알아내는 방법

var objKeyArr = Object.keys(jsonObj);   //객체의 key값들을 배열로 리턴
console.log('결과 개수 : ' + objKeyArr.length);

 

 

어떤 경우에 사용했나?

Node.js에서 질문목록을 json 형태로 리턴한 후 사용자가 특정 질문을 클릭했을 때 해당 질문정보를 json객체에서 가져와서 사용자에게 보여주는 로직에 사용했습니다. (질문 클릭시 매번 DB에서 데이터를 가져올 필요가 없는 상황)

 

물론 질문목록을 [{질문}, {질문}...] 형태의 배열로 받은 후 for 문을 돌면서 특정 key값에 해당하는 {질문} 객체를 찾아도 되지만 좀 더 나은 로직이 없나 찾다보니 동적으로 key값을 설정하고 가져오는 방법을 알아보게 되었어요. ㅎㅎ