위코드 사전 스터디를 듣고 쓰는 글입니다.
수업 내용을 참고/인용하여 작성했습니다.

이전 포스팅에서도 몇 번 등장했던 그것, 객체 / object입니다!

객체란?

이전 포스팅 데이터 타입에서 참조 타입에 속하는 데이터 타입인데요, 객체,즉 object에는 다양한 데이터 타입을 담을 수 있습니다.
애초에 자바스크립트가 객체 기반 프로그래밍 언어이기 때문에, 객체가 곧 자바스크립트 그 자체라고 할 수 있어요.
참고 블로그

표현식

let sample = {
	firstKey :'first value',
  secondKey : 'second value',
  or Anyname : 2341
}

이렇게 배열과 달리 중괄호 {}를 사용하여 key : value 이런 데이터들을 써준답니다! 키와 밸류를 합친 하나의 항목을 property라고 해요.
다만 key에는 문자형만, value에는 모든 자료형을 할당할 수 있습니다.특히 property의 값이 함수일 경우, 이를 일반 함수와 구분하기 위하여 method(메서드)라고 부릅니다.

왜 필요한가요?

앞서 말한 것처럼 객체에는 다양한 데이터 타입을 담을 수 있기에 배열보다 더욱 많은 정보를 정리하고 담아낼 수 있는 특징을 가지고 있습니다.
배열도 같은 참조 타입이고, 값을 담아낼 수 있는데 굳이 객체를 또 배워야 할까요? 객체에는 array와는 다르게 key와 value라는 속성을 가지고 있어, 배열과는 다른 방식으로 활용이 가능합니다.

한가지 예를 들어볼까요? 저는 온라인 RPG 게임을 굉장히 좋아하는데, 이 게임은 각각의 역할군과 여러 직업들이 나누어져 있습니다.

탱커	힐러	근거리 공격	원거리 물리공격	원거리 마법공격
Paladin	White Mage	Dragoon	Bard	Black Mage
Warrior	Scholar	Monk	Machinist	Summoner
Dark Knight	Astrologian	Ninja	Dancer	Red Mage
Gunbreaker		Samurai		Blue Mage

뭔가 굉장히 많죠? 이 표를 한꺼번에 합쳐 정리해야한다면 어떻게 표현해야 할까요?

배열로 정리

let tank = ['Paladin','Warrior','Dark Knight','Gunbreaker']
let healer = ['White Mage','Scholar','Astrologian']
let dps1 = ['Dragoon','Monk','Ninja','Samurai']
let dps2 = ['Bard','Machinist','Dancer']
let dps3 = ['Black Mage','Summoner','Red Mage','Blue Mage']

let allJob = [];
allJob = allJob.concat(tank,healer,dps1,dps2,dps3)
console.log(allJob)

객체로 정리

let allJob = {
  tank : ['Paladin','Warrior','Dark Knight','Gunbreaker'],
  healer : ['White Mage','Scholar','Astrologian'],
  dps1 :['Dragoon','Monk','Ninja','Samurai'],
  dps2 :['Bard','Machinist','Dancer'],
  dps3 :['Black Mage','Summoner','Red Mage','Blue Mage']
}

console.log(allJob)

굳이 배열들을 변수로 바꿔 합쳐주지 않아도 이런 식으로 분류가 가능합니다!더군다나 value에는 배열뿐만 아니라 같은 객체 타입도 넣을 수 있어요.

객체와 배열의 더욱 자세한 차이를 알고 싶다면 이 블로그를 참고하세요.

객체에 접근하는 방법

위에서 분류한 allJob 객체를 계속 이용하겠습니다.
객체의 value에 접근하기 위해선 두 가지 방법이 있어요.

Dot Notation

let dps1 = allJob.dps1
console.log(dps1)
//Array(4) [ "Dragoon", "Monk", "Ninja", "Samurai" ]

간단합니다.console.log처럼 객체이름.key이름이렇게 점을 붙여서 표기하는 방법인데요, 한가지 주의사항은 이러한 dot notation방법은 key이름에 띄어쓰기나 숫자가 들어가 있을 경우 사용하지 못한다는 특징이 있습니다.

let sample = {
  'korean food': '냉면'
}
console.log(sample.korean food)
//Uncaught SyntaxError: missing ) after argument list

let sample2 = {
  '55': '오십오'
}
console.log(sample2.55)
//Uncaught SyntaxError: missing ) after argument list

key의 이름은 문자형이기만 하면 된다고 했는데, 왜 안될까요?

하지만 우리에게는 또다른 방법이 있습니다.

Bracket Notation

let dps1 = allJob['dps1']
console.log(dps1)
//Array(4) [ "Dragoon", "Monk", "Ninja", "Samurai" ]

어라.저 형태...어디서 많이 본 것같지 않나요?

let array = [0,1,2]
array[0]

배열 데이터에 접근하는 방식이랑 똑같네요!단지 대괄호 안에 들어가는게 인덱스 번호 대신 key의 이름이 문자형으로 들어갈 뿐입니다. 이대로면 저 따옴표 안에 뭘 넣어도 되겠네요! 야호!

bracket notation으로 고민을 해결한 글쓴이의 모습

마무리

물론 당연하게도 객체에 대해선 여기서 끝이 아닙니다!
단지 제가 글을 쓰다보니 너무 졸려서 두 파트로 나누어야겠다는 생각이 들었거든요.
다음 포스팅에서는 객체 프로퍼티를 추가,수정,삭제하는 방법이나 다양한 객체 타입을 접근하는 예제 등에 대해 쓰겠습니다.