스코프와 let, const, var

JINSUNG LEE·2021년 4월 22일

자바스크립트를 간혹 사용하다 보면 코드 간의 범위에 대해 혼동하는 경우가 있다.

헷갈려하는 큰 이유는 바로 스코프를 이해하지 못해서가 클 것이다.

자~ 그럼 여기서 스코프란 ??

			  어이,,, (뒷통수 퍽!!) 그게 아니잖아!!

러시아 민속 인형 '마트로시카'와 얼핏 비슷하다고 볼 수 있다.

스코프가 도대체 왜!! '마트로시카'와 흡사한지 지금부터 알아보자

스코프

스코프란 범위의 의미를 지니고 있다.

더 자세하게 설명하자면 자바스크립트 상에서는 '변수에 접근하는 범위'이다.

지금부터 예시문으로 스코프의 기준을 보여주겠다.


let singer = "billie eilish";

function Album () {
 let song = "bad guy";
 return song + ' - ' + singer;
}

우선 스코프에서 두가지 종류가 있다.

지역 스코프
전역 스코프

여기서 function Album 중괄호 영역은 지역 스코프에 해당되고,

function Album 중괄호 영역 외에는 전역 스코프이다.

그리고 변수가 singer, song이 선언되었는데 해당 변수들은 서로 특징이 다르다.


let singer = "billie eilish";

singer는 전역 변수에 해당되고


let song = "bad guy";

song은 지역 변수에 해당된다.

종합해서 설명하자면 전역 스코프에 해당하는 변수는 전역 변수이고

지역 스코프에 해당하는 변수는 지역 변수이다.

만약 함수와 변수를 따로 실행하면 어떤 결과가 있을지 보자


let singer = "billie eilish";

console.log(singer); // billie eilish

function Album () {
 let song = "bad guy";
 return song + ' - ' + singer;
}

Album(); // bad guy - billie eilish
console.log(song); // ReferenceError: song is not defined

전역 변수 singer의 경우 지역 스코프에 별도로 선언한 singer가 없으므로 함수 안쪽에서 접근할 수가 있다.

그러나 지역 변수 song의 경우 전역 스코프에 실행을 하면 오류가 발생하는 것을 볼 수가 있는데

그 이유는 지역 변수는 지역 스코프 내에서만 활용이 가능하고 바깥쪽은 접근이 불가능하기 때문이다.

이를 종합하자면

바깥, 전역 스코프(Global Scope)에서 선언한 변수는 안쪽, 지역 스코프(local scope)에서 사용 가능
안쪽, 지역 스코프(local scope)에서 선언한 변수는 바깥, 전역 스코프(Global Scope)에서 사용 불가

이는 앞서 설명한 '변수 접근 규칙에 따른 제한 범위'에 따르는 것이다.

위 소개글에서 언급하였던 마트로시카가 혹시 기억 나는가??

크기가 제일 큰 인형이 전역 스코프이고 작아지는 인형이 지역 스코프라고 가정하고 상상해보자.

큰 인형은 어떤 작은 인형이건 담을 수 있다.

반대로 작은 인형은 크기가 작은데 큰 인형을 담을 수 있을까?? 입 찢어지는 상황과 비슷할 것이다.

이처럼 전역 스코프는 지역 스코프 안의 지역 스코프까지 마음대로 접근이 가능하지만,

지역 스코프는 전역 스코프에 접근이 불가능하고 상위 지역 스코프 또한 접근할 수가 없다.

스코프 종류

블록 스코프

중괄호에 둘러싸인 부분을 블록 스코프라고 부른다.

함수 스코프

함수의 중괄호에 둘러싼인 부분을 함수 스코프라고 부른다.

단 명심해야 할 점은 화살표 함수는 블록 스코프로 치급하니 주의하자!!

let, const, vart 차이

// TYPE 1
let name = "California"
let name = "Califorina" //  SyntaxError: Identifier 'name' has already been declared

// TYPE 2
let name = "California"
name = "LA"

// TYPE 1
const name = "Korea"
const name = "Korea" // SyntaxError: Identifier 'name' has already been declared

// TYPE 2
const name = "Korea"
name = "SEOUL"// TypeError: Assignment to constant variable.

// TYPE 1
var name = "JAPAN"
var name = "JAPAN" 

// TYPE 2
var name = "JAPAN"
name = "TOKYO"

let : 재할당 가능, 재선언 불가
const : 재할당 불가, 재선언 불가
var : 재할당 가능, 재선언 가능

let const는 ES6,ECMA 2015 부터 사용이 가능해졌고

var 구버전에 사용했던 변수이다.

그러나 여전히 익스플로러에서 var 아직 사용 중인데, 다른 키워드들과 달리 재선언이 된다는게 이상할 것이다.

코딩 작업에서 재선언이 될 필요도 없고 쓸일이 없다.

즉 별도로 재선언이 되는 저 말도 안되는 상황은 버그에 가깝다고 보면 좋다.

웬만해서는 var보다 let 키워드를 활용하는 것을 선호한다.

블록스코프에서의 var

또한 var의 고질적인 문제는 블록 스코프에서도 나타난다.


if (true) {
 var song = "bad guy";
}

console.log(song) // bad guy

블록스코프를 벗어나도 전역 스코프에서 실행이 된다.

이는 지역 스코프 규칙을 무시하므로 코드 혼란에만 줄 수 있기 때문에 더욱 비호감이 가는 키워드이다.

let, const, var 종합

	let	const	var
스코프 유효 범위	블록 스코프 및 함수 스코프	블록 스코프 및 함수 스코프	함수 스코프
재선언	불가능	불가능	가능
재할당	가능	불가능	가능