오늘 배운 것

Arrow Function

1. 기본 구문

//기존 함수 선언
function add (x, y){
    return x + y;
}

//Arrow function
(x, y) => {
    return x + y;
}

//중괄호{}안에 표현식만 존재할 경우, 생략 가능
(x, y) => x + y;

//파라미터가 하나일 경우, 괄호 생략 가능
x => x + 10;

//파라미터가 없을 경우, 괄호 생략 불가
() => console.log("Hello")

2. This 바인딩

function Person() {
  // Person() 생성자는 `this`를 자신의 인스턴스로 정의.
  this.age = 0;

  setInterval(function growUp() {
    // growUp() 함수는 `this`를 전역 객체로 정의
	// 이는 Person() 생성자에 정의된 `this`와 다름.
    this.age++;
  }, 1000);
}

var p = new Person();

// this가 같은 곳을 바라보게 하기 위해 기존에는 bind 메소드나, 변수 설정을 통해 해결했다.
// Arrow Fucntion을 사용할 경우에도 이와 같은 효과를 낸다.

// Arrow Function의 경우
function Person() {
  // Person() 생성자는 `this`를 자신의 인스턴스로 정의.
  this.age = 0;

  setInterval(() => {
    this.age++;		//여기서 this는 생성자 함수 person()의 this와 같음
  }, 1000);
}

var p = new Person();

Template Literal

let A = "안녕"
let B = "하세요"

//기존 String 표현
console.log("A\n"+
"B");
// "안녕
// 하세요"

//Template Literal의 경우
console.log(`${A}
${B}`);
// "안녕
// 하세요"

//변수의 경우 ${}로 감싸주고, 기존의 "" + ""와 같은 방식을 사용하지 않아도 된다.
//줄바꿈과 띄워쓰기도 편리하다.