해나아부지 개발일지

Scope in Javascript 본문

Developers/JavaScript

Scope in Javascript

__APPA 2020. 5. 16. 21:33
  var let  const
범위 Function Scope Block Scope Block Scope
값 재정의 가능 가능 불가능
재선언 가능 불가능 불가능

var는 기존의 레거시코드들에 이용되어 아예 사용하지 않을 수는 없다.

var를 사용하여 변수를 선언하게 되면 Function 내 전체에 범위가 유효하기 때문에 에러가 날 확률이 생긴다.

되도록이면 Block Scope 안에서만 유효한 let 사용을 지향하고 있다.

 

  let name = 'John doe'

  function anotherName() {
    let name = 'Jane doe'
    console.log(name)
    }
    console.log(name) // 'John doe'
 
  ------------------------------------
  anotherName() // 'Jane doe' 함수 실행 후에도
  console.log // 'John doe' name값은 바뀌지 않는다

showName() 함수 안에서의 변수 name은 let으로 선언되었기 때문에 anotherName()이 호출될 때만 해당 함수의 Block Scope ( { } ) 안에서만 'Jane doe' 라는 값을 가지게 된다.

 

var를 쓰면 어떻게 될까 ?

 

  var name = 'John doe'

  function anotherName() {
    name = 'Jane doe'
    console.log(name)
    }
    console.log(name) // 'John doe'

  ------------------------------------
  anotherName() // 'Jane doe'
  console.log(name) // 'Jane doe' <----!

var를 쓰게 되면 anotherName() 안에서 외부 name 값이 참조가 된다. 그 결과 anotherName()이 실행된 후 name값이

변하는 것을 볼 수 있다.

 

 

크롬 developer console(F12)에 window라고 쳐보면 수 많은 속성을 가지고 있는 Window라는 객체(object)가 나온다.

이것은 developer console 전역에서 쓰이는 속성들이 들어가 있는 객체라고 보면 된다.

 

 

 

console 창에 window 객체 가장 처음에 있는 alert()를 써보면 경고창을 띄워주는 method임을 확인할 수 있다.

var를 이용해 name을 선언해보았다. window 객체 속성을 다시 살펴보면

선언된  name이 전역 객체인 window의 속성으로 들어가 있는 것을 확인할 수 있다.

 

 

그래서! Block Scope 안의 유효범위를 가지는 let을 사용해야 한다는 것♬

 

p.s 엄격 모드를 사용하면 의도하지 않은 전역번수 선언을 막아줄 수 있습니다.

"use strict"

testVar = 10 // <-- Uncaught ReferenceError: testvar is not defined 발생
Comments