[JavaScript] 변수 선언 / scope

JavaScript 변수 선언 방법엔 대표적으로 3가지가 있다.

1. let : block scope 지역 변수 선언

 

초기값 재할당이 가능하지만, 재선언은 불가능하다.

재선언은 빨간줄이 뜸 !!

선언과 동시에 원하는 값으로 초기화 할 수 있다.

 

 

2. const : block scope 읽기 전용 상수를 선언

const number = 10
number = 20

 

재할당하고 실행하면 에러가 발생함

재할당과 재선언이 모두 불가능하다.

-> 한번 만들고 수정하지 않을 변수를 const로 선언하면 됨

 

선언 시 반드시 초기값을 설정해야 한다.

이후 값 변경이 불가능

 

 

3. var : 변수를 선언

 

재할당과 재선언이 모두 가능하지만, hoisting 되는 특성으로 인해 예기치 못한 문제가 발생할 수 있어 거의 사용하지 않는다.

변수 선언 시 var / const / let 키워드 중 하나를 사용하지 않으면 자동으로 var로 선언된다.

함수 scope를 가짐

 

 

 

scope

1. block scope : if / for / 함수 등의 중괄호 내부

 

block 내에 선언된 변수와 상수는 외부에서 접근 불가능하다.

변수와 상수 유효 범위를 블록 내부로 제한한다.

외부에서 내부의 변수와 상수에 접근하는 것을 방지

 

// 전역 스코프
let a = 10
// 블록 스코프
{
    let a = 20
    console.log(a)
}
if(true) {
    let a = 30
    console.log(a)
}

 

 

 

오류나는 코드

const a = 10

if(true){
    const b = 20
    console.log(a)
}

// b 는 위의 블록 스코프에서 선언된 변수
// 다른 스코프에서 참조할 수 없다 !!
if(true){
    console.log(b)
}

다른 block scope 내부에 선언된 b를 참조하려고 하면 이렇게 오류가 발생함

 

 

 

block scope로 선언된 변수에 반복문을 사용할 수 있을까??

const fruits = {
    a : 'apple',
    b : 'banana'
}

for(const key in fruits){
    const tmp_key = key
    console.log(key)
}

-> 사용 가능함 / 반복문이 실행될 때 여러개의 block scope가 생성되기 때문이다.

 

 

 

scope를 분리하여 사용도 가능

const tmp = 'test1'
{
    console.log(tmp)
    {
        const tmp = 'test2'
        console.log(tmp)
    }
}

 

 

2. 함수 scope : 함수 선언 시 사용된 중괄호 내부의 범위

함수 내에서 선언된 변수와 상수가 유효한 범위

 

렉시컬 스코프(Lexical scope)

중첩된 함수 그룹에서 내부 함수가 상위 범위의 리소스에 엑세스 할 수 있는 범위

함수를 사용된 위치가 아니라, 선언된 위치를 기반으로 상위 스코프를 결정해준다.

 

클로저(Closure)

반환된 내부 함수가 자신이 선언된 scope를 기억하여, 렉시컬 스코프 외부에서 호출 되어도 본인의 렉시컬 스코프에 접근할 수 있도록 하는 기능

-> 자신이 생성될 때 환경을 기억하여 외부에서 접근할 수 있도록 하는 함수이다.

 

const myFunction = function(x) {
    // add 함수 내부의 x = 렉시컬 스코프에서 가져옴
    function add(y) {
        console.log(x + y)
    }
    return add
}

let func = myFunction(10)
func(20)
func(30)

func = myFunction(20)
func(40)

 

let으로 선언한 func = myFunction(10)에 10이 add의 x에 들어가고,

다음에 선언한 func(20)의 20이 y에 들어가 결과로 10 + 20 = 30이 나오는 것이다.

중첩함수가 외부에있는 식별자를 참조하고 있어서 클로저다 !!

 

아직 클로저가 뭔지 !! 정확히 모르겠지만 차근차근 알아가겠다.