TIL 20 day JS Object method

Winney·2020년 9월 19일
0
const information = {
  name: '김개발'
};

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

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

[A]는 변수 verb와 project가 가지는 값에 따라 다른 키와 다른 값을 가질 수 있다.
[B]로 할당 가능하나 이 경우 키와 값은 항상 정해져 있다.

객체 순회

만약 객체에 있는 모든 키에 한 번씩 접근해야한는 코드를 쓴다면?
객체도 순회가 가능!!!
But. 배열과 같은 정해진 순서가 없기 때문에 어떤 순서에 따라 객체의 키에 접근할지 알 수 없다.
객체의 순회는 '순서가 보장되지 않은 순회'라고 한다.

const arr = ['coconut', 'banana', 'pepper', 'coriander'];
for (let i = 0; i <arr.length; i++) {
  console.log(arr[i]);
}

객체는 index가 없기 때문에 이런 반복문은 불가하다.

1. Object.keys();

Object.keys method는 어떤 객체가 가지고 있는 키들의 목록을 배열로 리턴하는 method이다. 객체의 mothod가 아닌 객체 생성자인 Object가 직접 가지고 있는 method이다.

const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
};
Object.keys(obj) // [ 'name', 'weight', 'price', 'isFresh' ]

Object.keys method가 리턴하는 값은 배열이기 때문에 이걸로 반복문을 사용할 수 있다.

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

E6문법 추가 : Object.values, Object.entries

1. Object.value

: 객체의 키가 아닌 값으로 이루어진 배열을 리턴한다.

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

2. Object.entries

: 객체의 키와 값의 쌍으로 이루어진 길이 2짜리 배열을 리턴한다. 각 배열에서 index [0]의 값은 각각의 키를, 인덱스 [1]의 값은 해당키에 해당하는 값을 가지게 된다.

const entries = Object.entries(obj);
entries === [
  ['name', 'melon'],
  ['weight', 4350],
  ['price', 16500],
  ['isFresh', true]
]

for-in

객체를 순회하는 2번째 방법
객체와 배열을 위해 특별히 존재하는, ES6에서 추가된 문법이다.
객체 순회 및 일반 배열 순회 시 아주 유용함!!

const arr = ['coconut','banana','pepper','coriander'];
for (let i = 0; i < arr.length; i++) {
  console.log(i);
  console.log(arr[i]);
}

배열에서 for-in

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

객체에서 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문의 인덱스에 해당하는 변수가 숫자가 아닌 객체 안의 각 키에 해당하는 문자열을 할당받는다.

profile
프론트엔드 엔지니어

0개의 댓글