JS/개념

ES6(ECMAS6) 문법 - let과 const

ucong 2021. 8. 31. 10:10

let 

재선언 불가

let x = "ucong";
let x = 0;
// SyntaxError : x 는 이미 선언되었습니다.

 

블록 범위 제공

- {} 블록 내부에 선언된 변수는 블록 외부에서 액세스 불가능

{
    let x = "ucong";
}
// x 는 이곳(블록 범위 밖)에서 사용 불가능

* var같은 경우는 {} 블록 내부에 선언된 변수도 블록 외부에서 액세스 가능

 

변수 재선언

- 블록 내부의 변수를 다시 선언해도 외부의 변수는 다시 선언되지 않음 (var의 문제점 개선)

let x = 1;
// x=1;
{
   let x = 2;
   // x=2;
}
// x=1;

 

let 호이스팅

- let이 맨위로 호이스트 되지만 초기화 되지 않음

- let 변수를 선언하기 전에 사용 불가

alert(bananaColor);
let x = "hi"; 
// alert 작동 X

* 호이스팅 : 선언을 맨 위로 이동하는 JavaScript의 기본 동작


const

- 값이 변경되지 않는 경우에 사용

- 새로운 배열 / 새로은 개체 / 새로운 기능 / 새로운 정규 표현식

- 상수 값 재할당, 배열 재할당, 개체 재할당은 할 수 없지만 배열의 요소 및 객체의 속성 변경은 가능

재선언 불가

const x = "ucong";
const x = 0;
// SyntaxError : x 는 이미 선언되었습니다.

 

블록 범위 제공

- {} 블록 내부에 선언된 변수는 블록 외부에서 액세스 불가능

{
    const x = "ucong";
}
// x 는 이곳(블록 범위 밖)에서 사용 불가능

var x = 1;
const x = 2;  // error

{
let x = 2;
const x = 1; // error
}

* var같은 경우는 {} 블록 내부에 선언된 변수도 블록 외부에서 액세스 가능

 

변수 재할당 불가

- const 변수는 선언될 때 값을 할당해야되고 재할당이 불가능

const age = 25;
age = 26; // error
age = 27; // error

const name = "ucong";
name = "c";  // error
var x = "o"; // error
let x = "n"; // error
const x = "g" // error

{
  const name = "Ucong";
   name = "c"; // error
   var x = "o"; // error
   let x = "n"; // error
   const x = "g" // error
}

 

상수 배열

- 상수 배열의 요소 변경

const fruit = ["apple", "banana", "grape"];

fruit[0] = "mango"; // change 가능
fruit.push("apple"); // add 가능

fruit = ["banana" , "mango", "apple"]; // 재할당 불가능

 

상수 객체

- 상수 객체의 속성 변경

const fruit = {type: "apple", price="5000", color: "red" };

fruit.color : "green"; // change 가능
fruit.number = "5"; // add 가능

fruit = {type:"banana", price="4000", color: "yellow"}; // 재할당 불가능

Const 호이스팅

- const는 맨위로 호이스트 되지만 초기화 되지 않음

- const 변수를 선언하기 전에 사용 불가

alert(bananaColor);
const bananaColor = "yellow"; 
// alert 작동 X

* 호이스팅 : 선언을 맨 위로 이동하는 JavaScript의 기본 동작

 

 

[참고]

- https://www.w3schools.com/js/js_es6.asp#mark_let

- https://www.w3schools.com/js/js_hoisting.asp

- https://www.w3schools.com/js/js_const.asp

'JS > 개념' 카테고리의 다른 글

ES6(ECMAS6) 문법 - For/Of 루프  (0) 2021.08.31
ES6(ECMAS6) 문법 - 화살표 함수  (0) 2021.08.31
ES6(ECMAS6) 문법  (0) 2021.08.31
GSAP 란?  (0) 2021.02.17
[ JS ] CSS에서 숫자가져오기  (0) 2021.02.15