[javaScript]객체 메서드 정리 & 객체의 반복문과 복사

객체란

객체란 순서가 없는 키와 값 묶음의 조합이다.

이름표가 붙여진 폴더들을 보관하는 서랍장같은 것! 상자를 열면 각각의 자료가 네임택이 붙여져서 구분되어 있는 장면을 생각해보면 된다. 배열처럼 랜덤한 값들이 아니라, 의미하는 바가 있는 묶음을 나타낼때 쓴다.

키(key)혹은 property라고 부르는 것이 이름표가 되고, 그에 해당하는 자료,즉 value가 있다.

---

객체의 모양

객체는 다음과 같이 생겼다.

let user = {
 name: 'chillDev',
 email: 'bunnyatgym@gmail.com',
 city: 'Bucheon'
}

value에는 텍스트, 숫자, 함수, 객체, 배열 등 다양하게 들어갈 수 있다.

---

객체를 만드는 법

• 콜론(:)로 키와 값을 구분한다.
• 쉼표(,)로 key&value세트를 추가한다.

🛑주의: 선언하는 키값에 띄어쓰기나 특수문자가 들어갈 경우 반드시 ''로 싸줘야한다.

key 값엔 숫자가 올수도, 문자열이 올수도 있으며, 선언시 문자열에 꼭 ''를 안써도 된다.

const obj = {
    0: "value1",
    "prop": "value2",
    key: "value3"
};

obj['0'] //"value1"
obj[0] //"value1" //숫자일 경우 Bracket notation의 ''필요없음
obj.prop // "value2"
obj[key] //'value3'

---

객체를 조회하는 법

Dot notation obj.key	-key값에 띄어쓰기 있을때 조회 불가 -key값에 특수문자 있을때 조회 불가 -key값이 숫자일때 조회 불가
Bracket notation obj['key']	-key값에 띄어쓰기가 있을때도 조회 가능 -key값에 특수문자 있을때도 조회 가능 -key값이 숫자일때도 조회 가능

🛑 key 값이 변수일때는 항상! Bracket notation을 사용해야한다.

이전에 문제 풀이 해놨던 부분에서 이부분에 대해 정리된 부분이 있다.

let twins = {
  //애초에 첨 만들때부터
  //기본적으로 key값엔 띄어쓰기가 못오고
  //쓰려면 ''안에 넣어줘야한다.
  'Jared Leto': 'Suicide Squad',
  'Joaquin Phoenix': 'Joker',
  'Heath Ledger': 'The Dark Knight',
  'Jack Nicholson': 'Tim Burton Batman'
 }
 
 twins.Jared Leto //⛔️ Uncaught SyntaxError: Unexpected identifier
 twins.'Jared Leto' //⛔️ Uncaught SyntaxError: Unexpected identifier
 twins[Jared Leto] //⛔️ Uncaught SyntaxError: Unexpected identifier //꼭 ''안에 key적기
 twins['Jared Leto'] // 'Suicide Squad'

---

객체에 키와 값 추가하기

그냥 조회할 때에 쓰던 표기법을 그대로 사용해서 없던 key만 넣어주면 새로 추가할 수도 있다.

let user = {
 name: 'chillDev',
 email: 'bunnyatgym@gmail.com',
 city: 'Bucheon'
}

user.age = 29
user['hobby'] = coding

user 
// {
//   name: 'chillDev',
//   email: 'bunnyatgym@gmail.com'
//   city: 'Bucheon'
//   age : 29,
//   hobby : coding
// }

---

객체의 key&value 삭제하기

let user = {
 name: 'chillDev',
 email: 'bunnyatgym@gmail.com',
 city: 'Bucheon'
}

delete user.city;
delete user['email']

user
//{
//  name: 'chillDev'
//}

---

객체의 길이 알아내기

.length()는 배열의 길이를 알아낼 때에만 편리하게 쓸 수 있기 때문에, 객체에서 바로 쓰지는 못한다. 하지만 Object.keys()나 Object.values()로 객체의 키나 밸류값을 모아서 배열로 만드는 메서드를 이용해서 알아낼 수 있다.

let obj = {a:1,b:2,c:3}

Object.keys(obj) // ['a', 'b', 'c']
Object.keys(obj).length // 3
Object.values(obj) // [1, 2, 3]
Object.values(obj).length // 3

---

객체에 사용되는 다양한 메서드

 

메서드	설명	원본 변형	리턴값	예시, 주의
Object.keys()	객체의 key값을 순서대로 배열로 만들어 반환한다.	원본변형❌	만들어진 배열	const object1 = {   a: 'somestring',   b: 42,   c: false }; Object.keys(object1) //["a", "b", "c"]
Object.values()	객체의 value값을 순서대로 배열로 만들어 반환한다.	원본변형❌	만들어진 배열	lconst object1 = {   a: 'somestring',   b: 42,   c: false }; Object.keys(object1) // ["somestring", 42, false]
Object.entries()	객체의 키와 값의 쌍으로 이루어진 길이 2짜리 배열을 요소로 갖고있는 배열을 리턴한다.	원본변형❌	만들어진 배열을 담고 있는 배열	const object1 = {   a: 'somestring',   b: 42 }; Object.entries(object1) // [ [a,'something'] , [b,42] ]
Object.assign()	어떤 객체에 다른객체를 붙여넣거나, 새롭게 복사한다.	원본변형⭕️	새로운 객체	const target = { a: 1, b: 2 }; const source = { b: 4, c: 5 }; const returnedTarget = Object.assign(target, source); target //{ a: 1, b: 4, c: 5 } returnedTarget //{ a: 1, b: 4, c: 5 } const copy = Object.assign({}, target); copy //{ a: 1, b: 4, c: 5 } target //{ a: 1, b: 4, c: 5 } //🛑 원본변형을 하기때문에, 빈 배열을 선언해주고 그 안으로 복사할 배열 전체를 붙여줘야한다. Object.assign(copy, {d:6}); copy //{ a: 1, b: 4, c: 5, d:6 } target //{a: 1, b: 4, c: 5}

---

객체의 반복문

• for ...in

for ..in을 사용해서 객체의 key값을 전부 순회할 수 있다.

let obj = {a:1,b:2,c:3}

for(key in obj){
    console.log(`${key}키의 값 ${obj[key]}`)
    //⛔️ 이때 `${obj.key}` 로는 undefined!!
}

//a키의 값 1
//b키의 값 2
//c키의 값 3

 

• Object.keys() + for ...of

배열에서 사용하는 for...of이지만 Object.keys() 를 이용해서 key값을 배열로 만들어준 후에 배열처럼 반복문을 돌릴 수 있다.

const obj = {
    key1 : "value1",
    key2 : "value2",
    key3 : "value3"
};

for (var key of Object.keys(obj)) {
    console.log(obj[key])
}
//value1
//value2
//value3

---

객체의 복사

사용 메서드	주의사항
Object.assign({}, obj)	-얕은 복사 -앞에 빈 배열, 뒤에 복사할 배열	const target = { a: 1, b: 4, c: 5 } const copy = Object.assign({}, target); copy //{ a: 1, b: 4, c: 5 }
spread  {...obj}	-얕은 복사	const target = { a: 1, b: 4, c: 5 } const copy = {...target} copy //{ a: 1, b: 4, c: 5 }