변수 let 및 const를 선언하는 ES6 시리즈

이 글은 주로 ES6 시리즈의 선언된 변수 let과 const를 공유합니다. 관심 있는 친구들은 이 글의 내용을 참조할 수 있습니다.

Introduction

Concept

ES6의 첫 번째 버전은 2015년 6월에 출시되었으며, 공식적으로 이름은 "ECMAScript 2015 Standard"(줄여서 ES2015)입니다. ES6은 역사적인 용어이자 일반적인 용어로 ES2015, ES2016, ES2017 등을 포괄하는 버전 5.1 이후의 JavaScript의 차세대 표준을 의미하며, ES2015는 공식 명칭으로, 특히 출시된 언어의 공식 버전을 지칭합니다. 그 해 기준.
주요 브라우저의 ES6 지원: kangax

Babel

Babel은 ES6 코드를 ES5 코드로 변환하여 기존 환경에서 실행할 수 있는 널리 사용되는 ES6 트랜스코더입니다.
Babel의 구성 파일은 .babelrc이며 프로젝트의 루트 디렉터리에 저장됩니다. Babel을 사용하는 첫 번째 단계는 이 파일을 구성하는 것입니다.

변수 선언

ES5에는 변수를 선언하는 방법이 var 명령과 function 명령 두 가지뿐입니다. ES6에는 let, const, import 및 class 명령이 추가되었습니다. 따라서 ES6에서는 변수를 선언하는 방법이 총 6가지가 있습니다.

ES5에서 최상위 객체의 속성은 전역 변수와 동일합니다. 이를 변경하기 위해 ES6에서는 호환성을 유지하기 위해 var 명령과 function 명령으로 선언된 전역 변수는 여전히 최상위 객체의 속성으로 유지되도록 규정하는 반면, 전역 변수는 다음과 같이 규정합니다. let 명령, const 명령 및 class 명령에 의해 선언된 최상위 개체에 속하지 않는 속성입니다. 즉, ES6부터 전역 변수는 최상위 개체의 속성에서 점차적으로 분리됩니다.

let

ES6에는 변수를 선언하는 새로운 let 명령이 추가되었습니다. 사용법은 var와 유사하지만 선언된 변수는 let 명령이 있는 코드 블록 내에서만 유효합니다.

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

반복 선언을 허용하지 않습니다.

let은 동일한 범위에서 동일한 변수의 반복 선언을 허용하지 않습니다.

// 报错
function func() {
  let a = 10;
  var a = 1;
}

function func(arg) {
  let arg; // 报错
}

function func(arg) {
  {
    let arg; // 不报错
  }
}

블록 수준 범위

• ES6에서는 블록 수준 범위의 임의 중첩을 허용합니다.

• 내부 범위는 외부 범위에서 동일한 이름의 변수를 정의할 수 있습니다.

• 외부 스코프는 내부 ​​스코프의 변수를 읽을 수 없습니다.

{{{{
  {let insane = 'Hello World'
   {let insane = 'Hello World'}
  }
  console.log(insane); // 报错
}}}};

블록 수준 범위 및 함수 선언

• ES5에서는 함수는 최상위 범위와 함수 범위에서만 선언할 수 있고 블록 수준 범위에서는 선언할 수 없다고 규정합니다.

• ES6에서는 블록 수준 범위에서 함수 선언문이 let처럼 동작하며 블록 수준 범위 외부에서 참조할 수 없다고 규정합니다.

환경에 따라 동작이 너무 다르다는 점을 고려하면 블록 수준 범위에서 함수를 선언하는 것을 피해야 합니다. 꼭 필요한 경우에는 함수 선언문이 아닌 함수 표현식으로 작성해야 합니다.

변수 승격이 없습니다

let 명령어로 선언한 변수는 선언 후 사용해야 하며, 그렇지 않으면 오류가 보고됩니다.

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

임시 데드 존

let 명령이 블록 수준 범위에 존재하는 한, 선언된 변수는 이 영역에 "바인딩"되며 더 이상 외부 영향의 영향을 받지 않습니다.

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

코드 블록에서는 let 명령을 사용하여 선언할 때까지 변수를 사용할 수 없습니다. 구문론적으로 이를 "임시 데드존"(TDZ)이라고 합니다.

const

const는 읽기 전용 상수를 선언합니다. 한번 선언된 상수의 값은 변경할 수 없습니다.

• 은 선언된 블록 수준 범위 내에서만 유효합니다.

• const 명령으로 선언된 상수도 승격되지 않으며 임시 데드존도 있으며 선언된 위치 이후에만 사용할 수 있습니다.

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

const의 본질은 실제로 변수의 값을 변경할 수 없다는 것이 아니라 변수가 가리키는 메모리 주소를 변경할 수 없다는 것을 보장합니다. 단순한 유형의 데이터(숫자 값, 문자열, 부울 값)의 경우 값은 변수가 가리키는 메모리 주소에 저장되므로 상수와 동일합니다. 그러나 복합 유형 데이터(주로 객체 및 배열)의 경우 변수가 가리키는 메모리 주소는 포인터만 저장합니다. Const는 이 포인터가 가리키는 데이터 구조가 변수인지 여부만 보장할 수 있습니다. 더 이상 통제할 수 없습니다. 그러므로 객체를 상수로 선언할 때는 매우 주의해야 합니다.

const foo = {};

// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only

정말로 개체를 고정하려면 Object.freeze 메서드를 사용해야 합니다.

const foo = Object.freeze({});

// 常规模式时，下面一行不起作用；
// 严格模式时，该行会报错
foo.prop = 123;

위 내용은 변수 let 및 const를 선언하는 ES6 시리즈의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!