TIL :: JavaScript / replit. 25~30

⁍25. Class

◉ Class 

클래스는 객체지향 프로그래밍의 핵심입니다.

객체지향 프로그래밍이란, 프로그램을 객체들로 구성하고, 객체들 간에 서로 상호 작용 하도록 작성하는 방법입니다.

네, 설명이 조금 어려운데요.

JavaScript는 객체지향 중심에 있는 언어는 아니지만 프로그래밍에 있어서 Class, 객체, 객체지향은 항상 중요한 주제입니다.

'객체지향 프로그래밍' 이라는 단어에서 '객체'는 앞서 배웠던 { num: 1 } 의 데이터 타입을 말하는 것은 아닙니다.

객체는 영어로 object, 말그대로 사물을 뜻합니다.

하지만, 클래스는 결국 { num: 1 } 처럼 생긴 객체(object)를 잘 설계하기 위한 틀은 맞습니다.

그런데 이 때의 객체는 특정 로직을 갖고 있는 행동(method)와 변경 가능한 상태(멤버 변수)를 가집니다.

원하는 구조의 객체 틀을 짜놓고, 비슷한 모양의 객체를 공장처럼 찍어낼 수 있습니다.

객체를 매번 만들어서 사용해도 좋지만, 큰 큐모의 객체 이거나 비슷한 모양의 객체를 계속 만들어야 한다면,

class라는 설계도를 통해 만들 수 있습니다.

CSS의 class와 전혀 다른 개념이니 유의해 주세요!

먼저, 'ray' 차를 객체로 정의해보겠습니다.

ray 라는 객체는 5개의 프로퍼티를 갖고 있습니다.

각 프로퍼티 이름은 아래와 같습니다.

• name
• price
• getName
• getPrice
• applyDiscount

let ray = {  
  name: 'Ray',  
  price: 2000000,   
  getName: function() {  
    return this.name;  
  },   
  getPrice: function() {  
    return this.price;  
  },   
  applyDiscount: function(discount) {  
    return this.price * discount;   
  } 
}

조금 생소한 표현이 있네요.

프로퍼티 값에 함수가 할당되었습니다.

네!! 이렇게 객체의 프로퍼티 값에는 함수도 넣을 수 있습니다.

위에서 getPrice 라는 함수는 다음과 같이 호출할 수 있습니다.

const rayPriceByFunction = ray.getPrice();
console.log('함수로 접근 => ' +rayPriceByFunction);

객체 내부에서, 해당 객체의 프로퍼티에 접근하려면 "this"라는 키워드를 사용할 수 있습니다.

그래서 getPrice 메서드에서 this.price 로 price 키에 접근할 수 있었고,

2000000 값을 갖고 올 수 있습니다.

위의 코드가 차 영업점에서 쓰는 앱서비스에서 사용된다고 생각해보겠습니다.

새로운 차가 출시되어 객체를 추가해야 하는데,

프로퍼티는 똑같이 구성되어야 합니다.

이럴 때, 차마다 객체를 늘려나가서 코드가 길어지는 것이 아니라,

필요한 정보를 담은 Car라는 *클래스(class)*를 생성하여 관리할 수 있습니다.

index.js 22번째 줄에 Morning이라는 차를 어떻게 등록할 수 있는지 작성했습니다.

Run을 돌려 어떤 값이 나오는지 확인해보세요.

 

◉ 생성자(Constructor) 

객체(object)의 설계도인 클래스(class)는 문법이 비슷합니다.

둘의 가장 큰 차이는 constructor 라는 생성자 함수입니다.

39번째 줄에 class를 통해 객체를 생성했습니다.

아래와 같이 class로 객체를 생성하는 과정을 '인스턴스화'라고 부릅니다.

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

class를 통해 생성된 객체를 인스턴스 라고 부릅니다.

class는 새로운 instance를 생성할 때마다 constructor() 메서드를 호출합니다.

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

• Car는 class이름입니다. 항상 대문자로 시작하고, CamelCase로 작성해야 합니다.
• Car class의 instance를 생성할때마다 constructor 메서드가 호출됩니다.
• constructor() 메서드는 name, price 2개의 argument(인자)를 받습니다.
• constructor() 메서드에 this 키워드를 사용했습니다. class의 실행범위(context)에서 this 는 해당 instance를 의미합니다.
• constructor() 에서 인자로 넘어오는 name과 price를 사용해 Car instance의 name, price 프로퍼티에 값을 할당했습니다.
• 이렇게 클래스 내에서 name, price와 같이 변경 가능한 상태값이자 class내의 컨텍스트에서 어느 곳에서나 사용할 수 있는 변수를 '멤버 변수'라고 부릅니다.
• 멤버 변수는 this 키워드로 접근합니다.

 

