[JS] 객체(object)이해하기2

devCecy·2020년 11월 23일

JavaScript

목록 보기

13/14

1. 객체의 키를 변수로 접근하기

객체의 특정 키의 값을 가져오는것도 가능하지만, 반대로 객체에 특정 키를 만들고 값을 할당하는것도 가능하다.

information이라는 객체를 먼저 하나 만들고,

const information = {
  name: '김개발'
}

여기에 키와 값을 만들어주고,

const verb = 'developes'  //키
const project = 'facebook'  //값

verb의 값을 키로, project의 값을 그 키의 값으로 할당해준다.
[A],[B]방법 모두 할당이 가능하다.
[A]의 경우 verb와 project가 어떤 값을 가지냐에 따라 다른 키와 값을 가지게되지만, [B]의 경우는 키와 값이 항상 정해져 있게 된다.

information[verb] = project // [A]
information.developes = 'facebook' // [B]

2. 객체 순회하기

객체도 배열과 같이 순회가 가능하다. 그러나, 배열과는 다르게 명확한 순서가 없기 때문에, 어떤 순서로 객체의 키 값에 접근하게되는지는 알 수 없다. 따라서, 객체의 순회는 "순서가 보장되지 않은 순회" 라고 부른다.

배열 순회시에는 for문을 이용했으나, 객체는 length 키가 따로 주어져있지 않고, 인덱스도 없기 때문에 for문을 이용한 순회는 불가능하다. 대신, 다음의 2가지 방법으로 객체를 순회할 수 있다.

2-1) Object.keys()

Object.keys 메소드는 어떤 객체가 가지고 있는 키들의 목록을 배열로 리턴하는 메소드이다. 더불어, 객체의 내장 메소드가 아니라 객체 생성자인 Object가 직접 가지고 있는 메소드다.

object.keys()의 사용방법을 보자.

const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}

Object.keys(obj) // ['name', 'weight', 'price', 'isFresh']

Object.keys()는 배열을 리턴하기 때문에, 이제 반복문을 사용할 수 있게된다!

const keys = Object.keys(obj) // ['name', 'weight', 'price', 'isFresh']

for (let i = 0; i < keys.length; i++) {
  const key = keys[i] // 각각의 키
  const value = obj[key] // 각각의 키에 해당하는 각각의 값

  console.log(value)
}

새로운 ES6 문법에서 Object생성자의 메소드인 Object.values, Object.entries와 같은 자매품들이 추가되었다.

2-2) Object.values()

Object.values는 객체의 키가 아닌 값으로 이루어진 배열을 리턴한다.

const values = Object.values(obj)
// values === ['melon', 4350, 16500, true]

2-3) Object.entries()

Object.entries는 객체의 키와 값의 쌍으로 이루어진 길이 2짜리 배열로 이루어진, 배열을 리턴한다. 각 배열에서 인덱스 [0]의 값은 각각의 키를, 인덱스 [1]의 값은 해당 키에 해당하는 값을 가지게 된다.

const entries = Object.entries(obj)

/*
entries === [
  ['name', 'melon'],
  ['weight', 4350],
  ['price', 16500],
  ['isFresh', true]
]
*/

2-4) for-in

for-in 문은 반복문인 for문과 같은 종류의 문법이며, 객체와 배열에서 모두 사용가능하다.

//for 문을 사용한 반복문 
const arr = ['coconut', 'banana', 'pepper', 'coriander']

for (let i = 0; i < arr.length; i ++) {
  console.log(i)
  console.log(arr[i])
}

// for-in 문을 사용한 반복문 
const arr = ['coconut', 'banana', 'pepper', 'coriander']

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

i를 0으로 초기화하고, 배열의 길이와 비교하고, i를 1씩 증가시키는 등의 코드를 생략할수 있게 만든 ES6 문법으로, for-in 문은 인덱스의 값으로 무엇을 할당하고, 반복문이 몇번 돌아야 할 지를 자바스크립트 엔진 내부에서 자동 결정한다.

//for-in문을 사용한 객체 순회
const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}

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

  console.log(key)
  console.log(value)
}

이렇게 객체를 가지고 for-in 문을 사용하면, for-in 문의 인덱스에 해당하는 변수가, 숫자가 아닌 객체의 각각의 키에 해당하는 문자열을 할당받게 됩니다.??

3. Assignment

