ES6 맛보기-1

Nomad Coders의 리액트JS 2주 완성반 시작에 앞서 강의 내용 중에서 중요하다고 생각한 부분들을 적어 까먹지말자!

1. Arrow Functions

let 다음으로 가장 많이 접한 개념이다. 정확히 요모조모 따져보자
화살표 함수(Arrow function)는 말 그대로 화살표(=>)를 사용하여 함수를 간단하게 선언할 수 있다.

화살표 함수의 선언

• 매개변수 개수에 따라

() => {~~~} // 매개변수가 없다면

(x) => {~~~} // 매개변수가 한 개인 경우 소괄호 생략이 가능
 x => {~~~}
 
(x, y, z) => {~~~} // 매개변수가 여러개라면

• 함수 몸체의 길이에 따라

(x) => x * 7 // 함수 몸체가 한줄이라면 중괄호 생략이 가능
(x) => { return x * 7; }

(x) => {
	let y = 5;
  	return x + y;
}

만약 중괄호를 쓰고 return을 안에 작성하지 않는다면 undefined가 발생하는데
나는 '{ }를 탈출하기 위해서는 return이 꼭 필요해!' 라고 생각하는게 처음에는 이해가 잘 됐다.

화살표 함수의 호출

화살표 함수는 익명 함수로만 사용할 수 있다.
익명 함수는 무엇일까?

• 익명함수
  말 그대로 이름이 없는 함수이다.
  변수명으로 함수를 호출해준다.

const calculate = x => x * 7;
console.log(calculate(5)); // 35

그러면 콜백 함수는 무엇일까?

• 콜백함수
  콜백 함수는 함수 안에서 어떤 이벤트가 발생했거나 특정한 시점에 호출되는 함수를 뜻한다.

MDN에서 밑에 예시를 참고했습니다!

var materials = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

materials.map((material) => {
  return material.length;
}); // [8, 6, 7, 9]

materials.map(material => { 
   return material.length; 
}); // [8, 6, 7, 9]

this

화살표 함수와 일반 함수의 가장 큰 차이점은 this라고 할 수 있다.

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

  setInterval(function growUp() {
    // 비엄격 모드에서, growUp() 함수는 `this`를
    // 전역 객체로 정의하고, 이는 Person() 생성자에
    // 정의된 `this`와 다름.
    // 외부 age, 내부 age는 다른 Reference를 가지고 있음
    this.age++;
  }, 1000);
}

var p = new Person();

위의 문제를 해결하기 위해

function Person() {
  var that = this;  // this 값을 비전역 변수에 할당하여 해결
  that.age = 0;

  setInterval(function growUp() {
    // 콜백은  `that` 변수를 참조
    that.age++;
  }, 1000);
}

하지만, 화살표 함수에서는

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++;
  }, 1000);
}

var p = new Person();

화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다.(Lexical this)

추가정보

이 외에도 기본 함수 매개변수(default function parameter)를 배웠는데, 값이 없거나 undefined가 전달될 경우 매개변수를 기본값으로 초기화할 수 있다.
그리고 Template literals을 사용하면 문자열을 쉽게 표현할 수 있다.

function greeting(say = "hi!") {
  return say + " jacob";
}
console.log(greeting()); // hi! jacob 

const greeting = (say = "hi!") => `${say} jacob`;
console.log(greeting()); // hi! jacob 

참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98
https://cornswrold.tistory.com/167
https://velog.io/@ki_blank/JavaScript-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98Arrow-function
https://poiemaweb.com/es6-arrow-function
https://nesoy.github.io/articles/2019-04/Javascript-Arrow-function