JS_ES6_1. var키워드와 let키워드

젠장. 참고서적 언급 등을 쓰기 위해 잠시 임시저장하고

새로글을 써서 발행했더니, 작성하던 임시저장이 날아갔다 ㅡㅡ;;

 

 

1. var 키워드

 

var 키워드는 변수 선언에 사용된다.

흔히 지역변수라고 부르는 로컬변수,

전역변수라고 부르는 글로벌변수로 구분한다.

 

로컬변수는 함수나 오브젝트를 스코프로 사용하기 위한 의도,

글로벌변수는 프로그램 전체에서 공용으로 사용하기 위한 의도로

선언되는 변수이다.

 

one = 100;
function get(){
    one = 300;
    console.log("함수 :", one);
}
get();
console.log("글로벌 :", one);

여기서 one이라는 변수는 var를 사용하지 않았으므로

글로벌 변수이다.

 

get()함수를 호출하게 되면, 

get()함수블록 안에 있는 one=300 을 실행한다.

get()함수 안에는 one이라는 변수가 선언되어 있지 않다.

따라서 함수 밖에서 변수를 찾는다.

one은 100으로 선언되어 있는 변수이다.

100으로 선언된 one을 함수 안에서 300으로 재선언한다.

 

get()함수를 거친 one은 300이 되어 출력된다.

"함수"와 "글로벌"에 표시되는 one의 값은 각각 300이 된다.

 

결과는 다음과 같다.

 

이렇게, 글로벌 변수가 함수에서 사용되면서 값이 변하게 되면,

여러 함수를 거치면서 값이 변경되는 위험을 감수해야한다.

 

2. let 키워드

 

let sports = "축구";

와 같은 형태로 let 키워드로 변수를 지정한다. (이하 let변수)

let 키워드의 특징은 다음과 같다.

- 함수 안에 작성한 let변수는 함수가 스코프이다.

- A라는 함수 안에 조건문이 있고, 조건문의 { }안에

let변수가 선언되었다면, 해당 let변수의 스코프는

A라는 함수가 아니라 let변수가 들어있는 { }이다.

- { }블록 밖에 같은 이름의 let변수가 있더라도,

스코프가 다르기 때문에 각각 다른 값으로 설정 가능하다.

- { }블록 안에 { }블록을 계층적으로 선언하면 

각각의 { }블록이 스코프이다.

- 같은 스코프 안에서는 같은 이름의 let변수를

선언할 수 없다.

- let변수는 호이스팅(hoisting)되지 않는다.

(호이스팅은 끌어올리는 것으로써, 

함수호출보다 함수선언이 뒤에 있어도,

함수선언을 끌어올려 실행되는 것을 말한다.)

 

let 변수에는 숫자나 문자열을 직접 작성할 수 있고,

(1 + 2 + 3) 처럼 표현식으로 작성할 수도 있다.

표현식을 작성하면 표현식을 평가 > 결과값을 사용한다.

초기값 할당 없이 선언만 할 수도 있다.

 

"use strict";
let sports = "축구";
if(sports)
{
    let sports = "농구";
    console.log("블록 :", sports);
}
console.log("글로벌 :", sports);

sports라는 let변수의 초기값은 "축구"이다.

{ }블록 안에서, let변수 sports에 "농구"라는 값을 선언한다.

글로벌에서의 sports는 블록안에서의 sports와

스코프가 다르기 때문에 "축구"라는 값이 

"농구"로 대체되지 않는다.

 

조건문의 { }블록 안의 console.log()에 break point를 걸면

다음처럼, 블록 안에는 sports가 "농구"로,

script 자체에서는 sports가 "축구"로 표시된다. 

 

3. let과 this

 

var music = "음악";
console.log(this.music);

let sports = "축구";
console.log(this.sports);

var키워드로 music이라는 변수에 "음악"을 할당했다.

현재는 글로벌오브젝트가 스코프이다.

this는 글로벌오브젝트를 참조한다.

 

 

console.log(this.music);은 글로벌 오브젝트의

music 변수를 호출하여 "음악"이 출력된다.

 

글로벌오브젝트가 window오브젝트는 아니다.

다만, window오브젝트로 글로벌변수에 접근할 수 있다.

논리적으로 접근하면, 자바스크립트에 글로벌오브젝트는 있다.

하지만 window 오브젝트는 없다.

window오브젝트에는 DOM(Document Object Model)메서드,

window오브젝트 자체의 프로퍼티도 있다.

이런식으로 window오브젝트에 글로벌오브젝트가 존재하는 개념이다.

(쉽게 이해되는 개념이 아니라, 이해될 때까지 수차례 읽어야 하겠다.)

 

반면에 let변수인 sports의 경우

console.log(this.sports);의 결과로 undefined가 출력된다.

앞선 설명처럼, this는 단순한 글로벌오브젝트가 아닌,

window오브젝트를 통해 글로벌오브젝트를 참조하는,

다시말해, window오브젝트를 참조한다.

그 결과로 undefined가 출력된다는 것은,

window오브젝트에서 let변수를 설정할 수 없다는 것이다.

이것이 var변수와 let변수의 차이이다.