getExamResult 함수를 구현해주세요.
인자 scores 는 다음과 같은 객체입니다.객체의 요소의 갯수 및 키의 이름들은 달라질 수 있습니다.객체의 값은 다음 9가지 문자열 중에서 하나를 가지고 있습니다.
('A+', 'A', 'B+', 'B', 'C+', 'C', 'D+', 'D', 'F')

{
  '생활속의회계': 'C',
  '논리적글쓰기': 'B',
  '독일문화의이해': 'B+',
  '기초수학': 'D+',
  '영어회화': 'C+',
  '인지발달심리학': 'A+',
}

인자 requiredClasses 는 다음과 같이 문자열로 된 배열입니다.

['영어회화', '기초수학', '공학수학', '컴퓨터과학개론']

다음 조건을 만족하는 객체를 리턴하도록 함수를 구현해주세요

scores 객체가 가지고 있는 키들은 새로운 객체에 포함되어야 합니다.
단, 그 값들은 다음 원리에 따라 숫자로 바뀌어 할당되어야 합니다.

A+ => 4.5
A => 4
B+ => 3.5
B => 3
C+ => 2.5
C => 2
D+ => 1.5
D => 1
F => 0

2.requiredClass 배열의 요소로는 존재하지만, scores의 키로는 존재하지 않는 항목이 있다면,해당 요소는 새로운 객체의 키가 되고, 값으로 0을 가져야 합니다.위에서 예시로 묘사된 객체와 배열이 인자로 들어왔다면,
다음과 같은 객체과 리턴됩니다.

{
  '생활속의회계': 2,
  '논리적글쓰기': 3,
  '독일문화의이해': 3.5,
  '기초수학': 1.5,
  '영어회화': 2.5,
  '인지발달심리학': 4.5,
  '공학수학': 0,
  '컴퓨터과학개론': 0,
}

3-1) 완료 코드

풀이과정

최종 결과값을 넣어줄 빈 객체result를 만들고,
A,B,C..학점을 키값으로, 1,2,3..학점을 벨류값으로하는 객체를 만든다.
먼저, requiredClasses을 for in으로 반복문을 돌려 key값을 얻고, value 값은 0으로 만들어 아까 만들어둔 result 객체에 넣는다.
여기까지하면,

result = {
영어회화 : 0,
기초수학 : 0,
공학수학 : 0,
컴퓨터학개론 : 0
}

이다.

-scores를 for in 반복문을 돌려 반환될 키값을 obj라는 변수에 담아준다.

- (가장 중요한 부분!!!)

여기서 obj 값은
'C'
'B'
'B+'
'D+'
'C+'
'A+'
이고,

score의 값은,
'생활속의회계'
'논리적글쓰기'
'독일문화의이해'
'기초수학'
'영어회화'
'인지발달심리학'
이다.

result객체 안에 score값을 키값으로 넣어주면, 일단, result의 키값과 score의 값이 겹치는 경우 그 값의 키값은 undifined가 될것이고, 겹치지 않는 경우 score의 값이 result에 새로 추가될 것이다.

-그렇게 만들어진 result[score]는 numToString[obj]로 할당이 되는데, numToString[obj]는 munToString의 키값과 obj의 값이 겹칠 경우, munToString의 value값인 숫자를 얻게된다.

즉, result[score]가 키값으로 numToString[obj]를 갖게된다!!

const scores = {
  '생활속의회계': 'C',
  '논리적글쓰기': 'B',
  '독일문화의이해': 'B+',
  '기초수학': 'D+',
  '영어회화': 'C+',
  '인지발달심리학': 'A+',
};

const requiredClasses = ['영어회화', '기초수학', '공학수학', '컴퓨터과학개론'];


const getExamResult = (scores, requiredClasses) => {
  const result = {}
  const numToString = {
    'A+':4.5,
    'A':4,
    'B+':3.5,
    'B':3,
    'C+':2.5,
    'C':2,
    'D+':1.5,
    'D':1,
    'F':0
  }
   for (let requiredClass in requiredClasses) {
    const key = requiredClasses[requiredClass];
    result[key] = 0;
  }
  for (let score in scores){
    const obj = scores[score];
    result[score] = numToString[obj];
  }
  return result
}

getExamResult(scores, requiredClasses)

/*
{
  '영어회화': 2.5,
  '기초수학': 1.5,
  '공학수학': 0,
  '컴퓨터과학개론': 0,
  '생활속의회계': 2,
  '논리적글쓰기': 3,
  '독일문화의이해': 3.5,
  '인지발달심리학': 4.5
}*/