[ JS 기초 ] 기본 코드 - 변수(var,let) 활용

연습코드 01 : 변수 설정해서 출력

function print_name(){
    var my_name = "no one"
    my_name = "dduba-dduba"
    console.log(my_name)	// "dduba-dduba"
}

 

연습코드 02 : 변수 호이스팅

function hoisting() {
    var start = "This is start"
    end = "This is end"
    
    var end;
    console.log(start,end)	// This is start, This is end
}

 

에러가 나지 않고 나중에 변수를 선언해도 위쪽으로 호이스팅 되어 그대로 출력됨
- 변수 호이스팅 : 변수를 어디에서 선언하든 변수 선언이 함수의 맨 앞으로 이동
- 스크립트 맨 마지막에 선언된 변수라도 그 코드가 맨 마지막에 실행되는게 아님!

 

연습코드 03 : var

function see_var(number) {
    if (number) {
        var say = "say 라는 변수를 인식할 수 있습니다"
    }
    console.log(say)
}

see_var(0)	// "undefined"
see_var(10)	// "say 라는 변수를 인식할 수 있습니다"

if 문 안에 변수가 있어도 함수 범위 내에서는 if문 밖에서도 접근할 수 있다는 게 var의 특징 (아래 코드도 마찬가지)

function see_var(number) {
    var say
    if (number) {
        say = "say 라는 변수를 인식할 수 있습니다"
    }
    console.log(say)
}

see_var(0)	// "undefined"
see_var(10)	// "say 라는 변수를 인식할 수 있습니다"

 

만약, 함수 바깥에 전역변수 say 가 있고, 함수 내부에서 다시 say가 재선언되었다면?

var say = "outside"
function see_var(number) {
    if (number) {
        var say = "say 라는 변수를 인식할 수 있습니다"
    }
    console.log(say)
}

console.log(say)		// outside
see_var(0)			// "undefined"
see_var(10)			// "say 라는 변수를 인식할 수 있습니다"

 

연습 코드 04 : let

function see_let(number) {
    if (number) {
        let speak = "let을 사용해 speak 변수를 만들었다"
    }
    console.log(speak)
}
see_let(10)			// 에러 - speak is not defined 
see_let(0)			
console.log(speak)

var에서는 잘 출력되던 코드인데 let에서는 에러가 남
- let은 가장 가까운 블록 범위( 위 코드에서는 if문의 { 여기! } )에서 사용 가능하다

 

기억할 것
- var의 범위 : 가장 가까운 함수 범위
- let의 범위 : 가장 가까운 블록 범위