객체 순회하기

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

 

 

 

여기에서 키 하나를 생성하고, 그 키에 값을 할당하기 위해서는 다음과 같이 써줘야 한다.

 

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

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

 

B의 방식으로도 할당이 가능하지만 이 경우 키와 값은 항상 정해진다...

하지만 A와 같은 방법은 변수 verb와 project 가 가지는 값에 따라 다른 키와 다른 값을 가지는게 가능해진다.

 

 

 

---

객체 순회하기

 

object.keys 메서드

 

Object.keys 메소드는 어떤 객체가 가지고 있는 키들의 목록을 배열로 리턴하는 메소드이다. 객체의 내장 메소드가 아니라 객체 생성자인 Object 가 직접 가지고 있는 메소드이다. 

 

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

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

 

 

 

 

 

 

메서드가 리턴하는 값 "배열"로 반복문을 사용할 수 있다.

 

 

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)
}

 

 

 

 

 

 

 

 

 

새로운 ES6 문법에서는 Object.keys 외에도 마찬가지로 Object 생성자의 메소드인 Object.values, Object.entries 와 같은 자매품들이 추가되었다. Object.values 는 객체의 키가 아닌 값으로 이루어진 배열을 리턴한다. Object.entries 는 객체의 키와 값의 쌍으로 이루어진 길이 2짜리 배열로 이루어진, 배열을 리턴한다. 각 배열에서 인덱스 [0]의 값은 각각의 키를, 인덱스 [1]의 값은 해당 키에 해당하는 값을 가지게 된다.

 

 

const values = Object.values(obj)
// values === ['melon', 4350, 16500, true]

const entries = Object.entries(obj)

/*
entries === [
  ['name', 'melon'],
  ['weight', 4350],
  ['price', 16500],
  ['isFresh', true]
]
*/

 

object.entries 는 많이 쓰이는 메서드이므로 기억해두자!

 

 

 

---

객체를 순회하는 두번째 방법.. for - in

 

반복문인 for문과 같은 종류의 문법이지만, 객체와 배열을 위해 특별히 존재하는, ES6 에서 추가된 문법이다. 이건 객체 순회 외에도 일반적인 배열을 순회할때도 아주 유용하게 사용할 수 있다.

 

 

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

 

i 를 0 으로 초기화하고, 배열의 길이와 비교하고, i 를 1씩 증가시키는 등의 코드를 생략하는 ES6 문법이다.

 

 

 

 

 

 

 

 

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)
}



/*
'name'
'melon'
'weight'
4350
'price'
16500
'isFresh'
true
*/

 

 

 

 

---

객체 추가 공부 ( in 에 대해서 더 알아보자! ) 

 

1. object - 프로퍼티 존재 여부 확인하기

 

const superman = {
  name: 'clark',
  age: 33,
};


superman.birthDay;    // undefined
'birthDay' in superman;            // false

 

 

superman 라는 객체에서 birthDay 라는 키가 존재하는지 알아보기 위해서는

superman.birthDay;  ---> 이렇게 작성하면 undefined 가 출력되므로, 해당 정보를 얻지 못한다.

 

키가 존재하는지 확인하는 방법은 in 으로 확인해보면 된다.

 

 

 

 

 

 

function makeObject(name, age){
  return {
    name: name,           // name 과 동일
    age,                  // age: age 와 동일
    hobby: "football",
  };
}

const Mike = makeObject("Mike", 30);
console.log(Mike);        // { name: 'Mike', age: 30, hobby: 'football' }


console.log("age" in Mike);        // true
console.log("birthday" in Mike);   // false

 

위의 코드는 객체를 리턴하는 함수 (makeObject) 와 객체에 키가 들어있는지 검사하는 방법 ("age" in Mike) 이다.

 

 

 

 

 

 

 

function isAdult(user){
  if(!('age' in user) || user.age < 20){     // 키가 존재하는지, 키의 값은 20보다 작은지
    return false;
  }
  return true;
}

const Mimi = {
  name: "Mimi",
  age: 30
};


const Jane = {
  name: "Jane"
}

console.log(isAdult(Jane));     // false

 

isAdult 함수로 객체를 검사하는 방법이다. 여기도 in 으로 키가 존재하는지 확인하였다.

 

 

 

 

 

 

 

 

2. for .. in 

 

// 객체 for .. in
const Minsu = {
  name: "Minsu",
  age: 30
}



for(x in Minsu){
  console.log(x);    // 키 'name', 'age' 출력
}




for(x in Minsu){
  console.log(Minsu[x])     // Minsu['age'], Minsu['name']
}

 

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)
}


/*
'name'
'melon'
'weight'
4350
'price'
16500
'isFresh'
true
*/

 

키를 이용해서 값까지 순회한다.