◉ 인스턴스(Instance) 

위에서 class instance를 생성했습니다.

인스턴스(Instance)는 class를 통해 생성된 객체입니다.

인스턴스는 class의 property이름과 method를 갖는 객체입니다.

인스턴스 마다 모두 다른 프로퍼티 값을 갖고 있습니다.

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

• 인스턴스는 Class 이름에 new 를 붙여서 생성합니다.
• 클래스 이름 우측에 () 괄호를 열고 닫고, 내부에는 constructor 에서 필요한 정보를 인자로 넘겨줍니다.
• Car클래스의 instance를 morning 이라는 변수에 저장했습니다.
• 다시 한 번! Car 클래스의 새로운 instance를 생성하려면 new 키워드가 필요합니다. new 키워드는 constructor() 메서드를 호출하고 새로운 instance를 return해줍니다.
• 'Morning'이라는 String과 2000000 이라는 Number를 Car 생성자에 넘겨주었고, name, price 프로퍼티에 각자의 값이 할당되었습니다.

새로운 차를 등록해 봅시다.

const spaceship = new Car('우주선', 25000000);
console.log(spaceship);
console.log(spaceship.name); 
console.log(spaceship.price); 
console.log(spaceship.applyDiscount(0.5));

 

◉ 메서드(Methods)

메서드는 함수입니다.

그런데 객체가 프로퍼티 값으로 갖고 있는 것을 메서드라고 부릅니다.

Class의 method는 Object(객체)의 문법과 똑같습니다.

다만 객체는 프로퍼티마다 comma(,)로 구분해줘야 했지만, 클래스는 그렇지 않습니다.

Car 객체에 changeDepartment 메서드를 추가했습니다.

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

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

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

changeDepartment 메서드를 호출해보고 해당 인스턴스의 department 정보가 바뀌었는지 확인해 봅시다.

---

Assignment

class 생성을 연습해보겠습니다.

• MyMath 라는 class를 생성해주세요.
• constructor 에서는 숫자 2개를 인자로 받아 프로퍼티로 저장합니다.
• 총 4개의 메서드를 구현해주세요.
  • getNumber : 두 개의 숫자가 무엇인지 배열로 반환하는 메서드 → ex) [1, 2]
  • add : 두 개의 숫자를 더하는 메서드
  • substract : 두 개의 숫자를 빼는 메서드
  • multiply : 두 개의 숫자를 곱하는 메서드

class MyMath {
	constructor(num1, num2) {
    	this.num1 = num1;
        this.num2 = num2;
    }
    
    getNumber(){
      return [this.num1, this.num2];
}
    
    add() {
    	return this.num1 + this.num2;
    }
    
    subtract() {
    	return this.num1 - this.num2;
    }
    
     multiply() {
    	return this.num1 * this.num2;
    }
}

---

⁍26. Object -다시 :)

◉ Object 

객체는 다른 데이터 타입(텍스트, 숫자, 배열 등..)처럼 변수에 저장할 수 있습니다.

{} 만 사용하면 되는데요, 이렇게 {} 으로 생긴 모양의 객체를 object literal(객체 리터럴)이라고 부릅니다.

hello 라는 변수에 빈 객체를 할당하였습니다.

let hello = {};

객체는 순서가 없는 데이터의 모음입니다.

반대로 순서가 있는 데이터는 배열입니다.

let arr = ['고양이', '귀여워', '멍멍이', '좋아'];

arr 의 요소가 차례대로 추가된 것이고 index 는 0부터 시작합니다.

arr[0] 은 '고양이' 이고, arr[1] 은 '귀여워' 입니다.

객체는 키(key)-값(value) 쌍으로된 데이터의 모음으로써 순서가 뒤 바뀌어도 아무 상관이 없습니다. 배열처럼 순서대로 index 로 접근하는게 아니라 키로 접근하기 때문입니다.

key는 property name이라고도 하며, value는 property value라고도 말합니다.

이전 강의에서는 프로퍼티명, 프로퍼티값으로 불렀으니 이번에는 키, 값으로 부르겠습니다.

키는 마치 특정 값을 갖고 있는 변수같은 역할을 합니다. 해당 키로 프로퍼티에 어떤 값이 저장돼 있는지 알 수 있습니다.

키의 값에는 텍스트, 숫자 뿐만 아니라 함수, 객체도 넣을 수 있습니다.

let difficult = {
  'my name': 'boong',
  color: 'silver',
  키: '한글인 키는 따옴표가 없어도 되는군!!',
  '!키': '느낌표 있는 키는 따옴표가 필요하군',
  $special: '$는 없어도 되는군'
};

객체의 키에는 스페이스, 한글, 특수문자 등이 들어갈 수 있습니다. 변수(variable) 선언할 때는 할 수 없었던 표현입니다. color 와 같이 키에 특수문자가 없으면 따옴표를 생략하고 쓸 수 있습니다.

