[FE Bootcamp] 12일차_객체

오늘은 배열에 이어 객체에 대해 공부하였다.

나는 객체에 대한 이해도가 엄청나게 떨어졌던 지라 학교 시험이건 코딩 테스트 공부건 객체 부분에서 항상 막혔었는데, 이 참에 아예 제대로 공부해 보기로 하였다.

수업은 9시에 시작이지만 오늘은 9시 한참 전에 일어나서 공부 를! 시작 했다. 대견한 나

 

객체란?

객체란, 이름(Key)와 값(Value)로 구성된 Property들의 정렬되지 않은 집합이다.

이렇게만 말하면 무슨 소리인지 모르겠으니, 예시를 들어보자

 

	레드 제플린	롤링 스톤스	퀸	건즈 앤 로지스
보컬	로버트 플랜트	믹 재거	프레디 머큐리	액슬 로즈
기타1	지미 페이지	키스 리처즈	브라이언 메이	슬래시
기타2		믹 테일러		이안 스트래들린
베이스	존 폴 존스	빌 와이먼	존 디콘	더프 멕케이건
드럼	존 본햄	찰리 와츠	로저 테일러	스티븐 애들러

 

위의 표를 코드로 나타내 본다고 치자

let ledZepplin_vocal = "로버트 플랜트"
let ledZepplin_guitar1 = "지미 페이지"
let ledZepplin_bass = "존 폴 존스"
let ledZepplin_drum = "존 본햄"

let rollingStones_vocal = "믹 재거"
let rollingStones_guitar1 = "키스 리처즈"
let rollingStones_guitar2 = "믹 테일러"
let rollingStones_bass = "빌 와이먼"
let rollingStones_drum = "찰리 와츠"

let queen_vocal = "프레디 머큐리"
let queen_guitar1 = "브라이언 메이"
let queen_bass = "존 디콘"
let queen_drum = "로저 테일러"

let gunsNroses_vocal = "액슬 로즈"
let gunsNroses_guitar1 = "슬래시"
let gunsNroses_guitar2 = "이안 스트래들린"
let gunsNroses_bass = "더프 맥케이건"
let gunsNroses_drum = "스티븐 애들러"

 

딱 봐도 변수가 매우 많아 번잡스럽다. 거기다가 내가 알고싶은 밴드의 세션이 누군지 찾아 보려면 일일히 변수를 하나하나 찾아 봐야 하는 번거로움도 생긴다.

 

이러한 불편함을 해소하기 위해 사용하는 자료형이 바로 객체이다. 

그렇다면 표를 어떻게 객체로 나타낸다는 것일까?

 

	레드 제플린	롤링 스톤스	퀸	건즈 앤 로지스
보컬	로버트 플랜트	믹 재거	프레디 머큐리	액슬 로즈
기타1	지미 페이지	키스 리처즈	브라이언 메이	슬래시
기타2		믹 테일러		이안 스트래들린
베이스	존 폴 존스	빌 와이먼	존 디콘	더프 멕케이건
드럼	존 본햄	찰리 와츠	로저 테일러	스티븐 애들러

 

먼저, 각 밴드의 밴드명이 바로 객체의 이름이다.

객체는 변수와 동일하게 let, var, const를 이용해 선언할 수 있다.

대신 = 뒤에는 중괄호( { } )를 써줘야 하며, 이 중괄호 안에 프로퍼티를 넣어 준다.

 

	레드 제플린	롤링 스톤스	퀸	건즈 앤 로지스
보컬	로버트 플랜트	믹 재거	프레디 머큐리	액슬 로즈
기타1	지미 페이지	키스 리처즈	브라이언 메이	슬래시
기타2		믹 테일러		이안 스트래들린
베이스	존 폴 존스	빌 와이먼	존 디콘	더프 멕케이건
드럼	존 본햄	찰리 와츠	로저 테일러	스티븐 애들러

 

보컬, 기타 등의 세션명은 이름(key)를 나타내고, 각 세션별 멤버 이름은 key에 따른 value 값들을 나타낸다.

다시 말해, 이름이 '레드 제플린'인 객체의 '보컬' key에는 '로버트 플랜트'라는 value가 저장되어 있고, 이름이 '퀸'인 객체의 '베이스' key에는 '존 디콘'이라는 value가 저장되어 있다는 것이다.

