JS_문법 (개인)_ 변수 총정리

JS에서 변수를 만들 때 3가지 방법이 존재한다.

이들은 선언, 할당, 범위의 측면에서 서로 다른 특징을 가진다!

var 
let
const

 

	선언	할당	범위
var	재선언 O	재할당 O	함수 scope
let	재선언 X	재할당 O	블록 scope
const	재선언 X	재할당 X (객체 내부는 상관없음 )	블록 scope

 

- 만약 변경 불가능한 객체를 만들고 싶다면?

객체는 어떠한 방법으로 선언하여도 내부 요소에 대한 수정은 가능하다.

이를 방지하고 싶은 경우에는 아래의 방법을 이용한다.

 

Object.freeze( 수정불가하게 하고싶은 객체명 );

 

예시

const a = { name : "Kassid"};

Object.freeze(a);

a.name = "Hello";

console.log(a);

 

 

 

---

변수와 호이스팅

(자세히 다뤘던 글▼)

2023.03.31 - [🌌 | WEB DEV/Vanilla JS] - JS_기술 (3)_ Hoisting(호이스팅) 뿌수기

 

JS엔진은 변수를 보면 호이스팅을 한다.

즉, 변수 선언부를 해당 범위의 상단으로 끌고온다.

 

 

---

변수 한 번에 여러개

let name = "Kassid", age = 25, job = "student";

변수를 한 번에 여러개 선언 및 초기화 하고 싶은 경우 위와 같은 방식을 사용한다.

 

 

---

window로 전역변수 만들기

var 키워드는 전역변수를 만들면 window에 보관이 된다.

var val = "Hello";

console.log(window.val);

--------
Hello

 

이러한 전역변수를 var 키워드를 사용하지 않고 관리하기 위해서는 아래와 같은 방법을 사용한다.

window.val2 = "HALO";
console.log(window.val2);

 

(Node.js 에서는 global 키워드로 대체 가능!)

 

 

---

반복문에서의 버그 (w. var / let)

for (var i = 1; i < 6; i++) { 
  setTimeout(function() { console.log(i); }, i*1000 ); 
}

위의 반복문은 var로 정의된 i를 이용하여 1초 간격으로 1~5가 출력되도록 작성한 코드이다.

 

하지만 결과는 아래와 같다.

5
5
5
5
5

 

이렇게 기대한 것과 다르게 5만 출력이 된다. 그 이유는 무엇일까?

 

반복문을 살펴보면 setTimeout이 5회 호출된다.

이때 반복문이 종료될때까지 setTimeout 내부는 동시에 실행이 되지 않고,

setTimeout에 설정된 초에 맞추어 실행이 된다.

 

내부 코드가 실행이 될 때 i를 참조하는데

var 키워드로 선언이 되어있고 이 키워드의 적용 scope는 함수 범위이다.

 

즉, setTimeout 내부 코드가 실행이 될때

참조하는 i의 값은 각 블록마다 다른 것이 아닌 모든 블록이 같은 i를 참조하기 때문에

모두 5라는 값을 반환하는 것이다.

 

 

이를 해결하기 위해서는 어떻게 해야할까?

 

for (let i = 1; i < 6; i++) { 
  setTimeout(function() { console.log(i); }, i*1000 ); 
}

--------
1
2
3
4
5

 

간단히 let 키워드로 변경해주면 된다.

 

let은 블록 단위이기때문에 각 블록마다. let i =1, let i =2, ... 라고 선언한 효과를 얻을 수 있다.