객체 Study Keywords

YunKuk Park·2021년 11월 19일

👣 하나씩 꾸준히

목록 보기

3/15

객체

💡 one of the JavaScript's data types.
a collection of related data and/or functionality.
Nearly all objects in JavaScript are instances of Object

객체란 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입!

객체란 무엇이며 필요한 이유

객체가 없으면?

문제 : 비트코인 정보를 출력하는 함수를 짜주세요.

const id = 136523;
const name = 'bitcoin';
const symbol = 'BTC';

// 그런데 여기서 얘네들을 다 출력해야돼
print(name, symbol);

function print(name, symbol){
	console.log(name);
}

문제점

argument가 너무 많아진다.
만약에 bitcoine 현재 가격 정보가 들어오면 함수 인자를 다시 넣어줘야해.

⇒ 관리힘듬.

객체로 한번에 관리를 해줘버리자. (약간 폴더정리 느낌임)

const 코인 = {
	{
		id: 136523,
		name: 'bitcoin',
		symbol: 'BTC',
		price: '화성 가버리는 가격',
	},
	{
		id: 142312,
		name: 'yunkuk',
		symbol: 'YKK',
		price: '달 가버리는 가격',
	}
}

function 출력해(코인){
	console.log(코인[0].id);
	console.log(코인[0].price);
	// 한번에 다 출력하고 싶으면 .map 쓰셈
}

출력해(코인);

우리도 바탕화면에 뭔가 쨘뜩 깔려있으면 폴더 정리를 해주듯이
관계있는 데이터 또는 함수들을 묶어서 객체를 만들어주어, 관리하기 편하게끔 만들어준다!

객체에서 property, key, value

object = { key : value }

key : object에서 우리가 접근 할 수 있는 값 (변수 같은 역할)

value : key값으로 접근했을 때 들어있는 data or function (변수에 선언한 무언가 같은 역할)

property :

const person = {
  name: 'Bokchil Kim',
  DOB: 1884,
  age: () => 2021 - person.DOB,
}

객체에 접근 하는 두 가지가 있는 이유

객체에 접근할 수 있는 방법에는 2가지가 있다.
1. Dot Notation (object.key)
2. Braket Notation (object['key'])

보통 코딩할 때의 경우 Dot Notation 을 주로 사용하지만,

key가 변수로 선언되어있을 경우
key에 space(공백)이 있는 경우
우리가 정확하게 어떤 key가 필요한지 모를 때. 즉, runtime 에서 결정될 때
⇒ 실시간으로 원하는 key의 값을 받아오고 싶을 때
⇒ 동적으로 key 에 관련된 value를 받아와야 할 때 유용하게 쓰일 수 있다.
⇒ 결국 1번과 비슷한 맥락

1, 2, 3 의 예외 상황에서는 Braket Notation 을 사용 해야 한다.

// 예시

function printValue(obj, key){
	console.log(obj.key);  // undefined
	console.log(obj[key]); // 정상 출력
}

단, key는 string 타입으로 넣어줘야 한다.

객체의 값을 추가, 수정, 삭제 하는 방법

let person = {
  name: 'Bokchil Kim',
  DOB: 1884,
  age: () => 2021 - person.DOB,
};

// 추가
person.sayhello = () => console.log('하이');

// 수정
person.name = 'Bok Deok BBang';

// 삭제
delete person.age;

console.log(person);

객체와 배열이 섞인 복잡한 객체 만들어서 접근하는 방법

보통 이런 경우가 json 파일 받아와서 재가공 할 때 자주 사용되는데 그래서 비트코인 정보 api에 접근해서 값들을 가져왔다.

async <function getCoins() {
  const response = await fetch('https://api.coinpaprika.com/v1/tickers');
  if (!response.ok) throw new Error(response.error);

  const result = await response.json();
  return result;
}

getCoins().then(([...coins]) => {
  console.log(coins);
});

예를 들어,
여기서 1 번째 코인(idx는 0)의 id 를 알고 싶다면 coins[0].id 로 접근 하면 되고
3 번째(idx는 2) 코인의 rank를 알고 싶다면 coins[2].rank 로 접근하면 된다.

보통 map을 사용해서 내가 사용 할 수 있게 새로운 배열을 반환 받아 사용하거나, 계속해서 반복되는 Component를 만들 때 사용한다. (<li> 같은거)
(map은 foreach와 다르게 재가공된 새로운 배열을 return. 그래서 따로 let을 통해 빈 배열을 만들어 줄 필요가 없다)
getCoins().then(([...coins]) => {
  const coinIds = coins.map((coin) => coin.id);
  console.log(coinIds);
});

배열의 타입이 객체인 이유

배열의 Type은 Object 이지만 protoType을 보면 Array 라고 되어있다. 이게 무슨말일까?

배열은 특별한 종류의 객체이다.

배열은 key값을 string이 아닌 number인 객체이다.

숫자형 키(인덱스)를 사용함으로써 객체의 기본 기능 외에도 순서를 제어 할 수 있는 특별한 메소드들을 제공한다.

배열이 필요한 이유?

개발을 하다 보면 순서가 있는 덩어리가 필요할 때가 있다. 예를 들어, 순서를 만들어 정렬(sorting) 해야하는 경우가 그렇다.

또, 특정 요소를 빠르게 읽어야 할 때도 순서가 있는 배열이 객체보단 읽기 빠르다.

근데 프로토타입이 뭔가요?

"유전자"

배열의 프로토타입을 검색해보니 아주 여러가지가 나온다.

arr.map() 도 가능하고 arr.sort(), arr.join() 등등 배열은 여러 메소드를 사용 할 수 있다.

그런데 배열자료에 저런 메소드를 붙일수 있는 이유가 뭘까? 우리는 저런 함수들을 추가 해 준적이 없는데??

답 : 니네 부모님 유전자 쩔더라.
const arr = new Array(5,2,4,12);
배열을 만드는 방법에는 new키워드를 사용하는 방법이 있다.
어라? 이거 class 에서 자식 뽑아낼때 쓰는 문법인데??
맞다.

우리가 배열의 메소드를 따로 만들지 않아도 사용할 수 있는 이유는 이미 부모 유전자(prototype) 안에 들어있기 때문이다.