Javascript _ Object

Object(객체)는 아래와 같은 형태를 지닌 data type을 말하며, Array와 다르게 내부의 요소들에 정해진 순서가 없다. (용이한 데이터 관리와 깔끔한 코드를 위해 활용)

var 객체명 = {
   property(key)1 : value1,
   property(key)2 : value2,
   property(key)3 : value3
}

Object는 활용할 때 지켜야하는 몇 가지 조건이 있다.

• property 이름은 중복될 수 없다.
• property 이름(key)과 property 값(value) 사이는 : (콜론)으로 구분한다.
• property를 추가할 때는 , (쉼표)를 붙여준다.
• property 값은 어느 type이나 가능하다(string, number, array, object, function..)
• property 이름에는 스페이스('my name'), 특수문자(!key), 숫자 등이 들어갈 수 있으며, 그 경우 따옴표('')로 감싸서 표현해야 한다.

특정 object가 선언되었다면, Object 내의 각 property 값에는 어떻게 접근할 수 있을까?

• 객체명.property1
  마침표를 활용하면 조금 더 쉽게 코드를 작성할 수 있지만, 사용할 수 없는 경우가 있다.

• 객체명["property1"]
  property 값(value)과 동일한 변수명을 활용하여 접근할 경우
  property 이름(key)에 숫자, 스페이스나 특수문자가 들어갈 경우
  등 위와 같은 경우에서는 대괄호를 사용하여 object의 key 값에 접근해야 한다.

객체에서는 재선언을 통해 키 값을 변경할 수 있고, 새로운 키와 값을 추가할 수도 있다.
또한 배열의 for문이나 map() 메소드처럼, 객체에도 키를 순회할 수 있는 메소드가 2가지 있다.

• Object.keys(객체명)
  Object.keys() 메소드는 객체가 가지고 있는 모든 키를 모아 배열로 반환하는 메소드이다. 이와 비슷하게 객체가 가지고 있는 키 값을 배열로 반환하는 Object.values() 그리고 객체의 키와 값을 배열 내 배열의 형태로 반환하는 Object.entries()까지 다양한 메소드가 있다.

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

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

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

const entries = Object.entries(obj)
/*
entries === [
  ['name', 'melon'],
  ['weight', 4350],
  ['price', 16500],
  ['isFresh', true]
]
*/

• for-in
  for-in은 for문과 비슷한 종류의 반복문이며, 객체와 배열에 모두 활용할 수 있다. for-in 문은 인덱스의 값으로 무엇을 할당하고 반복문이 몇번 돌아야 할 지 자바스크립트 엔진 내부에서 자동으로 결정한다.

for문)

const arr = ['coconut', 'banana', 'pepper', 'coriander']

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

for-in문)

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

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)
}

---

Question

아래 설명을 읽고 getExamResult 함수를 구현하세요

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

scores 객체의 예시)

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

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

requiredClasses 배열의 예시)

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

• 다음 조건을 만족하는 객체를 리턴하도록 함수를 구현해주세요.
• scores 객체가 가지고 있는 키들은 새로운 객체에 포함되어야 합니다.
  단, 그 값들은 다음 원리에 따라 숫자로 바뀌어 할당되어야 합니다.

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

• requiredClasses 배열의 요소로는 존재하지만, scores의 키로는 존재하지 않는 항목이 있다면, 해당 요소는 새로운 객체의 키가 되고, 값으로 0을 가져야 합니다.
• 요소간 순서는 다를수 있지만, 채점에 무관합니다.

Answer

const getExamResult = (scores, requiredClasses) => {
  let result = {};

  let obj = {
    'A+': 4.5,
    'A': 4,
    'B+': 3.5,
    'B': 3,
    'C+': 2.5,
    'C': 2,
    'D+': 1.5,
    'D': 1,
    'F': 0
  }

  for (let i in requiredClasses){
    let key = requiredClasses[i];
    result[key] = 0;
  };

  let scoreKey = Object.keys(scores);
  for (let i in scoreKey){
    let key2 = scoreKey[i];
    let grade = scores[key2];
    result[key2] = obj[grade];
  };

  return result;
}

문제를 풀면서 고전했던 구간

1. 코드 작성 순서
result라고 명명한 빈 객체에 scores 객체의 요소들을 먼저 추가해야한다고 생각했는데, value가 정해진 키에도 값이 0으로 할당되는 문제가 발생했다. JS Bin에서 코드 내에 각각 console.log를 포함하여 찍어보니, 값이 재할당되면서 생기는 문제인 것으로 판단되었다. requiredClasses의 키값이 나중에 부여되면서, 0 이외의 값이 이미 있는 키에도 value가 0으로 재할당 되어 생기는 문제였던 듯. 그래서 requiredClasses의 키를 먼저 추가하니 문제 해결.

2. 점수를 알파벳에서 숫자 형태로 변경하는 방법
if문을 활용하여 점수를 알파벳에서 숫자로 변경하는 함수를 작성하였다가 자꾸 오류가 나서 검색해보니 별도의 객체를 만들어 사용하는 방법이 있었다. if문보다 훨씬 코드가 간결해짐.

3. 배열과 객체 요소 접근 방법
변수에 값을 저장할 때 활용해야 하는 배열 & 객체 요소의 접근 방법이 많이 헷갈렸다. 더 많이 연습해야 할 듯.

---

추가 Information _ class

class는 객체지향 프로그래밍의 핵심으로, 원하는 구조의 객체 틀을 짜놓고 비슷한 형태의 객체를 계속적으로 만들어낼 수 있는 개념이다. class를 통해 객체를 생성하는 과정을 '인스턴스화'라고 부르고, 그로 인해 생성된 객체를 '인스턴스'라고 부른다.

class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
}

• class의 이름은 언제나 대문자로 시작한다.
• class의 인스턴스를 생성할 때마다 constructor() 메서드가 호출된다.
• constructor() 메서드에 this 키워드를 사용했는데, class의 실행범위에서 this 는 해당 instance를 의미한다.

class의 인스턴스는 아래와 같이 생성할 수 있다.

const morning = new Car('Morning', 20000000);

• 인스턴스는 class 이름 앞에 new를 붙여 생성한다.
• 괄호 내에는 constructor() 내에서 필요한 인자를 넘겨준다.

또한 class 내에는 메서드를 추가할 수 있으며, 객체와 달리 콤마로 구분할 필요가 없다.

class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
    this.department = "선릉지점";
  }

  applyDiscount(discount) {  
    return this.price * discount;   
  }

  changeDepartment(departmentName) {
    this.department = departmentName;
  }
}