다양한 프로퍼티 명을 넣어보고 스크립트 오류가 없는지 확인해보세요.

 

◉ 프로퍼티 접근 

이전 강의 Assignment가 사실 더 어려웠습니다. 그 문제를 풀기 위해선 프로퍼티 접근에 익숙해야 했습니다.

이번 시간에 익숙해질 수 있도록 다시 한 번 훑어보겠습니다. 접근은 dot(.)으로 접근하는 방법과, [] 대괄호로 접근하는 법이 있었습니다.

let difficult = {
  33: '숫자 형식도 되네',
  'my name': '스페이스 포함 가능',
  color: 'silver',
  키: '한글인 키는 따옴표가 없어도 되는군!!',
  '!키': '느낌표 있는 키는 따옴표가 필요하군',
  $special: '$는 없어도 되는군'
};

console.log(difficult.color);

사실 키만 알고 있으면 dot(.)으로 접근하는 것이 제일 편합니다. dot(.)은 키로 바로 접근할 때 사용하는 것입니다. dot으로 접근할 때는 따옴표 없이 키를 바로 써줘야 합니다.

그런데 [] 대괄호로 접근할 수도 있었죠!

console.log(difficult['color']);

대괄호로 접근 하기 위해서는, 키 이름을 따옴표로 감싸서 작성해줘야 합니다.

한번 주석을 풀고 실행해보세요!

console.log(difficult.my name);

왠지 모르겠지만, 실행을 안 해봐도 오류가 날 것만 같습니다.

이렇게 스페이스가 포함된 키는 대괄호로 접근하면 됩니다.

console.log(difficult['my name']);

아래의 코드는 왠지 될 것 같지만 되지 않습니다.

console.log(difficult.33);

숫자로 된 키는 대괄호로 접근해야 합니다.

console.log(difficult['33']);

어떤 것은 dot(.)접근 가능, 어떤 것은 대괄호만 가능..

다 외워야 하나요? 아닙니다.

어차피 코딩할 때 잘 못 접근하면 오류가 뜨기 때문에 지금 모르셔도 괜찮습니다. 오류 뜨면 그 때 오류 메시지를 확인하고 수정하면 됩니다! 이렇게 다양한 형태로 키 이름을 지을 수 있다는 것만 알아주세요.

 

 

◉ 변수로 프로퍼티 접근하기

let name = '키';
console.log(difficult[name]);

변수에 키 이름이 저장되어있으면, 변수로도 프로퍼티에 접근 가능합니다.

이때 dot(.) 다음에 변수명을 넣어서 프로퍼티에 접근이 가능 할까요?

console.log(difficult.name);

직접 실행 해봅시다. 뭐라고 나오나요? undefined 입니다.

dot(.)으로 접근한다는 뜻은 실제 키이름을 쓸 때입니다.

'name' 이라는 키가 있었으면 그에 해당하는 프로퍼티에 접근할 수 있었겠지만, 존재하지 않기 때문에 undefined 가 나온것입니다. 변수로 접근할 때는 항상 대괄호로 접근해야 합니다.

 

 

◉ 프로퍼티 할당 

difficult[name] = '값 바꾼다';
console.log(difficult[name]);

difficult.color = '색깔';
console.log(difficult.color);

console.log('생성전: ' + difficult.new);
difficult.new = '새로 추가된 프로퍼티';
console.log('생성후: ' + difficult.new);

객체에 이미 키가 존재하는데, 다시 한 번 할당하면 값이 교체(수정)됩니다.

이전에 없던 키로 접근하면, 새로운 프로퍼티가 추가 됩니다.

아직 없던 키에 접근하면 프로퍼티를 추가할 준비는 되어있지만, 값이 없습니다

console.log(difficult.newProperty);

어떤 값이 나오나요? 네, undefined 입니다.

아직 difficult 라는 객체에 newProperty 프로퍼티가 없기 때문에 undefined 입니다. 아래는 없었던 키에 값을 바로 입력해서 프로퍼티를 추가하는 방법입니다.

difficult.realNewProperty = '추가 됐다';

객체의 특별한 점을 알려드리겠습니다.

객체를 const 로 선언했을 때 알쏭달쏭한 현상이 일어납니다.

const a = 1;
a = 2;

const 로 선언된 변수는 값을 절대 수정할 수 없었습니다. a = 2; 를 시도하면 자바스크립트 오류가 납니다.

그런데 const 로 선언된 변수에 객체를 다시 할당하면 오류가 생기지만, 그 객체에 프로퍼티를 추가하거나 수정하는 것은 가능합니다.

const mutableObj = {
  name: '객체'
};

mutableObj = {
   name: '수정'
}

