hoisting 개념 정리하기2 Var Let Const

Var vs Let

1) 스코프 Scope

• Var : Function Scope 함수범위

  • 변수가 선언된 함수 내부에서만 접근이 가능합니다.

//예제 1번
function main(){
 	if(true){
    var x = "hi"
    }
  	console.log(x)
}
main()
// console.log 값이 나온다.

//예제 2
function main(){
	var x = "hello"
    if(true){
    	var x = "hi"
	}
  console.log(x)
}

main()
// console에 hi가 나옵니다

• Let : Block Scope 블록 범위
  • 변수가 선언된 변수 내부에서만 접근이 가능합니다. 여기서 블럭은 { } 뜻합니다.

//예제 1번
function main(){
 	if(true){
    let x = "hi"
    }
  	console.log(x)
}
main()
// console.log 값이 나오지 않는다.

//예제 2
function main(){
	let x = "hello"
    if(true){
    	let x = "hi"
	}
  console.log(x)
}

main()
// console에 hello가 나옵니다

Global Scope 전역 범위

var aVar = "varHello"
let aLet = "letHello"

console.log(window)
// window 객aVar 를 확인 할 수 있습니다.
// var 키워드를 사용하여 전역객체를 사용하는 것은 위험하다.

중복 선언

var

var x = "안녕하세요"

// ........... 수천 줄의 코드가 있다고 가정한다
var x = " hi"

console.log(x)
// 콘솔에 hi가 나옵니다.

let

let x = "안녕하세요"

// ........... 수천 줄의 코드가 있다고 가정한다
let x = " hi"

console.log(x)
// 이미 선언이 되었다고 에러표시가 발생한다. 

hoisting

var

console.log(num) // undefined가 출력됩니다. => 
// 선언문은 가장 위로 올라가기 때문에 undefined가 출력되는 것입니다.

var num = 10
console.log(num // 10이 출력됩니다.

let

console.log(num) //  TDZ에 의해 선언문이 맨 위로 끌어올라가지만 일시적 사각지대 안에 있기 때문에 에러가 발생합니다. 
//자바스크립트는 TDZ 접근을 허용하지 않습니다.

let num = 10
console.log(num // 10이 출력됩니다.y: 

const

• 블록스코프
• 중복 선언 불가
• 선언문 이전 접근 불가
• 객체 불변성

   const a = {
   x: 1, 
   y: 2
}
   a.x= 3

console,log(a) // 바뀐값이 나옵니다.
// 새로운 객체를 할당하는 것이 아닌 이미 갖고 있는 객체를 유지하면서
// 내부에 있는 속성을 바꾸는 것이기 때문에 가능하다.

// 객체의 불변성을 유지하고 싶다면?  Object.freeze로 유지할 수 있습니다)
   const a = Object.freeze({
   x: 1, 
   y: 2
})
   a.x= 3

console,log(a)