Object

Object는 객체라고 하며 이름과 값으로 구성된 Property들의 집합이고 객체를 선언하는 방법은 아래와 같다.

배열과 비슷하게 생겼는데 배열과의 차이점은 먼저, 객체는 중괄호로 감싸져 있고, 이름(key)과 값(value)으로 구성된 property가 쉼표를 기준으로 분리된 목록의 형태이다. 그리고 마지막으로는 배열과 다르게 각 요소내의 순서가 없다.

Object 내부 property 접근방법

let bird = {
  name: 'Sparrow',
  cute: true,
  height: '15cm',
};

let howTall = 'height'

console.log(bird.name);      --> 'Sparrow'
console.log(bird["cute"]);   -->  true

console.log(bird.howTall);   -->  undefined
console.log(bird[howTall]);  -->  '15cm' 

Object 내부의 property에 접근하고 싶다면 두가지 방법이 있다. 하나는 객체이름 뒤에 마침표 연산자를 사용하여 접근할 수 있고 또는, 객체이름 뒤에 대괄호로 접근할 수 있다. 둘 중에 어느것을 사용하더라도 상관없지만 대괄호 접근법을 사용하면 위와같이 변수를 사용해서 접근할수 있다.

let bird = {
  name: 'Sparrow',
  cute: true,
  height: '15cm',
  address: {
  	email: '[email protected]',
  	home: ['tree', 'ground']
  }
};

bird.address.home[0];   --> 'tree'

만약 위와 같이 객체안에 객체와 배열과 혼합되어 있을때는 어떻게 접근할 수 있을까. 앞서 배웠던 배열접근법과 객체접근법을 그대로 사용하면 접근할 수 있다.

Object 내부 property 추가, 제거, 수정

Object내부의 property는 접근뿐만 아니라 추가하거나 제거 및 수정까지 가능하다.

let bird = {
  name: 'Sparrow',
  cute: true,
  height: '15cm',
  address: {
  	email: '[email protected]',
  	home: ['tree', 'ground']
  }
};

bird.color = 'brown';      --> bird = {...... color : 'brown'}
bird.cute = false;         --> bird = {...... cute: false}
delete bird.height;        --> bird = {...... height property 삭제}

Object methods

method는 객체에 저장된 값(value)이 함수일때 method라고 한다. 따라서, 내가 자주 사용하고 있는 console.log()도 객체이다. 어디서나 사용가능했으니 이를 global 객체라고 한다. 따라서 객체에 method를 정의하려면 아래와 같이 할 수 있다.

let howToMakeMethod = {
	thisIsMethod: function(){
   		console.log('메서드 정의를 해봐요.')
   }
};

howToMakeMethod.thisIsMethod();     --> '메서드 정의를 해봐요'

Reference

const a = '참새';
const b = '참새';
console.log(a === b);   --> true

const birdOne = {
  name: '참새'
};

const birdTwo = {
  name: '참새'
};

console.log(birdOne === birdTwo)    --> false

텍스트 같은 경우는 변수에 저장하면 텍스트 자체로 저장되기 때문에 조건문 내부에서도 사용가능했고, 비교연산을 사용할 수 있었다. 하지만, 객체는 reference에 저장되기 때문에 생긴 모양과 안의 property의 값이 같더라도 비교를 해보면 false를 반환한다. 이는 이 객체들을 불러올때 해당 메모리에 저장된 데이터를 반환해 보여주기 때문인데, birdOne과 birdTwo는 각기 다른 메모리에 저장되어 있어 진짜 값은 다른것이다. 하지만 객체 내부의 property를 비교할때는 텍스트를 비교하기때문에 reference와 무관하게 비교연산 가능하다.

Object 순회하기

 const arr = ['참새', '흰목오목눈이', '비둘기', '왕관앵무']
 
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i])
}

배열같은경우는 위와 같이 for문을 사용하여 인덱스0번부터 순서대로 하나씩 순회할 수 있었다. 하지만 Object는 정해진 순서가 없기 때문에 순서가 보장되지 않고 순회할 수 있다. 방법은 크게 2가지가 있다.

Object.keys()

Object.keys() method는 어떤 객체가 가지고 있는 key들의 목록을 '배열'로 반환하는 method이다. 이는 객체의 자체 내장 method가 아닌 객체 생성자인 Object가 가지고 있는 method이다.

let bird = {
  name: 'Sparrow',
  cute: true,
  height: '15cm',
  address: {
  	email: '[email protected]',
  	home: ['tree', 'ground']
  }
};

Object.keys(bird);     --> [ 'name', 'cute', 'height', 'address' ]

let keys = Object.keys(bird);

for (let i = 0; i < keys.length; i++) {
  const key = keys[i] 
  const value = bird[key] 
  console.log(value)
}   

--> 'Sparrow', true, '15cm', {email: '[email protected]',
  home: [ 'tree', 'ground' ]}

따라서, 위와 같이 Object.keys()를 사용하여 key값들을 배열로 받고, 이 배열은 for 반복문을 사용하여 property의 value값에 접근할 수 있다. 이 외에도 객체의 키가 아닌 값으로 이루어진 배열을 반환하는 Object.values, 객체의 키와 값의 쌍으로 이루어진 length 2짜리 배열이 요소로 이루어진 배열을 리턴하는 Object.entries 등도 있다.

for-in

for-in은 for반복문과 비슷한 방법으로 객체를 순회하는 문법이다. 물론, 일반적인 배열을 순회할때도 사용가능하다. 배열에서 사용하던 for문을 for-in문으로 바꾸면 다음과 같이 바꿀 수 있다.

const arr = ['참새', '흰목오목눈이', '비둘기', '왕관앵무']
 
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i])
}

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

for-in문을 통해 for문에서 쓰이던 증감식, i값 지정, i값 길이 등을 간단하게 축약가능하다. 인덱스의 값으로 무엇을 할당하고, 반복문이 몇번 돌아야 할 지를 자바스크립트 엔진에서 자동 결정하기 때문이다. 이를 객체에 적용하면 아래와 같다.

let bird = {
  name: 'Sparrow',
  cute: true,
  height: '15cm',
};

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

  console.log(key)        --> 'name' 'Sparrow' 'cute'
  console.log(value)      --> true 'height' '15cm'
}

이렇게 객체에 for-in문을 사용하면 인덱스에 해당하는 변수가 숫자가 아닌 객체 내부 property의 key에 해당하는 문자열을 할당받게 된다.

이번 학습을 진행하면서 배열의 형태든, 객체의 형태든, 혹은 혼합된 형태의 데이터를 받았을때 어떻게 접근하고 사용해야 될지 알게 되었고, 학습을 더 진행해 보면서 이러한 형태의 정보를 잘 다룰 수 있는 연습을 해야겠다는 생각이 들었다.