key에는 반드시 문자열만 올 수 있고, value에는 객체를 포함한 모든 자료형이 올 수 있다. 

특이하게도 value에는 함수도 올 수 있는데, 이 value 자리에 함수가 오면 이를 메서드라고 부른다.

 

그리고 이 key와 value로 묶여 있는 객체의 내용을 Property라고 한다.

이때 주의할 점은 'key  = value'가 아니라, 'key : value'라는 것. 

property와 property는 배열과 같이 , 을 통해 구분해 준다.

 

위 표를 다시 객체로 나타내 표현해보면

 

let ledZepplin = {
  vocal : "로버트 플랜트",
  guitar1 : "지미 페이지",
  bass : "존 폴 존스",
  drum : "존 본햄"
}

let rollingStones = {
  vocal : "믹 재거",
  guitar1 : "키스 리처즈",
  guitar2 : "믹 테일러",
  bass : "빌 와이먼",
  drum : "찰리 와츠"
}

let queen = {
  vocal : "프레디 머큐리",
  guitar1 : "브라이언 메이",
  bass : "존 디콘",
  drum : "로저 테일러"
}

let gunsNroses = {
  vocal : "액슬 로즈",
  guitar1 : "슬래시",
  guitar2 : "이안 스트래들린",
  bass : "더프 맥케이건"
  drum = "스티븐 애들러"
}

 

위 코드는 단 5개의 변수만을 이용해 밴드, 세션, 이름을 매치시킬 수 있게 하였다.

이처럼 이름과 값이 쌍을 이뤄야 하는 데이터에서는, 객체를 활용하면 매우 편리해 진다.

 

객체의 접근

그렇다면 이렇게 정의한 객체에는 어떻게 접근하는 것일까?

객체에 접근하는 방법은 Dot Notation(점 표기법)과 Bracket Notation(괄호 표기법) 두가지가 있다.

 

A. Dot Notation

Dot Notation은 객체의 이름 뒤에 .을 찍고, key를 입력하여 해당 key의 value를 가져오는 방법이다.

 

let song = {
  title : "Citizen Erased",
  artist : "Muse",
  released : 2001,
  duration : "7min 22sec"
}

console.log(song.artist)
//result = "Muse"
console.log(song.album)
//result = undifined

 

Dot Notation은 Bracket Notation에 비해 읽고 쓰기가 편하다는 장점이 있지만, 점 뒤에 오는 key가 변수일 경우 사용할 수 없다.

 

B. Bracket Notation

Bracket Notation은 객체의 이름 뒤에 대괄호( [ ] )를 붙이고, 이 대괄호 안에 key를 '문자열'로 넣어 value를 가져오는 방법이다.

 

let song = {
  title : "Citizen Erased",
  artist : "Muse",
  released : 2001,
  duration : "7min 22sec"
}

