🙋 목표: 자바스크립트 기초를 공부하고 부족한 부분을 채우자.

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

---

🙌우리가 객체에서 키를 사용하는 방법은 여러가지가 있는데 다음과 같은 방법을 이용하면 객체의 특정 키 값을 가져오는것도 가능하고, 반대로 객체의 특정 키를 만들고 값을 할당하는 것도 가능하다.

const info = {
	name: '김과장'
}

• 키와 값을 변수를 통해 받아오려면 어떻게 해야할까?

const info = {
	name: '김과장'
}

//방법1
const verb = 'develope'
const project = 'instagram'
info[verb] = project //develope: "instagram"

//방법2
info.developes = 'instagram' //develope: "instagram"

위 두 줄의 코드의 차이점은 무엇일까?

두 가지 모두 적용이 가능하지만 윗줄은 변수가 가지는 값에 따라서 유동적으로 다른 프로퍼티를 가질 수 있다는 것이다.

2. 객체 순회하기❓

---

객체는 기본적으로 순서가 없다. 그리고 키를 통해서만 접근이 가능하다.

하지만 여러가지 이유로 객체에 있는 모든 키에 한번씩 접근을 해야하는 코드를 써야한다면 어떻게 해야할까? 다행스럽게도 객체도 배열처럼 순회가 가능하다.

다만, 배열과 다르게 명확하게 정해진 순서는 없기 때문에, 어떤 순서에 따라서 객체의 키에 접근하게 될 지는 알 수 없다. 그래서 객체 순회라는 말은 '순서가 보장되지 않는 순회' 라고 할 수 있다.

우리가 배열에서 배열을 순회할 때는 for 문을 사용했는데 코드를 한 번 확인해 보자.

const arr = ['🚀', '🎯', '🚒', '🐷']
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i])
}

반복문이 배열에서 length 라는 키를 가지고 있고, index를 통한 접근도 가능했기 때문에 배열 순회가 가능한 것이다.

객체는 length 라는 키가 없다. index도 없기 때문에 이런식의 반복문은 불가하다. 대신에 다른 방법이 있다. 이것으로 반복문 작성을 하는 것이다.

3. object.keys()

---

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

const obj = {
	name: 'kim',
  age: 29,
	price: NaN,
  gender: 'man'
}

Object.keys(obj) //["name", "age", "price", "gender"]

위와 같이 출력이 되면 이걸로 우리가 반복문을 사용할 수 있다.

const keys = Object.keys(obj) //["name", "age", "price", "gender"]

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

• 새로운 ES6 문법에서는 Object.keys 이외에도 Object 생성자의 메소드인 Object.values, Object.entries 와 같은 것들이 추가되었다. Object.values는 객체의 키가 아닌 값으로 이루어진 배열을 return 한다.

const obj = {
	name: 'kim',
  age: 29,
	price: NaN,
  gender: 'man'
}

Object.values(obj) //["kim", 29, NaN, "man"]

• Object.entries 는 객체의 키와 값의 쌍으로 이루어진 길이 2짜리 배열로 이루어진, 배열을 리턴한다.

const obj = {
	name: 'kim',
  age: 29,
	price: NaN,
  gender: 'man'
}

console.log(Object.entries(obj)); //(4) [Array(2), Array(2), Array(2), Array(2)]

• 맥락정리) Object.keys, Object.values, Object.entries 세가지 중에서 제일 유용하게 쓰인다. 꼭 알아두자🚀

4. for-in

---

객체를 순회하는 두번째 방법으로는 for-in 문이 있다. 반복문은 for 문과 같은 종류의 문법이긴 하지만, 객체와 배열을 위해 특별하게 존재하는 ES6에 추가된 문법이다. for-in 은 객체 순회 이외와에도, 일반적인 배열을 순회할 때도 아주 주용하다.

const arrs = ['coconut', 'banana', 'pepper', 'coriander']
 
for (let i = 0; i < arrs.length; i ++) {
  console.log(i)
  console.log(arrs[i])
}

• 위 코드를 간단하게 축양하면?

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

이런식으로 객체를 가지고 for-in 문을 사용하면, i 를 0으로 초기화하고, 배열의 길이와 비교하고 i 를 1씩 증가시키는 등의 코드를 생략할 수 있다. 이것은 반복문이 몇 번 돌아야 할 지를 자바스크립트 엔진 내부에서 자동으로 결정하게 된다.

for-in 문은 배열뿐만 아니라 객체에서도 작동하는데

const obj = {
	name: 'kim',
  age: 29,
	price: NaN,
  gender: 'man'
}

for (let key in obj) {
  const value = obj[key]
 
  console.log(key)
  console.log(value)
}

이런식으로 객체를 가지고 for-in 문을 사용하면, for-in 문의 index에 해당하는 변수가 숫자가 아닌 객체중 각각의 키에 해당하는 문자열을 할당받게 된다.

5. Assignment

---

아래 설명을 읽고 getExamResult 함수를 구현하자.

인자 scores 는 다음과 같은 객체이다.. 객체의 요소의 갯수 및 키의 이름들은 달라질 수 있다. 객체의 값은 다음 9가지 문자열 중에서 하나를 가지고 있다.

• 'A+', 'A', 'B+', 'B', 'C+', 'C', 'D+', 'D', 'F'

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

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

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

다음 조건을 만족하는 객체를 리턴하도록 함수를 구현하자.

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

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

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

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

   const getExamResult = (scores, requiredClasses) => {
       const result = {};
       const list = {
           "A+":4.5,
           "A":4,
           "B+":3.5,
           "B":3,
           "C+":2.5,
           "C":2,
           "D+":1.5,
           "D":1,
           "F":0    
         }
       for(let key in scores){
           result[key] = list[scores[key]];
       }
       const keys = Object.keys(result)
       for(let i in requiredClasses) {
           if(!keys.includes(requiredClasses[i])) {
           result[requiredClasses[i]] = 0;
       }
     }
       return result;
     }