JavaScript

JavaScript-스코프(scope), 호이스팅(hoisting), var, let, constant

도도.__. 2023. 7. 18. 19:16

스코프(scope)

  • 변수를 선언하고 변수가 적용되는 범위.

지역 변수, 전역 변수

  • 지역 변수/로컬 변수(local variable) : 한 함수 안에서만 사용할 수 있는 함수.
  • 전역 변수/글로벌 변수(global variable) : 소스 전체에서 사용할 수 있는 함수.
    • 함수 안에서 전역 변수를 선언하고 싶다면 var 예약어를 사용하지 않으면 된다.
var num = 500; // 전역 변수 선언
globalTest();
document.write("globalVar = "+num+"<br>");
localTest();

function globalTest() {
    var num = 100; //지역 변수 선언
}

function localTest() {
    var num = 100; //지역 변수 선언
    document.write("localVar = "+num); //지역 변수 호출
}

 변수를 잘 모르겠다면 여기로 ↓ 

 

JavaScript-변수

변수와 상수 변수(variable) : 변할 수 있는 값 상수(constant) : 변하지 않는 값 ex) 테어난 연도 = 현재 연도 - 나이 + 1 에서 태어난 연도, 현재 연도, 나이는 변수(변할 수 있는 값)이고 1은 상수(변하지

dodo5517.tistory.com

호이스팅(hoisting)

  • 변수의 선언과 할당을 분리해서 선언 부분을 스코프의 가장 위쪽으로 끌어올리는 것.

var 변수의 특징

  • var를 사용한 변수는 호이스팅(hoisting) 한다.
    • 자바스크립트 해석기(interpreter)는 함수를 훑어보면서 var 변수를 따로 기억해 둔다.(=자바스크립트가 그 변수의 존재를 미리 알고 있다!!) 그렇기 때문에 변수를 선언하기 전에 사용해도 오류가 생기지 않는다.
  • 재선언이 가능하다.
    • 팀 프로젝트를 진행할 때 다른 사람이 같은 변수 이름을 사용해서 선언한 부분이 있다면 이전의 변수를 덮어쓰기 때문에 문제가 생길 수 있다. -> 이러한 문제를 방지하기 위해서 let이나 const 예약어를 사용한다.
test();

function test() {
    document.write("num = "+num);
    var num = 100; //var변수를 선언했기 때문에 오류는 나지 않지만 원하는 값이 나오지 않음.
}

let 변수 특징

  • 블록 영역({} 부분)의 스코프를 가진다.(var는 함수 영역의 스코프를 가짐.)
  • 호이스팅 하지 않는다.
  • 재선언을 할 수 없다. (그렇기 때문에 var 보다는 let의 사용을 권장한다.)
  • 재할당이 가능하다.
  • for문의 카운터 변수의 예약어로 추천한다.
function test() {
    let num = 5;    
    let num = 10; //let변수 재선언
    console.log(num);
}
test();

function test() {
    let num = 5;    
    num = 10; //let변수 재할당
    console.log(num);
}
test();

const 변수 특징

  • 블록 영역({} 부분)의 스코프를 가진다.
  • const로 선언한 변수는 상수(constant)이다.
  • 변하지 않는 특정한 상숫값을 자주 사용한다면 변수에 담아서 사용하는 것이 편리하다.
  • 재선언하거나 재할당할 수 없다.

도슐랭스타
★★★★☆ : 오 유용해 유용해~
새로운 내용들이 나와서 공부하는데 재밌었다. 솔직히 하면서 var, let, const 뭐가 다른 거야,, 하면서 답답했는데 이제는 알게 되어서 아주 그냥 속이 편안하다. 자바스크립트 해독기가 var 변수의 값은 모르지만 존재는 알고 있는 것이 마치 선생님들께서 학생의 이름은 알지만 어떤 학생인지 모르는 그런,, 존재감이 좀 없는 학생 느낌..? 어떤 학생인지 모르니 동명이인이면 문제가 생기는 게 당연한,, 이라는 생각을 했다.. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 다음 내용도 넘 궁금하당~

'JavaScript' 카테고리의 다른 글

JavaScript-Array(배열) 객체  (0) 2023.07.28
JavaScript-객체(object)  (0) 2023.07.22
JavaScript-함수  (0) 2023.07.11
JavaScript-제어문(if,switch,for,while문)  (0) 2023.07.06
JavaScript-연산자  (1) 2023.06.27