Notice
Recent Posts
Recent Comments
Link
개발 무지렁이
[JavaScript] 호이스팅과 var let const 키워드 본문
𐂂 '호이스팅 (Hoisting)' 이란
변수 및 함수 선언이 해당 스코프의 최상단으로 옮겨지는 현상을 말한다.
호이스팅은 선언부만 끌어 올려지고, 값을 할당하는 부분은 그대로 남아 있다.
호이스팅은 선언부만 끌어 올려지고, 값을 할당하는 부분은 그대로 남아 있다.
```javascript
console.log(x); //undefined
var x = 5;
console.log(xx); //5
```
𐂂 var 키워드로 변수를 선언하는 것은 권장하지 않는다.
함수 내에서 선언된 변수는 함수 내에서만 유효하고,
함수 외부에서는 참조할 수 없는 유효범위를 가지는 형태를 함수 레벨 스코프라 한다.
즉, 함수 내에서 선언된 변수는 지역변수이고 함수 외부에서 선언된 변수는
모두 전역변수이다. var키워드는 함수 레벨 스코프를 지역스코프로 인정하기 때문에,
자칫 의도치 않은 전역변수를 선언할 수 있다.
또한, 선언과 동시에 초기화해야하며, 중복선언이 가능하기 때문에 의도치 않는 값이 할당될 수 있다.
또한, 변수 호이스팅이 발생하여 코드의 흐름을 혼란스럽게 만들 수 있기 때문에 권장하지 않는다.
함수 외부에서는 참조할 수 없는 유효범위를 가지는 형태를 함수 레벨 스코프라 한다.
즉, 함수 내에서 선언된 변수는 지역변수이고 함수 외부에서 선언된 변수는
모두 전역변수이다. var키워드는 함수 레벨 스코프를 지역스코프로 인정하기 때문에,
자칫 의도치 않은 전역변수를 선언할 수 있다.
또한, 선언과 동시에 초기화해야하며, 중복선언이 가능하기 때문에 의도치 않는 값이 할당될 수 있다.
또한, 변수 호이스팅이 발생하여 코드의 흐름을 혼란스럽게 만들 수 있기 때문에 권장하지 않는다.
𐁍 값의 재할당이 필요한 경우 let 키워드 사용권장.
let 키워드는 블록레벨 스코프를 지역스코프로 인정한다. 블록레벨 스코프는 변수의 범위가 좁아지면서
의도치 않게 변수가 수정되는 것을 방지한다.
또한, 코드의 가독성이 향상되고, 변수가 더 짧은 생명주기를 가져 메모리 누수 가능성이 줄어든다.
또한, 특정 블록내에 묶여있어 모듈화된 코드작성을 용이하게 한다.
또한, 변수 호이스팅이 발생하지 않는 것처럼 동작해 코드의 흐름을 저해하지 않는다.
의도치 않게 변수가 수정되는 것을 방지한다.
또한, 코드의 가독성이 향상되고, 변수가 더 짧은 생명주기를 가져 메모리 누수 가능성이 줄어든다.
또한, 특정 블록내에 묶여있어 모듈화된 코드작성을 용이하게 한다.
또한, 변수 호이스팅이 발생하지 않는 것처럼 동작해 코드의 흐름을 저해하지 않는다.
𐁍 상수를 표현하기 위해 사용하는 const 키워드 (대문자로 선언, 스네이크 케이스)
변수의 선언과 동시에 초기화하지만, 값의 재할당이 금지되있어 한번 정해진 변수값을
변경할 수 있는 방법이 없다. 블록레벨 스코프를 지역스코프로 인정하며,
변수 호이스팅이 발생하지 않는 것처럼 동작해 코드의 흐름을 저해하지 않는다.
⚠️ 단, const 키워드로 선언한 변수에, 객체를 할당한 경우 그 값을 변경할 수 있다.
변경할 수 있는 방법이 없다. 블록레벨 스코프를 지역스코프로 인정하며,
변수 호이스팅이 발생하지 않는 것처럼 동작해 코드의 흐름을 저해하지 않는다.
⚠️ 단, const 키워드로 선언한 변수에, 객체를 할당한 경우 그 값을 변경할 수 있다.
'Frontend > JavaScript' 카테고리의 다른 글
[JavaScript] 호출 가능한 객체, 함수와 콜백함수 (0) | 2023.09.03 |
---|---|
[JavaScript] 값을 생성하는 리터럴, 값으로 평가되는 표현식 (0) | 2023.09.02 |
[jQuery] .attr()과 .prop() (0) | 2023.04.22 |
[jQuery] 트리거(trigger): 이벤트 강제 호출 (0) | 2023.04.22 |
[jQuery] FORM Validation on jQuery (0) | 2023.04.22 |
Comments