ES6에서 바뀐 문법들을 정리해보려고 합니다.
1. var 키워드는 어떻게 사용되었나요?
1-1. ES6 이전 문법에서는 변수를 선언하기 위해 var 키워드를 사용합니다.
// 기본적인 변수 선언과 할당 방법
var number; // 변수 number 선언
number = 9; // 변수 number에 9 할당// 변수 선언과 할당을 동시에 하는 방법
var i = 10; // 변수 i 선언하고 숫자 10을 할당
var a = "apple"; // 변수 a 선언하고 문자열 apple를 할당// 여러개의 변수를 선언하는 방법
var b = 1, c = 2, d = 3; // 여러개의 변수를 한번에 선언하고 할당// 선언한 변수를 다시 선언하는 방법
var a = 0;
var a = 5; // 이미 선언된 변수 a를 다시 선언하면 값을 덮어씌울 수 있습니다.
console.log(a); // 5 출력1-2. var 키워드로 선언된 변수의 유효범위는?
- 변수의 유효범위란 프로그램 안에서 어떤 변수가 정의되어 있는 영역을 말합니다.
- 다시 말해서 어떤 변수가 소스코드 안에서 존재하고 있는 범위를 의미합니다.
// 함수 밖에 변수를 선언하면 전역 변수가 됩니다.
var scope = "global"; // 전역 변수 scope 선언.
function foo() {
// 함수 안에 변수를 선언하면 지역 변수가 됩니다.
var scope = "local"; // 지역 변수 scope 선언
console.log(scope); // 전역 변수가 아닌 지역 변수의 값 "local" 출력
}
console.log(scope); // 전역 변수의 값 "global" 출력
foo(); // 지역 변수의 값 "local" 출력-
var키워드로 선언한 변수는 함수 스코프 변수입니다. -
함수 스코프 변수의 특징을 알아보겠습니다.
1. 함수 안에서 선언된 함수 스코프 변수는 함수 내부에서만 접근할 수 있는 지역 변수 입니다.-
따라서 위의 함수 스코프 변수는 함수 밖에서 접근이 불가능 합니다.
3. 함수 밖에 선언한 함수 스코프 변수는 **전체 소스코드 어디에서든지 접근할 수 있는 전역 변수**입니다.
-
function foo(){
var a = "local";
}
console.log(a); // 호출 불가능- 전역 변수와 지역 변수의 변수명이 같다면 함수 안에서는 지역 변수가 호출됩니다.
1-3. 키워드 없이 변수를 선언한다면 어떻게 동작하나요?
- Strict mode가 아닌 상황에서 아직 선언하지 않는 변수에 값을 할당하면 자바스크립트는 자동으로 전역 변수를 생성합니다.
a = "global"; // 전역 변수 a 선언
function foo() {
a = "local"; // 함수 안에서 전역 변수 a의 값 변경
b = "global"; // 전역 변수 b 선언
}
foo();
console.log(a); // "local" 출력
console.log(b); // "global" 출력
b = "전역 변수 b 값 변경"
console.log(b); // "전역 변수 b 값 변경" 출력- 하지만 좋지 않은 습관이므로 변수 선언 키워드와 함께 변수를 선언해야 합니다.
2. let 키워드는 무엇이 다른가요?
2-1. let 키워드는 블록 스코프 변수를 선언하는 키워드입니다.
-
블록의 단위는 중괄호 {} 입니다.
-
블록 스코프 변수의 특징을 알아보겠습니다.
1. 블록 안에서 변수를 선언하면 변수가 선언된 블록과 그 하위 블록에서만 접근이 가능합니다.
function foo() {
let a = 2;
if(true) {
let b = 10;
console.log(a); // 변수 a가 선언된 블록의 하위 블록에서 접근 가능
}
console.log(b); // 변수 b는 if문 내부에서 선언되었으므로
// 블록 밖에서 접근 불가능
for (let i = 0; i < 10; i++) {
let c = 20;
}
console.log(c); // 변수 c는 for문 내부에서 선언되었으므로
// 블록 밖에서 접근 불가능
}var키워드와 비교
function foo() {
var a = 2;
if(true) {
var b = 10;
console.log(a); // a 접근 가능
}
console.log(b); // b 접근 가능,
// 변수 b는 var 키워드로 선언되었으므로
// 함수 내부 어디에서든지 접근 가능
for (let i = 0; i < 10; i++) {
var c = 20;
}
console.log(c); // c 접근 가능
//변수 c는 var 키워드로 선언되었으므로
// 함수 내부 어디에서든지 접근 가능
}2-2. let 키워드는 변수 재선언이 불가능합니다.
-
위에서
var키워드로 변수를 선언할 경우, 변수 재선언이 가능하다고 했었습니다. -
하지만
let키워드로 변수를 선언할 경우, 선언된 변수와 동일한 이름의 변수를 다시 선언할 수 없습니다.
let a;
let a; // 이미 위에서 변수 a가 선언되었으므로 오류가 발생- 주의할 점은
let키워드는 블록 스코프 변수이므로 다른 블록에서 동일한 변수명으로 변수를 다시 선언하면 새로운 변수가 선언됩니다.
function foo() {
let a = 1;
var b = 2;
console.log(a); // 1 출력
console.log(b); // 2 출력
if (true) {
let a = 5; // if문 블록 안에서 동일한 이름으로
// 새로운 변수를 생성하면 if문 밖의 변수 a와 다른 변수 a가 선언된다.
// 이 변수 a는 if문 안에서만 존재한다.
var b = 10; // if 문 밖의 변수 b에 10을 덮어 씌운다.
console.log(a); // 5 출력
console.log(b); // 10 출력
}
console.log(a); // 1 출력
console.log(b); // 10 출력
}
foo();3. const 키워드는 무엇이 다른가요?
const키워드로 변수를 선언하고 값을 할당하면 값을 변경할 수 없습니다.
const a = 10;
a = 15; // 값을 변경하므로 에러 발생const키워드는 변수 선언과 할당을 동시에 해야합니다.
const b; // 변수 b에 값이 할당되지 않았으므로 에러 발생
b = 5;-
const키워드는let키워드와 같은 블록 스코프 변수입니다. -
const키워드로 선언된 변수에 객체를 할당하면 객체 자체가 할당되는 것이 아니라 객체의 주소값이 할당됩니다. -
const변수를 이용한 객체 속성 변경이 가능합니다. 객체 속성을 변경할 경우,const변수에 할당된 객체의 주소값은 바뀌지 않으므로 문제가 없습니다.
const object = {
"num" : 12
};
object.num = 10; // 속성에 새로운 값 할당 가능
console.log(object.num); // 10 출력
object = {"string": "bird"}; // object 변수에 새로운 객체의 주소값을 할당하므로 에러 발생4. 더 공부해볼 부분들
- 전역 객체?
- strict mode?
- 호이스팅?