변수 mutableObj 자체에 객체를 재 할당하는 것은 불가능 합니다. 실행해보면 자바스크립트 오류가 납니다.

mutableObj.name = '수정';
mutableObj.type = 'Object 타입';

그렇지만 프로퍼티에 접근해서 내용을 수정하거나, 프로퍼티를 추가하는 것은 에러가 나지 않습니다.

 

 

◉ Method (메서드) 

객체에 저장된 값이 함수일 때, 메서드라고 부릅니다.

console.log();

console.log() 도 형태를 보니 객체인가 봅니다. 자바스크립트 어디에나 접근이 가능 했으니 global 객체입니다. console 다음에 dot(.)으로 프로퍼티를 접근했고, log 라는 키의 값은 함수인 것 같습니다. log는 console 이라는 객체의 메서드입니다. 객체에 메서드를 정의하려면 아래와 같이 할 수 있습니다.

let methodObj = {
  do: function() {
    console.log('메서드 정의는 이렇게');
  }
}

호출 방법은 아래와 같습니다!

methodObj.do();

 

 

◉ 중첩된 객체 (Nested Object) 

실무에서 사용되는 객체는 거의 중첩되어 있습니다. 프로퍼티 값이 객체일 수도 있고, 프로퍼티 값인 배열의 요소가 객체일 수도 있습니다.

let nestedObj = {
	type: {
		year: '2019',
		'comment-type': [{
			name: 'simple'
		}]
	}
}

위에서 'simple' 을 출력하려면 어떻게 해야할까요?

console.log(nestedObj.type['comment-type'][0].name);

컴퓨터는 왼쪽에서 오른쪽으로 해석한 다는 것을 명심하고 이해해주세요.

항상 왼쪽에 직접 코드를 써야 한다는 것을 잊지 말아주세요!!

• nestedObj.type 는 year, comment-type 이 있는 객체입니다
• nestedObj.type['comment-type'] 는 요소 1개인 배열입니다.
• nestedObj.type['comment-type'][0] 첫 번째 요소인 객체를 가져옵니다.
• nestedObj.type['comment-type'][0].name 드디어 'simple'에 접근!

 

◉  객체는 reference로 저장된다.

조금 어려운 이야기를 시작하려고 합니다!

객체는 reference가 저장됩니다.. 음 무슨말일까요?

객체를 변수에 저장하면 객체 자체가 저장되는 것이 아니라 reference가 저장됩니다.

반대로, 텍스트는 변수에 저장하면 텍스트 자체가 저장됩니다. 그래서 서로 같은 텍스트를 비교연산 하면 서로 값이 같으므로 true 입니다.

const a = '안녕';
const b = '안녕';
console.log(a === b);

그런데 아래의 객체는 생긴 모양이 아예 똑같은데 false 라고 출력됩니다.

const hiObj = { 
  name: '안녕' 
};
const helloObj = {
  name: '안녕'
};
console.log('객체비교 =>', hiObj === helloObj);

그 이유는 객체는 변수에 저장할 때, 객체 자체를 그대로 저장하는 것이 아니기 때문입니다. 객체가 담긴 어느 메모리의 reference 를 저장하기 때문입니다.

hiObj 가 갖고 있는 진짜 값은 메모리 주소인 reference입니다. 하지만 hiObj 를 불러올 때 메모리 주소를 반환하는 것이 아니라, 해당 메모리에 저장된 데이터를 반환해 줍니다.

그래서 눈에 보이는 데이터는 똑같지만, hiObj 와 helloObj 가 갖고 있는 진짜 값은 다른 것입니다.

console.log('객체비교 =>', hiObj === helloObj);
console.log('객체값비교 =>', hiObj.name === helloObj.name);

그래서 객체를 담은 변수를 비교하면 서로 같지 않다고 나옵니다. 그러나 객체 내부의 프로퍼티 값이 텍스트일 경우는, 텍스트를 비교하게 되어 서로 같음 / 다름 여부를 판단할 수 있습니다.

다시 한 번 const 로 선언된 객체를 볼까요.

const mutableObj = {
  name: '객체'
};

mutableObj = {
   name: '수정'
}

mutableObj.name = '수정 됩니다!';

const 로 선언된 변수는 절대 값이 바뀌면 안 되는거 아시죠? 그래서 mutableObj 에 새로운 객체를 할당하면 오류가 납니다. 왜냐면 새로운 메모리 주소(reference)로 수정을 시도하기 때문이죠.

하지만 mutableObj.name 로 프로퍼티에 접근해서 수정할 수 있습니다. mutableObj 가 저장된 reference가 바뀌는 것이 아니라 객체 내부의 프로퍼티 값이 수정되는 것이라 수정이 되는 것이었 답니다....

