Web Front-end 공부/Java script
[JavaScript] function scope & block scope
Hanachoi
2023. 3. 10. 03:48
- 아래의 예시에서는 var를 사용해 global이라는 변수를 선언했다.
- 우리가 예상했던건, if문안에서 var를 사용해 global을 선언해주면 if문 안에서만 global이 '지역'으로 뜨고 if 문 밖에서는 원래대로 global이 '전역'으로 뜨는 것이었다. 하지만 if문 밖에서도 global은 '지역'으로 바뀌고 말았다.
var global = '전역'
if(global==='전역'){
var global = '지역'
console.log(global); // 지역
}
console.log(global) // 지역
- 왜 전역공간에 있는 스코프까지 오염이 되어버렸을까? 바로 if문을 사용했기 때문이다.
- var는 함수단위 스코프인데, if문은 함수가 아니다. 블록단위 스코프로 바꾸지 않는 이상 계속 이런 불안요소들이 발생하는 것이다.
- let으로 바꾸면 어떻게 될까?
var global = '전역'
if(global==='전역'){
var global = '지역'
console.log(global); // 지역
}
console.log(global) // 전역
- let으로 변경하면 지역변수의 역할이 블록단위로 잘 작동하는걸 볼 수 있다.
- 블록단위로 구성하기 위해 { }중괄호만 넣어줘도 작동이 잘 되는걸 볼 수 있다.
let global = '전역'
{
let global = '지역'
console.log(global) ; // 지역
}
console.log(global); // 전역
- 사실 let보다도 const를 쓰는게 더 좋다.
- 재할당이라는 키워드만 생각을 하면 된다. const는 재할당만 안된다. 본연의 객체, 배열같은 레퍼런스 객체들을 조작할때는 이상없이 작동한다.
const person = {
name : 'jang',
age : '30'
}
person = { //재할당을 시도하면 에러가 발생한다.
name : 'jang2',
age : '31'
}
person.name = 'lee'
person.age = '32'
// person을 재할당하지 않고 객체 내부의 값만 바꿔주면 객체안 내용 변경이 가능하다
- 배열은 어떻게 변경시킬 수 있을까?
- push를 사용해 새로운 값을 넣어줄 수 있다.
const person = [{
name : 'jang',
age : '30'
}]
person.push ({
name : 'jang2',
age : '31'
});
console.log(person)// [{name : 'jang',age : '30'}, {name : 'jang2', age : '31'}]