[JavaScript] Chapter 08. 객체

객체 리터럴

• 데이터와 함수의 집합
• 프로퍼티와 메소드

javascript

닫기 줄바꿈

var person = {};
var objName = {
​​​​name1 : value1,
​​​​name2 : value2,
​​​​name3 : value3,
​​​​name4 : function() {
​​​​​​​​alert("test");
​​​​}
};

 

프로퍼티 (property)

객체 내부 속성 => key : value

key

• 키, 속성명
• 문자열
• 따옴표 사용 또는 미사용

value

• 값, 속성 값
• 문자열, 숫자, 배열, 객체, 함수 등등

ex)

javascript

닫기 줄바꿈

var info = {
​​​​age : 20,
​​​​name : "홍길동",
​​​​weight : "50kg",
​​​​interests : ["music", "dancing"],
​​​​desc : function() {
​​​​​​​​alert("나의 정보");
​​​​}
};

console.log(info.age);
console.log(info.name);
console.log(info.interests[0]);
info.desc();


info.name = {
​​​​​real : "홍길순",
​​​​​fake : "홍길동"
​};
​
​console.log(info.name);         // {real: '홍길순', fake: '홍길동'}
​console.log(info.name.real);
​console.log(info.name.fake);

​console.log(info["name"]);
​console.log(info["name"]["real"]);
​console.log(info["name"]["fake"]);

 

프로퍼티 (property) 열거

• 객체 순회

배열 열거	프로퍼티 열거
배열 순회	객체 순회
순서 보장	순서 미보장
length, index 있음	length, index 없음
For문, for-in문, forEach, Map, filter, reduce	Object.key(), for-in문, Object.Values(), Object.entries()

 

Object.keys()

• 객체에서 key를 배열로 반환

javascript

닫기 줄바꿈

var info = {
​​​​age : 20,
​​​​name : "홍길동",
​​​​weight : "50kg",
​​​​interests : ["music", "dancing"],
​​​​desc : function() {
​​​​​​​​alert("나의 정보");
​​​​}
};

Object.keys(info);    // ["age", "name", "interests", "desc"]

Object.values()

• 객체에서 value를 배열로 반환

javascript

닫기 줄바꿈

var info = {
​​​​age : 20,
​​​​name : "홍길동",
​​​​weight : "50kg",
​​​​interests : ["music", "dancing"],
​​​​desc : function() {
​​​​​​​​alert("나의 정보");
​​​​}
};

Object.values(info);    // [20, "홍길동", "50kg", ["music", "dancing"]]

Object.entries()

• 객체에서 key와 value를 배열로 반환

javascript

닫기 줄바꿈

var info = {
​​​​age : 20,
​​​​name : "홍길동",
​​​​weight : "50kg",
​​​​}
};

Object.entries(info);    
// ["age", 20]
// ["name", "홍길동"]
// ["weight", "50kg"]

for - in 문

• 반복문인 for문과 비슷
• ES6에서 추가됨

javascript

닫기 줄바꿈

var info = {
​​​​age : 20,
​​​​name : "홍길동",
​​​​weight : "50kg",
​​​​}
};

for (let i in info) {
​​​​console.log(i);          // key 값이 나온다. [age, name, weight]
​​​​console.log(info[i]);    // value 값이 나온다. [20, "홍길동", "50kg"]
}

- 변수타입 let, var, const

 

프로퍼티 조작

1. 값 재할당
2. 프로퍼티 추가
3. 프로퍼티 삭제

javascript

닫기 줄바꿈

var info = {
​​​​age : 20,
​​​​name : "홍길동",
​​​​weight : "50kg",
​​​​}
};

// 값 재할당
// 객체 변수.키 = 재할당 값;
info.age = 30;
info["age"] = 30;

// 프로퍼티 추가
// 객체 변수.추가 할 키 = 추가 할 값;
// 객체 변수["추가 할 키"] = 추가 할 값;
info.height = "180cm";
info["height"] = "180cm";

// 프로퍼티 삭제
// delete 객체 변수.키;
// delete 객체 변수["키"];
delete info.age;
delete info["age"];
document.write(delete info.age);    // undefined