이해가 안 되는 부분이 있다면 stackoverflow에 많이 물어봐주세요!

---

Assignment

getAnswer 함수를 구현해 주세요.

• getAnswer 함수는 아래의 객체에서 '샐러드' 라는 값을 출력합니다.
   

// Assignment
let myProfile = {
  name: '김개발',
  address: {
    email: 'geabal@gmail.com',
    home: '위워크'
  },
  'my favorite': {
    food: [{
      name: '샐러드',
      price: 3500
    }, {
      name: '삼겹살',
      price: 15000
    }],
    hobby: ['축구']
  }
}

// getAnswer 함수를 호출하면
// '샐러드'가 return 될 수 있도록 프로퍼티에 접근해서 반환해주세요.

function getAnswer() {
  let whereIsSalad = myProfile['my favorite']['food'][0]['name'];
  return whereIsSalad;
}

---

⁍27. [es6] arrow function

◉  ES6 = ECMA Script 2015

ES는 ECMA Script의 줄임말입니다. ECMA Script는 JavaScript를 표준화 시키려고 탄생했습니다.(ECMAScript (or ES) is a scripting-language specification standardized by Ecma International)

JavaScript의 역사는 점점 깊어지고, 문법의 보완이 필요하면서 버전별로 문법을 확장시키고 브라우저는 특정 버전의 기능별로 지원할 수 있도록 ES가 명세를 확정해왔습니다.

즉, ECMA Script는 JavaScript를 표준화시키고, 규격화하기 위해 만들어진 것입니다.

현재는 ES10 버전 까지 나왔습니다. 주로 쓰이는 것은 ES6인데, 6은 버전 이름이고 ES 2015라고도 합니다. 2015년에 ES6버전이 최종으로 나왔기 때문이죠. 1-2년 전만해도 ES6를 사용하는 사람이 많지 않았지만, 이제는 더이상 미룰 수 없을 만큼 많은 사람들이 쓰고 있습니다.

그리고 간편한 기능도 많이 생겨서 ES6를 많이 활용하면 좋습니다. 요즘 ES7를 사용하는 개발자들도 점차 들어나고 있습니다.

ES6에는 정말 편리한 함수들이 많이 생겼고, 처음보는 문법들도 많이 생겼습니다. 그래서 ES6를 사용하려면 공부가 필요합니다.

오늘 배울 것은 arrow function 입니다. 이 전에 배웠던 function을 표현하는 방법과 완전히 달라졌습니다. 그러나 생김새만 바뀐 것이니 너무 어렵게 생각하지 말아주세요.

//ES5
function() {}

//ES6
() => {}

이름이 없는 함수의 기본적인 표현입니다.

ES6에서는 function이라는 키워드가 빠지고 소괄호만 남았습니다.

그리고 => (arrow) 가 추가되었습니다.

이름이 있는 함수를 만들 때는 아래와 같습니다.

//ES5
function getName() {}

//ES6
const getName = () => {}

호출할 때는 둘 다 같습니다.

getName()

ES6는 함수를 getName 이라는 변수에 저장 했네요.

사실 function(함수)는 변수에 저장할 수 있는 하나의 식입니다.

그래서 ES5 일 때도 마찬가지로 변수에 저장할 수 있었습니다.

//ES5
//Function Declaration
function getName() {}

//ES5
//Function Expression
const getName = function() {}

쓰임새가 다를 때가 있지만, 함수를 정의할 때는 일단 편한 방법으로 해주세요.

인자도 한 번 받아보겠습니다.

//ES5
const getName = function(name) {}

//ES6
const getName = (name) => {}
const getName = name => {}

인자가 하나일 때는 소괄호 생략이 가능합니다.

인자가 두 개일 때는 생략할 수 없습니다.

//ES5
const getName = function(name, age) {}

//ES6
const getName = (name, age) => {}

이제 return 하는 함수를 볼까요?

//ES5
function hi(text) {
  text += '하세요';
  return text;
}

//ES6
const hi = text => { 
  text += '하세요';
  return text 
};

만약 함수가 실행내용이 딱히 없이 return만 한다면 return 키워드와 중괄호가 생략가능합니다.

//ES5
function getName(name) {
  return name;
}

//ES6
const hi = name => { return name };
const hi = name => name;

중괄호와 return문이 생략될 경우, 화살표 오른쪽에는 리턴될 **"값"**만 쓰여야 합니다.

다른 코드가 들어가면 안됩니다.

헷갈리나요? 예제 하나만 더 보겠습니다.

//ES5
function getFullName(first, family) {
  return first + family;
}

//ES6
const hi = (first, family) => { return first + family };
const hi = (first, family) => first + family;

여러분!