console.log(song['title']
//result = "Citizen Erased"
colsole.log(song['album'])
//result = undifined

헌데, 이 Bracket Notation을 사용하려면 몇가지 조건이 필요하다.

먼저 상기했듯이 괄호 안에는 무조건 '문자열'만 들어갈 수 있다.

하지만, Dot Notation과는 다르게 '값이 문자열인 변수' 또한 들어갈 수 있는데, 이때는 변수의 이름을 입력해 주어야 한다.

 

let song = {
  title : "Citizen Erased",
  artist : "Muse",
  released : 2001,
  duration : "7min 22sec"
}
let duration = 'artist'
let artist = 2001

console.log(song[duration])
//result = "Muse"
console.log(song['duration'])
//result = "7min 22sec"
console.log(song[artist])
//result = undifined

 

song 객체의 key에 같은 duration을 넣었는데 결과가 다르게 나왔다.

이는 [ ] 안에 넣은 key의 형식 때문이다. 

[ ] 안에는 문자열이 들어가야 하므로, 처음부터 문자열 'duration'을 넣으면 key가 duration인 프로퍼티의 value가 나온다.

하지만 변수 duration을 넣으면? 

duration에는 'artist'라는 문자열 값이 저장되어 있으므로, song[duration] === song['artist']이다.

그러므로 key가 artist인 프로퍼티의 value가 나오는 것이다.

song[artist]의 경우에는, 변수 artist에 저장된 값이 정수인 2001이므로, undifined가 나오게 된다.

 

C. 프로퍼티 추가 및 삭제

지금까지 객체의 표현 방법 및 접근법을 알아 보았다. 

이번에는 프로퍼티를 어떻게 추가하고 삭제하는지에 대해 알아보자.

 

let song = {
  title : "Citizen Erased",
  artist : "Muse",
  released : 2001,
  duration : "7min 22sec"
}

song.album = 'Origin of Symmetry'
song['genre'] = 'Progressive Rock'
delete song.title

//console.log(song)
//result = {
//  artist : "Muse",
//  released : 2001,
//  duration : "7min 22sec",
//  album : 'Origin of Symmetry'
//  genre : 'Progressive Rock'
//}

 

프로퍼티의 추가는 간단하다. 추가를 원하는 key를 입력한 뒤, 변수를 선언하듯 ' = 값'을 적어 주기만 하면 된다.

Dot Notation이나 Bracket Notation을 모두 이용할 수 있지만 위에 적힌 규칙들을 반드시 따라야 한다.

위 코드에서는 song 객체에 album = 'Origin of Symmetry', genre : 'Progressive Rock' 프로퍼티를 추가한 것이다.

 

삭제는 프로퍼티 추가에 딱 하나만 더 넣으면 된다. 바로 delete 명령어인데, delete 명령어 뒤에 기존에 존재하는 프로퍼티의 key를 입력하면 삭제가 된다. 역시 Dot Notation이나 Bracket Notation을 모두 이용할 수 있다.

 

D. Key와 value 가져오기

객체의 key와 value를 각각 가져와 배열 형태로 나타낼 수 있다. Object 객체의 keys, values, entries 메서드를 입력하면 객체의 key, value, property를 배열 형태로 가져올 수 있다.

 

let setList = {
  metallica : "orion",
  ratm : "know your enemy",
  slipknot : "people=Shit",
  greenday : "welcome to paradise"
}

console.log(Object.keys(setList))
//result = ['metallica', 'ratm', 'slipknot', 'greenday']
console.log(Object.values(setList))
//result = ['orion', 'know your enemy', 'people=Shit', 'welcome to paradise']
console.log(Object.entries(setList))
//result = [['metallica', 'orion'],
//['ratm', 'know your enemy'],
//['slipknot', 'people=Shit'],
//['greenday', 'welcome to paradise']]

 

Object 객체를 이용하지 않고 반복문을 통해 key나 value들을 가져오는 방법도 있다.

 

let setList = {
  metallica : "orion",
  ratm : "know your enemy",
  slipknot : "people=Shit",
  greenday : "welcome to paradise"
}
let keyArr = []
let valArr = [] 

for(let i in setList){
  keyArr.push(i)
  valArr.push(setList[i])
}

console.log(keyArr)
//result = ['metallica', 'ratm', 'slipknot', 'greenday']
console.log(valArr)
//result = ['orion', 'know your enemy', 'people=Shit', 'welcome to paradise']

 

for ~ in 반복문은 어떠한 객체의 프로퍼티에 접근할 수 있는 반복문이다. 엄밀히 말하면 key 값에만 접근 가능하지만 key를 알면 Bracket Notation을 통해 value도 알 수 있으므로 value 역시 알 수 있다.

반복문 내에서 쓰이는 변수는 개념을 이해하기 편하게 i 라고 지정해 두었다.

이때의 i는 객체 setList의 key들을 순서대로 나타낸다.  

 

for(let i in setList){
  console.log(i)
}
//result = 
//metallica
//ratm
//slipknot
//greenday

 

따라서 i = key 를 keyArr에 넣고, setList[i] = value를 valArray에 넣어주면 key와 value를 구할 수 있다.

 

 

오늘은 그동안 매우 어려워했던 객체에 대해 공부 해 보았다.

코딩 테스트 공부를 하면서 객체 문제를 만나면 뇌정지가 심하게 왔었는데,.,..,,.이제는 그래도 한번 정신을 차릴 수 있을 것 같다는 생각이 들었다.

다음 내용도 파이팅!