Before I Learned

var, let, const의 차이점은 어느정도 알고 있었다. 하지만 생활코딩님 유튜브에서 소스창을 보며 설명을 들으니 너무 얕게 알고 있었음을 깨달았고, 강의를 통해 좀 더 자세하게 이해할 수 있었다.

이전까지 알고 있었던 개념에 의하면,

var = 오래된 변수 선언 방식으로 가급적이면 사용하는 것을 추천하지 않음.
let = 재할당이 가능한 변수 선언 방식
const = 재할당이 불가능한 변수 선언 방식

정도로 알고 있었다.

Execute context

생활코딩님의 JavaScript - Execute Context 강의를 들으면서 개발자 도구의 소스 창을 통해 디버깅하며 어디서 오류가 나는지, 코드가 어떻게 작동하는지 좀 더 자세하게 알 수 있었다.

변수를 선언하면 저장되는 범위가 있는데,

n0 = n0
var v0 = v0

위의 두가지 방식으로 선언된 변수는 전역 범위(Global)에 저장되게 된다.

Global Scope

Global은 어디서 실행을 하던 접근이 가능하다! 그리고 자바스크립트는 이를 window라는 객체에 저장한다.
하지만 전역 범위는 실행되는 코드의 모든 정보가 저장되는 곳으로 각 페이지에 하나만 있는 저장범위이기 때문에 굉장히 많은 정보가 들어가있다고 한다. 이렇게 복잡한 곳에 저장되는 변수이기 때문에 해당 변수를 호출하게 되면 전역 범위를 다 뒤져서 찾아야한다는 단점이 있다.

Script Scope

let과 const의 경우, script 범위에 저장된다. script도 전역적으로 접근이 가능한 범위인데, 자바스크립트는 script에 저장된 변수를 우선적으로 읽기 때문에 훨씬 더 간편하게 변수를 호출할 수 있다.
단, window라는 객체가 붙을 때만 제외하고!! 앞서 언급했듯 global을 window라는 객체에 저장하기 때문이다.

Local Scope

함수 안으로 들어가게 되면 local이라는 범위가 하나 더 생기게 된다. 바로 함수 내에서 생성된 변수들이 저장되는 범위이다. local범위에 있는 변수들은 해당 함수 내에서만 불러와서 사용할 수 있으며, 다른 함수에서 호출은 불가능하다!
함수 내에서 let과 const가 선언된다면? script가 아닌 local에 저장이 된다! 따라서 let과 const라고 하더라도 특정 함수 내에서 변수가 선언되었다면 다른 함수에서 불러와 사용하지 못한다.

정리해보자면, 실행된 함수에서 불러올 수 있는 변수는 Global, Script, 실행된 함수의 Local에 저장된 함수만 불러올 수 있다는 것이다.

Lecture Link

생활코딩 JavaScript - Execute context

Closure

어떤 함수가 가지는 유효범위는 함수가 호출된 범위가 아닌 함수가 정의된 부분에서 유효 범위를 가진다.

자바스크립트는 동적인 범위를 가지는 것이 아닌 정적인 범위를 가지기 때문이다.

이런 특성때문에 함수를 중첩시켜 작성하게 되는데, 함수가 중첩되어 작성되었을때 바깥쪽의 함수. 즉, 부모 함주의 변수에 접근 하는 범위를 closure라고 한다.

function fn1(){
	function fn2(){
    	let l2 = "l2";
        }
     let l1 = "l1";
     fn2();
     }
fn1();

이럴 경우, fn2의 함수를 실행시켰을 때 local scope에 저장된 변수는 l2가 되고, closure에 저장되는 변수는 l1이 된다.

function 더하기공장(초기값){
	function 덧셈(숫자){
    	return 초기값 + 숫자;
        }
        return 덧셈;
	}

let 더하기1 = 더하기공장(1);
console.log(더하기1(2));

console.log(더하기1(2));이 실행된 시점에서 범위를 살펴보자.

Local scope에는 숫자:2가 들어있고,
Script scope에는 더하기1이라는 함수가 들어있다.
Closure에는 초기값:1이 들어있다.

즉, closure라는 개념을 활용하면 함수가 선언된 범위 밖에서 부모 함수를 호출하더라도 부모 함수가 가지고 있는 자식 함수의 범위까지도 접근하여 사용이 가능하다!

Lecture Link

생활코딩 JavaScript - closure

var VS let VS const

var는 자바스크립트의 전통적인 변수 선언 방식이다.
현재는 let을 사용하는 것을 권장하며, 변수가 변하지 않을 값이라면 const를 사용하는 것을 권장한다.

var 와 let, const의 차이를 알아보기 위해서 block scope라는 범위도 알게 되었다.

block scope는 { 블럭 } 가 사용되는 for문, if문, 함수에서 사용되는 범위이다.

var의 경우, 함수 안에서 변수가 선언되어 local scope에 저장이 된다 하더라도 기본적으로 global scope에 저장이 되기 때문에 재선언을 할 때 마다 값이 바뀌어서 출력되는 것을 확인할 수 있다.

let은 함수나 { 블럭 } 안에서 정의가 되면 local scope뿐만 아니라 block scope에도 값이 따로 저장이 된다. { 블럭 } 범위를 벗어나게 되면 local, block scope는 사라지기 때문에 이전에 선언한 변수에 영향을 미치지 않는다.
scope는 local ・ block > script > global 순으로 읽어 내려오기 때문에 먼저 발견되는 값이 출력되는 구조이다. 따라서 { 블럭 } 범위를 벗어나게 되면 script에 저장되어있던 원래의 값이 출력이 가능한 것이다!

또 다른 차이점으로는 var는 재선언이 가능하지만 let과 const는 재선언을 하게되면 error가 발생하게 되고, var와 let은 재할당이 가능하지만 const는 재할당도 불가능 하다는 차이점이 있다.

example

var i = "I";
for (var i = 0; i<1;i++){
  console.log(i); 
}
console.log(i); //1

위의 예시에서 볼 수 있듯이 for문의 바깥쪽에서 i를 호출하더라도 for문 내부에서 선언한 i가 출력되는 것을 볼 수 있다. for문에서 선언한 i가 global scope에 저장되었던 i를 바꾸었기 때문!!

let j = "J";
for (let j = 0; j<1;j++){
  console.log(j);//1
}
console.log(j);//J

let의 경우에는 for문 안에서 선언된 j가 block scope에 저장이 되었다가 for문을 벗어나면서 사라졌기 때문에 for문 외부에서 호출하였을 경우 script scope에 저장되어있던 J가 출력되는 것을 확인할 수 있다.

var a = 1;
var a = 3;

이렇게 재선언을 하더라도 var에서는 error가 나지 않지만,

let a = 1;
a = 3; //재할당은 가능!
let a = 4; // 재선언의 경우에는 에러가 발생한다. 

let에서는 재할당은 가능하지만 재선언을 하게되면 error가 발생한다.

var VS let VS const Summary

Lecture Link

생활코딩 JavaScript - var VS let VS const