ES6 지식 정리(一)---let/const/화살표 함수

일찍이 17년 초에 을 읽고 블로그에 필기(ES6표준입문) 필기를 했는데 업무에서도 쓸모가 있다.1년 후에 다시 이 지식들을 돌이켜 보면 처음 봤을 때와는 느낌이 완전히 다르다.많은 새로운 특성의 장점에 대해 더욱 구체적인 인식을 가지게 되었다.아직도 이해가 부족한 지식도 있기 때문에 여기서 다시 한 번 정리하고 기초를 다져야 한다.

화살표 함수

화살표 함수는 주로 두 가지 장점이 있다.코드량 감소 2.귀속 함수 정의의 역할 영역은 1입니다. 여기에 비교적 까다로운 예를 기록합니다.

let multiply = (a, b) => b === undefined ? b => a * b : a * b;
let double = multiply(2);
double(3); // => 6  
multiply(2, 3); // => 6
//    
function multiply(a, b) {
    if (b === undefined) {
        return function(b) {
            return a * b;
        }
    }
    return a * b;
}
let double = multiply(2);
double(3); // => 6  
multiply(2, 3); // => 6

2의 사용은 비교적 보편적이며, 특히 작용역이 바뀔 수 있는 부분도 있다.비교적 흔히 볼 수 있는 예는 setInterval이다. 우리는 setInterval의this가 가리키는 것이 window 대상이라는 것을 안다.화살표 함수를 사용하지 않으면 다음과 같이 씁니다.

//  this  
let obj = {
  time: 3,
  count () {
    let self = this
    console.log(this.time)
    this.interval = setInterval(function () {
      console.log(self.time);
    }, 1000)
  }
}
obj.count()
//   bind  
let obj = {
   time: 3,
   count () {
     console.log(this.time)
     this.interval = setInterval(function () {
       console.log(this.time);
     }.bind(this), 1000)
   }
 }
 obj.count()

번거롭다고 할 수 있지만 화살표 함수를 사용하면 함수가 성명할 때의 작용역을 자동으로 연결합니다.이 문제는 전혀 신경 쓸 필요가 없다.

let obj = {
  time: 3,
  count () {
    console.log(this.time)
    this.interval = setInterval(() => {
      console.log(this.time)
    }, 1000)
  }
}
obj.count()

let/const 키워드

let/const로 변수를 정의하면 var을 완전히 대체할 수 있습니다.let/const는 변수 상승이 없기 때문에 반드시 먼저 성명한 후에 사용해야 합니다.let/const는 js에 블록 레벨 역할 영역을 추가합니다. 예를 들어:

function f1() {
    let n = 5;
    if (true) {
        let n = 10;
    }
    console.log(n); // 5
}

const는 상수만 읽는 것을 설명합니다. 성명이 즉시 초기화되어야 합니다.const가 성명한 대상은 대상의 주소만 변하지 않고 대상 자체는 가변적입니다.const에서 설명한 수조는 수조의 방법을 사용할 수 있지만 값을 다시 부여할 수 없습니다.글로벌 변수는 ES6에서 시작하여 글로벌 객체의 속성과 단계적으로 연결됩니다.let, const, class에서 선언한 글로벌 변수는 더 이상 글로벌 객체의 속성에 속하지 않습니다. 예를 들어,

var a = 1
window.a // 1
let b = 1;
window.b // undefined