일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 회고
- 개발공부
- ES6
- Andrew Ng
- 객체
- 자바스크립트
- NextJS
- 끈기
- Til
- docker
- 러닝자바스크립트
- reactnative
- CSS
- nodejs
- Machine Learning
- Linux
- Sequence
- multer
- React
- 클로저
- 1일1문장
- javascript
- coursera
- 우선순위
- scope
- 리눅스
- 스파르타코딩클럽
- 데이터전송
- 자료구조
- HTTP
- Today
- Total
해나아부지 개발일지
Scope in Javascript 본문
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 발생
'Developers > JavaScript' 카테고리의 다른 글
날짜 시간 얻기(get date format) javascript (0) | 2020.06.11 |
---|---|
클로저, 람다 (0) | 2020.05.21 |
Math.Random()을 이용한 임의의 정수, 문자열 리턴하기 (0) | 2020.05.05 |
map vs filter vs reduce (0) | 2020.04.29 |
Mutable vs Immutable (0) | 2020.04.28 |