객체의 접근 및 순회

아하 30번도 풀어야 겠죠 풀어보기 전에 처음보는 개념들이라 한번 설명을 볼까 한다!

 

1. 객체의 키를 변수로 접근하기 

기존의 객체를 만들때 어떻게 했는지 살펴볼까요?

 

const information = {
  name: '김개발'
}

위 객체가 있을때

 

information.age = 20;

위 코드를 작성하면 

 

기존 객체 추가하기

이렇게 되는거였죠? 우리는 이 부분을 변수로 접근하고자 합니다!

 

const verb = 'developes'
const project = 'facebook'

 

위 변수를 이용해서 객체에 넣어보아요~ 어떻게요?

 

information[verb] = project // [A]
information.developes = 'facebook' // [B]

요렇게~ booyah~

위 2개의 방법의 차이점은 

[A] : 변수의 값이 달라질때 마다 객체안에서 값이 달라져요

[B] : 기존에 사용했던 느낌으로 객체안에서 값이 고정됩니다!

 

[A]가 좀더 상위호환인 느낌이죠 해당 방법을 주로 써보도록 해요!

 

2. 객체 순회하기

객체 순회는 2가지 방법으로 사용가능하답니다~

- Object.keys() 

- for-in 

 

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

Object.keys() - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...in

for...in - JavaScript | MDN

 

object.keys()는 어떤 객체가 가지고 있는 키들의 목록을 배열로 리턴하는 메소드입니다 예시를 볼까요~

 

const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}

Object.keys(obj) // ['name', 'weight', 'price', 'isFresh']

느낌 오셨나요?

 

맞습니다 맞습니다 객체 obj의 key값들을 배열로 리턴하는 것입니다! 여기서 이걸 이용하여 값들을 구하는 코드를 보면

 

const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}

const keys = Object.keys(obj) // ['name', 'weight', 'price', 'isFresh']

for (let i = 0; i < keys.length; i++) {
  const key = keys[i] // 각각의 키
  const value = obj[key] // 각각의 키에 해당하는 각각의 값
  console.log(value)
}

 

이렇게 된답니다!  위코드 실행해 볼까요?

 

Object.keys() 예시

짜라잔 콘솔에 잘 나오죠?? 

 

Object를 통해 여러 메소드를 사용할수 있습니다

 

- Object.values()

- Object.entries()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values

Object.values() - JavaScript | MDN

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

Object.entries() - JavaScript | MDN

위 두 메소드의 어떻게 되는지 예시를 알아볼까요??

 

Object.values / Object.entries 예시

짜라잔 느낌이 오셨나요 

 

Object.values 는 객체의 값들이 나오고

Object.entries 는 객체의 전부다 나옵니다

 

중요한건 뭐다?? 리턴형이 배열이다!!!!!!!!!!!!

 

Object.keys()를 사용하여 각각의 객체를 순회할수 있는 방법을 배웠지만 하나더 있습니다 잊고있었던 바로 그친구

 

for...in 입니다 

 

이친구는 배열에서도 사용 가능합니다 이해를 위한 예시를 살펴볼까요

 

for (let i = 0; i < arr.length; i ++) {
  console.log(i)
  console.log(arr[i])
}

우리가 많이 해본 for문 사용하여 배열 순회하기 네요~ 이걸 바꿀수 있다구요?! 정말인가요? 어떻게요?

for (let i in arr) {
  console.log(i)
  console.log(arr[i])
}

짜라잔 이렇게 바꿀수 있답니다~

 

let i in arr에서  i의 값은 0으로 초기화 되고 배열의 길이와 비교하여 1씩 자동으로 증가시켜요 

 

> for-in 문은 인덱스의 값으로 무엇을 할당하고, 반복문이 몇번 돌아야 할 지를 자바 스크립트 엔진 내부에서 자동으로 결정하게 된다고 합니다

 

for(하나씩 늘릴변수 in 순회할배열(객체)) 느낌으로 추상화 해봤는데 이렇게 이해하고 있어요 저는~

 

객체로도 예시를 볼까요?

 

const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}

for (let key in obj) {
  const value = obj[key]

  console.log(key)
  console.log(value)
}

 

 

객체를 가지고 for-in 문을 사용하면, for-in 문의 인덱스에 해당하는 변수가, 숫자가 아닌 객체의 각각의 키에 해당하는 문자열을 할당받게 됩니다.