[JavaScript] Object(객체)

const 객체이름 = { property1이름(=key) : property1값(=value),
	      	 property2이름 : property2값,
              	property3이름 : property3값
              };

• 순서없이 {}안에 저장
• 이름은 key, 값은 value라고도 한다.
• property와 property는 ,(콤마)로 구분
• property이름(key)과 property값(value)은 :(콜론)으로 구분
• 이름(key)-값(value)이 쌍으로 존재
• 이름(key)에는 스페이스, 한글, 숫자, 특수문자 등이 들어갈 수 있다.
  (스페이스, 특수문자의 경우 ""(따옴표) 필요_ 예외-$)

property값(value)에 접근하는 방법

객체이름.property이름 or 객체이름["property이름" or 변수]

• [ ]사용시 ""(따옴표) 필요
• property이름을 변수로 설정하여 접근 시 ""(따옴표)없이 [ ]사용
  ('객체이름.변수'는 사용할 수 없다.)
• 숫자, 스페이스로 된 property이름은 [ ]로 접근

property값(value) 수정

객체이름.존재하는 property이름 = 수정값; 
or 객체이름["property이름"] = 수정값;

const fruit = { name:"apple", color:"red" };
fruit.name = "banana";
fruit["color"] = "yellow";
console.log(fruit);

결과

{ name:"banana", color:"yellow" }

property 추가

객체이름.추가할 property이름 = 추가할 값; 
or 객체이름["property이름"] = 추가할 값;

fruit.size = 20;
console.log(fruit);

결과

{ name:"banana", color:"yellow", size:20 }

• const로 선언된 객체변수에 재할당하는 것은 불가능하지만 property이름(key)로 접근해 추가와 property값(value) 수정은 가능

서로 다른 객체에 같은 프로퍼티를 저장하면

const fruit = { name:"banana", color:"yellow", size:20 };
const fruitObj = { name:"banana", color:"yellow", size:20 };
console.log(fruit === fruitObj)
console.log(fruit.name === fruit.name)

결과

false
true

fruit와 fruitObj 객체 자체는 같지 않다.
fruit와 fruitObj의 name의 값은 같다.
객체 fruit과 객체 fruitObj가 property(내용물)은 같지만 다른 메모리주소를 가지기 때문이다.

객체에 저장된 함수(=method)

정의

let methodObj = {
  methodKey: function() {
    console.log('');
  }
}

호출방법

methodObj.methodKey();

• console.log()에서 log는 함수를 value로 가진 key이다.

객체의 프로퍼티를 변수로 접근하기

let alpha = {};
const naming = "name";
const value = "a";
alpha[naming] = value;
console.log(alpha);

결과

{ name : "a" }

객체 순회하기

1. 객체를 배열로 리턴하기

• Object.keys( ) - 객체의 키를 배열로 리턴
• Object.values( ) - 객체의 값을 배열로 리턴
• Object.entries( ) - 객체의 키,값을 배열로 리턴

1. Object.keys(객체이름)

const fruit = { name:"banana", color:"yellow", size:20 };
Object.keys(fruit);

결과

["name", "color", "size"]

2. Object.values(객체이름)

const fruit = { name:"banana", color:"yellow", size:20 };
Object.values(fruit);

결과

["banana", "yellow", 20]

3. Object.entries(객체이름)

const fruit = { name:"banana", color:"yellow", size:20 };
Object.entries(fruit);

결과

[["name","banana"], ["color","yellow"], ["size",20]]

2. for - in

객체와 배열을 위해 특별히 존재하는, ES6 에서 추가된 문법

배열에 적용

let arr = [ 'a', 'b', 'c' ]
for (let i in arr) {
  console.log(arr[i])
}

결과

a
b
c

i를 0으로 초기화하고 i를 1씩 증가시켜 배열의 길이만큼 반복한다.

객체에 적용

const fruit = { name:"banana", color:"yellow", size:20 };
for (let key in fruit) {
  const value = fruit[key];
  console.log(key);
  console.log(value);

결과

name
banana
color
yellow
size
20

배열의 인덱스 값을 객체의 키로 할당받는다.