[드림코딩]자바스크립트 기초 정리 ② var let const 변수 차이점 , 호이스팅과 블럭스코프란?

var, let, const의 차이점을 설명하기에 앞서 여기서 나올 기본개념을 정리해보자면,

우선 자바스크립트의 데이터 타입은 크게 두 가지로 분류가 가능하다

 

계속 변경이 가능한 Mutable 데이터 타입과,

변경이 불가능한 Immutable 데이터 타입이 존재한다.

이 두 가지의 예시는 밑에서 더 자세히 정리해보겠다

 

 

이미지 출처: https://valde.ci/post/es6/const-and-let/

 

 

위의 그림을 조금씩 참고해가며 var, let, const에 대해 이해하자

 

 

Var

?

 

요즘엔 var를 사용하는 추세는 아니지만 (아직 현업에서 사용하는 곳도 있긴 하다고 들었다)

왜 사용하지 않는지, ES6부터 새로 나온 let, const와 다른 점은 무엇인지 알아볼 필요가 있다.

var의 가장 큰 차이점은

 

• 변수의 재선언

var age = 1이라고 작성 후, 밑에서 var age = 2라고 하는 경우 (age 변수 중복 선언이 가능하다)

 

• 값 변경 가능

var age = 1 이라고 가정했을 때, 변수가 선언된 뒤에 age = 3으로 변수의 값을 변경 가능하다

 

• 호이스팅

밑에서 설명 예정

 

• 함수 스코프

원래 조건문 같은 for문 안에 선언된 변수는 조건문이 끝남과 동시에 소멸된다.

하지만 var 변수는 함수 스코프이기 때문에 for문이 종료되어도 블록 밖에서 변수를 호출하면 변수가 출력된다

(함수스코프는 함수가 종료되기 전까지 유효하기 때문이다)

 

  

이렇게 4가지가 존재한다.

 

자바스크립트를 공부한다면 호이스팅과 블럭스코프의 개념은 필수적으로 이해하고 넘어가야 한다

var는 let, const와 다르게 호이스팅이 적용되며, 블럭스코프는 적용되지 않는다.

이게 도대체 무슨 말일까?

 

 

hoisting 호이스팅

?

 

변수를 어디에 선언했느냐에 상관없이 항상 코드 제일 위로 선언을 끌어올려 주는 것

 

 

언뜻 들어선 이게 큰 문제가 되나?라고 생각할 수 있지만

여기서 문제가 생기는 부분은 대부분의 프로그래밍 언어는 변수를 먼저 선언 후, 값을 사용하는 것이 정상이다.

하지만 var를 사용하게 되면 선언하기 전에 값을 먼저 할당하고, 심지어 값을 먼저 할당하기 전에 출력도 가능하다

(순서와 질서 따윈 개나 줘 버려...)

 

위의 예시처럼 console.log로 변수 선언 및 변수에 값을 할당하기도 전에 먼저 출력하고 뒤늦게 age에 초기값을 주었으며, 마지막으로 age 변수를 선언했다. 말도 안 되는 순서인데도 자바스크립트는 정확히 4라는 값을 출력해준다.

이게 바로 var의 특징 중 하나인 호이스팅이다.

분명 age 변수를 밑에서 선언했음에도 불구하고, 이 호이스팅으로 인해 실제 실행 처리는

var age를 코드 제일 위에 선언한 것으로 작동된다.

 

 

블록 스코프란

?

 

블록{} 안에서 코드를 작성하면(지역변수라 부른다) 블럭{} 밖에서는 이 코드를 불러오지 못한다. 

반대로, 블록 밖에서 작성하는 코드는 어디서든 (밖에서든 안에서든) 불러오는 게 가능하다

 

코팅된 유리창을 생각하면 이해하기 쉬운데, 건물 안에서는 밖을 볼 때 그 유리창이 코팅이 되어있어도 밖을 볼 수 있지만

밖에 있는 사람들은 건물 안을 볼 수 없다. 

 

여기서 블럭 밖에서 작성된 변수는 전역 스코프 및 글로벌 스코프라고 주로 부르며,

애플리케이션이 실행되는 순간부터 종료되는 순간까지 메모리에 탑재돼있기 때문에

가능하면 최소한으로 사용하고 함수, for문을 정의해서 사용하는 것이 좋다. 

 

 

 

var는 블럭스코프 (block-level scope)가 아닌 함수스코프 (function-level scope)

!

 

 

하지만 var에선 블럭스코프가 적용되지 않는다

위의 코드를 보면 age라는 변수는 블럭 { } 안에서 선언했음에도 불구하고, 블럭 밖에서 출력하면 정상적으로 나온다

 

 

 

위의 상황을 비교해서 설명하자면,

(뒤에서 설명할) const 로 블럭안에 변수를 선언 후, 밖에서 console.log로 변수를 출력하면 에러 메시지가 뜬다.

이는 블럭스코프가 적용되었기 때문에 에러 메시지가 출력되는 것이고

반대로 var는 블럭스코프 적용이 되지 않기 때문에 값이 정상적으로 나온다.

 

 

let

?

 

let은 읽고 쓰는 것, 변경이 가능한 Mutable 데이터 타입이다
변경할 수 있다는 점은 var와 같지만, let은 호이스팅이 적용되지 않으며 글로벌스코프가 존재한다

호이스팅이 적용되지 않는다는 것은 선언 후에 변수 사용이 가능하다는 것으로 이해하면 될 것이다

변수의 값이 계속 변경되야하는 상황에서 사용하며, 변수를 선언할 땐 가급적 const를 사용하는 것이 좋다.

 

 

const

?

 

let, var와 반대로 변경이 불가능한 Immutable 데이터 타입이고,
const(constant)는 상수이며 변경이 불가능하고 오직 읽기만 가능하다

값을 선언함과 동시에 포인터가 잠겨서 값을 다시 변경하는 것이 불가능하다

let과 마찬가지로 호이스팅이 적용되지 않고, 블럭스코프에 해당한다.

 

 

변수를 선언할 때 const 사용을 권하는 대표적인 3가지 이유

?

 

• 보안상의 이유

작성한 코드에 해커들이 다른 이상한 코드를 삽입해서 값을 계속 변경하는 것이 가능하여 이를 방지한다

 

• thread safety

애플리케이션이 실행되면 한 가지의 프로세스가 할당이 되고 이 프로세스 안에서는 다양한 thread가 동시에 돌아가면서 애플리케이션을 효율적으로 동작하도록 도와준다.

하지만 다양한 thread가 동시에 변수에 접근하면서 값을 변경하는 건 위험 부담감이 있다.

그래서 가능하면 값이 변하지 않는 상수 const 를 사용하는 것이 좋다

 

• reduce Human Mistakes

본인이 나중에 코드를 변경하거나 다른 개발자가 코드 변경할 때에도 실수를 방지해준다

 

 

이렇게 자바스크립트의 기초인 var, let, const 변수에 대한 차이점과

호이스팅, 블록레벨스코프의 개념에 대해 알아보았다

조금이나마 개념잡기에 도움이 되었다면 좋겠다

:)

 

 

 

Ref

https://www.youtube.com/watch?v=OCCpGh4ujb8&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=3