[JavaScript - 7] 객체

기본 개념

1. 구조는 {Key : value} 형태로 구성된다.

let user = {
	firstName : 'white', // 왼쪽은 key 오른쪽은 value
	lastName : 'coding',
	country : 'Republic of korea'
}

2. 객체의 값을 사용하는 방법 

// 1. Dot notation
user.firstName // 'white'
user.country // 'Republic of korea'

// 2. Bracket notation
user['firstName'] // 'white'
user[country] // 'Republic of korea'

3. 객체의 키와 값을 생성하기

user['url'] = 'https://white120.tistory.com/'
user.url = 'https://white120.tistory.com/'

// Dot notation으로 키값을 추가 할 때는 문자열로만 지정이 가능하다.
// ex) user.123 = value (X)
// ex) user.address = 55354 (o)

property, operator, method

1. delete

let player = {
	name : 'White Coding',
	age : 28,
	isRetired : true,
	country : 'Republc of Korea'
};

delete player['age']; // player 변수의 age 키값이 삭제가 된다.

---

2. in 연산자 (키값의 존재 여부 확인만 할 수 있다는 점 !) 추가로 객체의 반복문 순회는 for in만 사용이 가능하다.

'age' in player //true
player['age'] in player //false
28 in player  //false
'email' in player //false

// 키값의 존재 여부 확인만 할 수 있다는 점!

---

3. Object.keys(), Object.values(), Object.entries()

Object.keys(player) // ['name', 'age', 'isRetired', 'country']
Object.value(player) // ['White Coding', 28, true, 'Republc of Korea']
Object.entries(player) 
// [['name','White Coding'], ['age',28], ['isRetired', true], ['country','Republc of Korea']]

// 배열로 반환 하는게 특징!
// 원본을 변경하지 않는다.

---

4. Object.assign()

 

출처 객체들의 모든 열거 가능한 자체 속성을 복사해 대상 객체에 붙여넣습니다. 

그 후 대상 객체를 반환합니다.

Object.assign(target, ...sources)

1. target

목표 객체. 출처 객체의 속성을 복사해 반영한 후 반환할 객체입니다.

 

2. sources

출처 객체. 목표 객체에 반영하고자 하는 속성들을 갖고 있는 객체들입니다.

 

3. return 

목표 객체.(target)

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget === target);
// expected output: true

유용하게 쓰일 수 있는 메서드!

Object 메서드가 다양하게 있지만 아직 많이 활용을 할 상황이 안 보인다.

객체 잠금 설정이나 핸들링 관련한 여러가지 있는데 지금은 이 글에 있는 내용만 알아도 객체 다루기는 충분하다.

 

MDN을 참고해 다양한 오브젝트 메서드들을 익혀보자!

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