아직 잘 이해가 안 됐다면, 위의 코드를 왼쪽 코드 창에서 다시 한 번 작성해주시고! 구글 검색으로 더 많은 예제를 찾아서 실행해봐주세요.

이번 레플릿은 연습창이어서 아무거나 작성하고 오류가 나도 문제가 없답니다.

---

Assignment

이번 assignment는 자동채점이 아닙니다. 작성해서 제출하면 채점해드리겠습니다.

1. function 키워드를 사용하여 표현된 welcome 함수를, 화살표 함수 표현으로 바꿔주세요.

2. 이후, 화살표 함수로 표현된 handleBio 함수를, function 키워드를 사용하여 표현된 함수로 바꿔주세요.

// function 사용
function welcome(name){
  return "안녕하세요" + name
}

// 아래에서 변환해주세요!
const welcome2 = name => "안녕하세요" + name;

// ES6
const handleBio = (nickname, bio) =>  {
  const user = {
    nickname : nickname,
    bio : bio,
  }
   return user;
}

// 아래에서 변환해주세요!
function handleBio(nickname, bio) {
  const user = {
    nickname : nickname,
    bio : bio,
  }
   return user;
}

---

⁍28. [es6] template literals, string method

◉ template literals

ES6 에서 추가된 문법에서 편한 것 중 하나가 template literal 입니다.

원래 String을 작성할 때 따옴표를 사용했었지만,

const name = '김개발';

이제 back tick으로도 string을 감쌀 수 있습니다.

const name = `김개발`;

그리고 back tick 으로 감싸면 그 안에 변수를 넣어서 표현할 수 있습니다.

const name = '김개발';
const hi = `안녕하세요. 저는 ${name} 입니다.`;

변수를 사용하려면 ${} 으로 변수를 감싸줘야 합니다.

ES5 표현에서는 어떻게 했었죠?

const hi = '안녕하세요. 저는 ' + name + ' 입니다.';

이렇게 했어야 했습니다.

엔터 처리(개행, break line)는 어떻게 해야하나요?

아래의 표현이 가능한가요?

아래는 문법 오류입니다.

let detail = '자세히 
보아야
이쁘다';
console.log(detail);

직접 작성해보세요.

따옴표로 감싼 string은 개행 처리를 하지 않으며, 문법 오류입니다.

따옴표로 감싼 string에서 개행을 하려면 원래 아래처럼 해야합니다.

let detail = '자세히\n'+'보아야\n'+'이쁘다';
console.log(detail);

그런데 template literal에서는 string을 입력한대로 개행이 됩니다.

let detail = `자세히 
보아야
이쁘다

내코드..`;
console.log(detail);

 

◉ 28-2. string method

ES6에서 추가된 몇 가지 유용한 string method를 소개해 드립니다.

그 동안 string에서 특정 string을 찾기 위해 indexOf 를 사용했었습니다.

그런데 이제 아래의 3가지 method가 생겼습니다.

이름 그대로 기능을 파악하시면 됩니다.

• startsWith
• endsWith
• includes

const email = 'yealee.kim87@gmail.com';

console.log(email.startsWith('ye'));
console.log(email.endsWith('com'));
console.log(email.includes('@gmail'));

그리고 특정 문자열을 반복하고 싶으면 repeat 함수를 쓰면 됩니다.

'#'.repeat(3);

더 자세한 내용은

👉 자바스크립트 스트링

에서 꼭 공부하고 넘어가주세요!

---

Assignment

handleEdit 함수를 구현해 주세요.

• 쇼핑몰 회원가입에서 한 번 쯤은 아래와 같은 문구를 보셨을 겁니다.이러한 문구에서는 이름 부분만 계속 바뀌고 나머지 부분은 고정됩니다. 그럼, 이름 부분을 변수로 관리 하겠죠?

환영합니다. 위코드님!
회원가입 기념으로 쿠폰을 적립해 드렸습니다.

• 그렇다면 handleEdit 라는 이름을 가진 함수를 구현해 봅시다.
• 이 함수는 nickname, interests 라는 두 string을 인자로 받습니다. nickname은 유저의 닉네임을, interests 는 유저의 관심사를 의미합니다.
• interests 에는 여러 관심사를 적을 수 있습니다. 그 때 그 관심사의 구분을 콤마(,)를 이용합니다.
• nickname 과 interests 가 문제 없이 잘 들어왔다면 유저 정보를 효율적으로 관리하기 위해서 Object에 이 정보를 담아서 관리할 겁니다.
• 예를 들어 입력 값이 nickname = "뚜비" , interests = "방탈출,테니스,멍 때리기" 라고 했을 때
• 아래와 같은 Object를 리턴하도록 구현해 주세요.

⚠️ 주의

• interests 는 배열입니다.
• interests 를 적을 때 콤마(,) 뒤에 스페이스는 지워주세요.
   

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

