[ES6] 1. 변수 키워드 const / let

윤재열·2023년 3월 15일

ES6

목록 보기

1/6

ES6 소개

자바스크립트는 언어고, ECMAScript 는 표준,규격을 의미합니다.

ECMAScript 2015를 ES6라고 부릅니다.

기존에 사용하던 변수 키워드 var

var 키워드로 선언된 변수는 함수를 기준으로 외부에 작성시 전역변수, 내부에 작성시 지역변수로 처리됩니다.

문법

var 변수명 = 값;

중복선언

var a = 10;
var a = 20;

console.log(a);

밑의 사진과 같이 중복 선언해도 오류가 나지는 않지만 마지막 값으로 처리되는 것을 알 수 있습니다.

전역변수, 지역변수

var a = 10; //전역변수

function test(){
  	var b = 20; //지역변수
};

if(a == 10){
  	var c = 30; //젼역변수
};
test();

console.log(a);// 호출 O - 10
console.log(c);// 호출 O - (true)30
console.log(b);// Error

이와 같이 if문의 코드블록에는 영향을 받지 않지만, 함수 내부에 선언한 것은 지역변수로 처리되어 전역에서 호출하면 오류가 납니다.

let 변수 키워드

let 키워드로 선언된 변수는 재선언할 수 없으며, {}을 기준으로 전역변수와 지역변수가 지정됩니다.

문법

let 변수명 = 값;

재선언시 오류

let a = 10;
let a = 20;

재할당은 가능

아래와 같이 재할당된 a에는 20이라는 값이 처리되는 것을 확인할 수 있습니다.

let a = 10;
a = 20;

console.log(a); // 20;

전역변수와 지역변수

코드블록 {} 이 기준이 되기 떄문에 함수와 if문에 작성된 모든 것들은 지역변수가 됩니다.
그래서 두번째 호출부터 바로 에러가 발생합니다.

let a = 10; // 전역변수

const test = () => {
  	let b = 10; //지역변수
};

if (a == 10) {
  	let c= 10;
};
test();

console.log(a); // 호출 O - 10
console.log(b); //ERROR
console.log(c); //ERROR

const 변수 키워드

const 로 선언된 변수는 블록 범위 버전의 변수 키워드이고, 변수의 값을 변경할 수 없습니다.

문법

const 변수명 = 값;

재할당도 불가

const a =10;
a = 20;

let 과 같이 재할당만 하였을 뿐인데도 오류가 나는 것을 확인할 수 있습니다.
const는 값이 바뀌면 안되는 것을 선언합니다(상수)
단, 객체 {} 또는 배열로 선언할 때는 객체의 속성과 배열의 요소값을 변경 할 수 있습니다.

객체선언시 const

const a = {
  	test01 : 10,
  	test02 : 'hello',
};

console.log(a.test02);

a.test02 = '안녕';
console.log(a.test02);

속성값은 변경이 가능한 것을 확인 할 수 있습니다.

배열 선언시 const

const a = [10,20,30];
console.log(a[1]);

a[1] = 50;
console.log(a[1]);

배열 또한 일부 값도 변경되는 것을 확인할 수 있습니다.

전역변수와 지역변수

const x= 10; //전역변수

const test = () => {
	const y = 10; //지역변수
};

if( x == 10 ) {
  	const c = 10;  //지역 변수
};

test();

console.log(a);//호출 O -> 10;
console.log(b); // ERROR
console.log(c); // ERROR