[javascript] 객체 접근 - 객체 프로퍼티(property) 열거 & 조작

프로퍼티 열거 _ 객체 순회

배열 열거	프로퍼티 열거
배열 순회	객체 순회
순서 보장	순서 미보장
length, index 있음	length, index 없음
for, for-in, forEach, map, filter, reduce	object.keys, for-in, object.values, object.entries

 

 

1) Object.keys() _ 객체에서 key를 배열로 변환

 

var info = {
	age: 20,
        name: "길동",
        interest: ["music", "dancing"],
        desc: function() {
        	alert("정보입니다.");
        }
};

Object.keys(info);  //output: ["age", "name", "interest", "desc"]

 

 

2) Object.values() _ 객체에서 value를 배열로 변환

 

var info = {
	age: 20,
        name: "길동",
        interest: ["music", "dancing"],
        desc: function() {
        	alert("정보입니다.");
        }
};

Object.values(info);   //output: [20, "길동", ["music", "dancing"], f()]

 

 

3) Object.entries() _ 객체에서 key와 value를 배열로 변환

 

var info = {
	age: 20,
        name: "길동",
        interest: ["music", "dancing"],
        desc: function() {
        	alert("정보입니다.");
        }
};

Object.entries(info);   
//output: [["age", 20], ["name", "길동"], ["interest", ["music", "dancing"]], ["desc", f()]]

 

 

4) for-in문 _ for문과 같은 기능으로 for (변수 in 객체)의 형태로 사용

 

var info = {
	age: 20,
        name: "길동",
        interest: "music",
};

for (let key in info) {     //output: age 20 name 길동 interest music
	console.log(key);
    console.log(info.key);
}

 

 

 

프로퍼티 조작

1) 값 재할당

 

var info = {
	age: 20,
        name: "길동",
        interest: "music",
};

info.age = 30;
info[age] = 30;

 

 

2) 프로퍼티 추가

 

info.height = 180;
info[height] = 180;

 

 

3) 프로퍼티 삭제

 

delete info.age;
delete info[age];