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'}]