class

클래스는 객체를 설계하는 틀이다. 틀을 짜고 비슷한 모양의 객체를 찍어낼 수 있다. 이 때 객체는 특정 로직을 갖는 method와 멤버 변수(변경 가능한 상태)를 갖는다.

먼저, 객체의 property 값에는 함수를 할당할 수 있다는 것을 기억하자.

let macBook = {  
  name: 'macBook',  
  getName: function() {  
    return this.name;  
  }
}
//함수 호출
const rayNameByFunction = ray.getName();
console.log(rayNameByFunction); //"macBook"

이번엔 클래스를 생성해보자. 객체와의 가장 큰 차이는 constructor()생성자 함수다. 클래스는 새로운 instance를 형성할 때 마다 constructor() 메서드를 호출한다.

// 객체는 ,로 구분하지만 class는 구분하지 않는다
//class 이름은 항상 대문자로 시작하고 CamelCase로 작성
class Laptop {
  //멤버변수 : name,price 같이 변경 가능한 상태값이자 class 내 어느 곳에서나 사용(this로 접근)
  constructor(name, price) {
    this.name = name;
    this.price = price;
    this.salesAmount = 0;
  }

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

클래스 객체를 통해 인스턴스를 생성해보자. class이름에 new를 붙여 생성한다.

const macBook = new Laptop('macBook', 2000000); 

console.log(macBook);
/*
{
  name: "macBook",
  price: 2000000,
  salesAmount: 0
}
*/
console.log(macBook.name); //"macBook"
console.log(macBook.price); //2000000

객체의 반복문

Object.keys()

Object.keys method는 어떤 객체가 가지고 있는 키들의 목록을 배열로 리턴한다. 객체의 내장 메소드가 아니라 객체 생성자인 Object가 직접 가지고 있는 메소드기 때문에 객체.keys()가 아닌 Object.keys()로 사용해야 한다.

const obj = {
  name: 'macBook',
  price: 2000000,
  madeYear: 2021
}

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

이렇게 만든 배열에 반복문을 사용하면 된다.

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

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

Object.values & Object.entries

• Object.values : 객체의 키가 아닌 값으로 이루어진 배열을 리턴
• Object.entries : 객체의 키와 값의 쌍으로 이루어진 길이 2짜리 배열로 이루어진, 배열을 리턴

const values = Object.values(obj)
// values === ["macBook", 2000000, 2021]
const entries = Object.entries(obj)
/*
entries === [
  ['name', 'macBook'],
  ['price', 2000000],
  ['madeYear', 2021],
]
*/

for in

for-in 문은 배열뿐 아니라 객체에서도 작동한다.

const obj = {
  name: 'macBook',
  price: 2000000,
  madeYear: 2021
}

for (let key in obj) {
  const value = obj[key]
  
  console.log(key)
  /*
  "name"
  "macBook"
  "price"
  */
  console.log(value)
  /*
  2000000
  "madeYear"
  2021
  */
}

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을 가져야 합니다.

[풀이]

const getExamResult = (scores, requiredClasses) => {
  const changeScore = {
    "A+": 4.5,
    "A": 4,
    "B+": 3.5,
    "B": 3,
    "C+": 2.5,
    "C": 2,
    "D+": 1.5,
    "D": 1,
    "F": 0
  }
  //scores의 key(과목명)을 순회하며 scores[key](알파벳표기점수)를 changeScore의 value로 수정 
  for(let key in scores) {
    scores[key] = changeScore[scores[key]]
  }
  //requiredClasses의 과목 중 scores에 없는 과목을 추가하고 점수는 0으로
  //배열을 순회하며
  for (let i in requiredClasses) {
    //scores의 key 중 requiredClasses 배열의 요소와 같은 key가 없다면 추가 
    if (scores[requiredClasses[i]] === undefined) {
      //value값은 0으로
      scores[requiredClasses[i]] = 0
    } 
  }
  return scores
}

template literals

원래 String을 작성할 때 '' ""를 사용했다. 이제는 back tick으로도 string을 감쌀 수 있고, 그 안에 변수를 넣어서 표현할 수도 있다.

const hi = '안녕하세요. 저는 ' + name + ' 입니다.';
//위의 표현은 back tick으로 아래와 같이 표현한다. 
const hi = `안녕하세요. 저는 ${name} 입니다.`;

// back tick을 쓰면 개행도 가능하다.
const hi = `안녕하세요. 
저는
${name} 입니다.`;

string method

indexOf 대신 사용할 수 있는 method를 알아보자.

• startsWith
• endsWith
• includes

const hi = '안녕하세요, 안다빈 입니다';

console.log(hi.startsWith('안녕')); //true
console.log(hi.endsWith('니다')); //true
console.log(hi.includes('안다')); //true

• repeat : 특정 문자열을 반복

let hungry = '삼겹살먹고싶다'.repeat(3);
console.log(hungry)
//"삼겹살먹고싶다삼겹살먹고싶다삼겹살먹고싶다"

• .split : 문자열을 분할

let month = "Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec"
let monthSplit = month.split(',')
console.log(monthSplit)
//["Jan", " Feb", " Mar", " Apr", " May", " Jun", " Jul", " Aug", " Sep", " Oct", " Nov", " Dec"]

handleEdit

[문제]

• 이 함수는 nickname, interests 라는 두 string을 인자로 받습니다.
• interests 에는 여러 관심사를 적을 수 있습니다. 그 때 그 관심사의 구분을 콤마(,)를 이용합니다.
• 아래와 같은 Object를 리턴하도록 구현해 주세요.
• interests 를 적을 때 콤마(,) 뒤에 스페이스는 지워주세요.

{
	nickname: "뚜비",
	interests: ["방탈출","테니스","멍 때리기"],
	bio: "제 닉네임은 뚜비입니다. 취미는 방탈출,테니스,멍 때리기입니다."
}

[풀이]

//nickname interests string을 인자로 받는 화살표 함수
const handleEdit = (nickname, interests) => {
  //interests는 쉼표를 기준으로 분할해 배열로 반환
  //back tick 사용해서 문자열 합칠 때 + 쓰지 않기!
  return {nickname: nickname, interests: interests.split(','), bio: `제 닉네임은 ${nickname}입니다. 취미는 ${interests}입니다.`}
}