var 와 let 차이, 클로저, 즉시실행 함수

이재영·2023년 4월 5일
0

HTML CSS JS

목록 보기
18/22

var와 let 차이

function fun(){
    for (var i = 0; i < 5; i++) {
        
        setTimeout(() => {
            console.log(i);
            
        }, i*1000);
    }
}

위의 코드의 변수를 var 정의했을 때와 let으로 정의했을때
출력결과에 5가 5번 뜸 , let으로 하면 0 1 2 3 4 가 뜸
이유는 블록 스코프와 함수 스코프 차이이다.
var는 함수 스코프 , let은 블록 스코프
var로 선언한 변수는 함수 스코프를 가지고 함수의 어느곳에서든 접근이 가능하다.
for문도 함수 내부에서 실행되고 for문에 선언한 var 변수는 함수의 어디서든 접근이 가능하다.
for문 안에서 비동기 처리 함수가 호출되고 for문은 이미 다 종료되고
함수가 실행되기 때문에 5로 증가가 이미 되었고 함수스코프로 접근하기 때문에 5가 나온다.
함수 스코프 : 변수가 선언된 함수에서 유효하다.
함수에서 선언된 변수는 함수가 호출되고 종료되면 해제된다.
블록 스코프 : 변수가 선언된 블록에서 블록이 종료될 때 사라진다.

function fun2() {

    if(true){

        var a = 45;
        let b = 50;
    }
    console.log(a); // 호출이 됨.
    console.log(b); // 호출이 안됨.
    
}
a는 var로 정의했기 때문에 함수 스코프 이므로 if문 밖에서도 호출이 가능, 반면 b는 let으로 정의하여 블록 스코프, if문 밖에서는 호출이 안된다.

클로저

: 내부함수에서 외부함수 변수 사용가능.

function fun3() {
    let value = ""
    //내부 함수에서 외부함수의 변수를 사용
    function fun4(){
        if(value ==""){
            value = "클로저";
            return value;
        }
    }
    return fun4;
}

let closure = fun3();
let a = closure();
console.log(a); // 클로저

즉시 실행 함수

즉시 실행 함수를 사용하는 이유

: 변수나 함수명이 겹치지않게 충돌하지 않게 한번 실행시키고 사용하지 않을 것 같은 변수나 코드를 즉시 실행 함수로 만들고 호출하는 방식

즉시 실행 함수 사용방법

(function(){
    console.log("즉시 실행 함수");
    let a = 5;
}()); // 뒤에 ()를 붙여야 함수가 실행된다.

let a= 4;
console.log(a); // 즉시실행함수 이라서 a가 4로 출력된다.
profile
한걸음씩

0개의 댓글