✍️ 풀이

// 아래에 코드를 작성해주세요.
const handleEdit = (nickname, interests) => {
if ((nickname != undefined) && (interests != undefined)){
    const info = {
      nickname,
      interests: interests.split(','),
      bio: `제 닉네임은 ${nickname}입니다. 취미는 ${interests}입니다.`
      };
    return info;
  }
}

 

 

---

⁍29. array methods

arrow function을 가장 많이 사용할 때는 callback 함수로 사용할 때 입니다.

callback 함수란, 인자로 전달되는 함수라고 생각하시면 됩니다.

arrow function을 조금 더 연습하기 위해 array의 반복문으로 사용되는 map, forEach 메서드를 함께 보겠습니다.

• Array.map()
• Array.forEach()

정말 많이 쓰이는 메서드 입니다!

---

◉  Array.map() 

map 메서드는 배열을 반복해주는데,

callback 함수에서 return한 값으로 매(each) 요소를 수정해 줍니다.

map 메서드의 return 값은 수정된 값으로 다시 생성된 배열입니다.

위의 설명이 전부이지만, 더 자세히 예제를 보려면 아래 글에서 더 공부하거나, 공식 문서를 참고해주세요.

👉 JS Map Function

const arr = [1, 2, 3];
const squares = arr.map(x => x * x);

두번째 줄에서 map 메서드에 인자로 넘어간 함수를 원래대로 표현하면 아래와 같습니다.

const squares = arr.map(function (x) { 
  return x * x;
});

Array 타입의 데이터를 요소 갯수 만큼 반복합니다.

반복할 때마다 실행할 함수를 parameter로 전달합니다.

그러면 이 callback 함수에서 array의 요소를 인자(x)로 받습니다.

해당 요소를 수정하고 싶은대로 로직을 구현하고 return해주면,

해당 index의 요소가 return 된 값으로 치환됩니다.

왼쪽 코드 창에서 map 함수를 다양하게 테스트해봐주세요.

 

 

◉  Array.forEach() 

forEach 는 for 대신 사용하는 반복문입니다.

map 과의 큰 차이는 forEach 함수 자체가 return 하는 것도 아무것도 없다는 것입니다.

그냥 forEach 함수를 탈출하고 싶을 때 return 을 사용하면 됩니다.

map 은 요소가 수정된 새로운 배열이 return 되었다면,

forEach 는 아무것도 return 하는 것이 없습니다.

그래서 forEach 로 전달되는 callback 함수에서도 return하는 것이 없습니다.

forEach 는 단지 for 문 대신 사용하는 반복 method 입니다.

let startWithNames = [];
let names = ['a', 'ab', 'cbb', 'ada'];

names.forEach(el => {   
  if (el.startsWith('a')) {     
    startWithNames.push(el);   
  } 
});

let hasC = false;
let arr = ['a', 'b', 'c', 'd'];

arr.forEach(el => {
  if (el === 'c') {
    hasC = true;
  }
});

만약 forEach에서 현재 index 를 알고 싶으면 두 번째 인자로 받을 수 있습니다.

let idxOfC = -1;
let arr = ['a', 'b', 'c', 'd'];

arr.forEach((el, idx) => {
  if (el === 'c') {
    idxOfC = idx;
    return;
  }
});

---

Assignment 

두 문제 모두 map 메서드와 arrow function을 사용해주세요.

Assignment 1.  moreThan100 함수를 구현해 주세요.

숫자로 구성된 배열을 인자로 받습니다.

100 보다 크거나 같으면, true 를

100 보다 작으면 false 로 요소를 변경하여, 새로운 배열을 return 해주세요.

예를 들어,

nums(input)가
[100, 9, 30, 7]
이라면

return은
[true, false, false, false]

Assignment 2. formatDate 함수를 구현해 주세요.

• 날짜가 담긴 배열을 인자로 받습니다.
• 날짜의 data type은 string이며, 보내는 날짜 타입은 'YYYY-MM-DD' 입니다.
• 해당 날짜의 형식을 'YYYY년 MM월 DD일' 로 바꿔서, 새로운 배열을 return 해주세요.
• 예를 들어,

dates(input)가
['2019-03-21', '2019-04-21', '2019-05-21']
이라면

return은
['2019년 03월 21일', '2019년 04월 21일', '2019년 05월 21일']

✍️ 풀이

const.moreThan100 = nums => {
	//[100, 9, 30, 7]
	return nums.map((value) => {
    	return 100 <= value;
	});
    //[true, false, false, false]
}

const formatDate = dates => {
	return dates.map(date => {
    	const splited = date.split("-"); //["2019", "03", "21"]
    
    	return `${year}년 ${month[1]}월 ${day[2]}일`;
    })
}

---

⁍30. Object (3)

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

Object 두번째 강의에서, 객체의 키를 사용하는 여러 방법을 배웠습니다. 이 방법을 사용하면 객체의 특정 키의 값을 가져오는것도 가능하지만, 반대로 객체에 특정 키를 만들고 값을 할당하는것도 가능합니다! information 이라는 객체 하나를 만들었습니다.

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

여기에 키 하나를 생성하고, 그 키에 값을 할당해주려고 합니다. 그런데 키와 값을 변수를 통해 받아온다면 어떻게 해야할까요?

const verb = 'developes'
const project = 'facebook'

verb의 값을 키로 사용해야 하고, project의 값을 그 키의 값으로 사용한다고 했을때

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

A와 같이 할당이 가능합니다. B의 방식으로도 할당이 가능할 수도 있겠지만, 이 경우 키와 값은 항상 정해져 있게 됩니다. 하지만 A와 같은 방법은 변수 verb와 project가 가지는 값에 따라 다른 키와 다른 값을 가지는게 가능해집니다.

 

 

◉ 객체 순회하기

앞선 강의에서 객체는 순서가 없고 키를 통해서만 접근해야 한다고 배웠습니다. 하지만 여러가지 이유로 객체에 있는 모든 키에 한번씩 접근해야하는 코드를 써야한다면 어떻게 해야할까요? 다행히도 객체도 배열처럼 순회가 가능합니다!

다만 배열과 다르게 명확하게 정해진 순서가 없기 때문에, 어떤 순서에 따라 객체의 키에 접근하게 될지 알 순 없습니다. 때문에 객체의 순회는 "순서가 보장되지 않은 순회" 라고 부릅니다. 배열을 순회할때 다음과 같은 for 문을 사용했었죠?

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

이런 반복문은 배열이 length 라는 키를 가지고 있고, 인덱스를 통해 각 배열요소에 접근할수 있었기 때문인데요. 객체는 length 키가 따로 주어져있지 않고, 인덱스도 없기 때문에 이런식의 반복문은 불가능합니다. 대신 크게 두가지의 방법으로 객체의 반복문 작성이 가능합니다!

 

 

◉ Object.keys()

Object.keys 메소드는 어떤 객체가 가지고 있는 키들의 목록을 배열로 리턴하는 메소드입니다. 객체의 내장 메소드가 아니라 객체 생성자인 Object 가 직접 가지고 있는 메소드입니다. 사용법은 다음과 같습니다.

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.keys 외에도 마찬가지로 Object생성자의 메소드인 Object.values, Object.entries 와 같은 자매품들이 추가되었습니다. Object.values 는 객체의 키가 아닌 값으로 이루어진 배열을 리턴합니다. Object.entries 는 객체의 키와 값의 쌍으로 이루어진 길이 2짜리 배열로 이루어진, 배열을 리턴합니다. 각 배열에서 인덱스 [0]의 값은 각각의 키를, 인덱스 [1]의 값은 해당 키에 해당하는 값을 가지게 됩니다.

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

const entries = Object.entries(obj)

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

Object.entries가 조금 복잡해보이긴 하지만, Object.keys, Object.values, Object.entries 세가지 중에서 제일 유용하게 쓰입니다. 꼭 알아두세요.

 

 

◉  for-in 

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

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

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

앞서 예시로 등장했었던 배열의 반복문입니다. for문을 그동안 많이 써본 분들이라면, 배열에 대한 for문 선언시 쓰는 for(let i = 0; i < arr.length; i ++) 이런 문법이 아주 자주 사용되는 문법이라는걸 알고계실텐데요. 이걸 간단하게 축약한 문법이 바로 다음과 같습니다.

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 문의 인덱스에 해당하는 변수가, 숫자가 아닌 객체의 각각의 키에 해당하는 문자열을 할당받게 됩니다.

---

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

// Assignment 방법1

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

// Assignment 방법2

const getExamResult = (scores, requiredClasses) => {
  const result = scores;
  
  for(let key in result){
    if(result[key] === "A+"){
      result[key] = 4.5;
    }
    else if(result[key] === "A"){
      result[key] = 4;
    }
    else if(result[key] === "B+"){
      result[key] = 3.5;
    }
    else if(result[key] === "B"){
      result[key] = 3;
    }
    else if(result[key] === "C+"){
      result[key] = 2.5;
    }
    else if(result[key] === "C"){
      result[key] = 2;
    }
    else if(result[key] === "D+"){
      result[key] = 1.5;
    }
    else if(result[key] === "D"){
      result[key] = 1;
    }
    else if(result[key] === "F"){
      result[key] = 0;
    }
  }
  
  requiredClasses.forEach((el) => {
   if(result[el] === undefined){
      result[el] = 0;
    }
  })
  
  return result
}

---