[JavaScript] 함수 - scope와 shadowing

　JS는 HTML 내부에서 script 태그를 여러 개 사용하고 코드를 입력합니다. 이렇게 각기 다른 곳에서 온 코드가 한 곳에서 사용되면 변수 이름이 충돌할 가능성이 높습니다. JS는 이걸 어떻게 해결했을까요?

이번 글에서는 JS가 이름 충돌 문제를 해결하기 위해 사용한 방법과 scope, shadowing에 대해 다룹니다. 들어가기 전에 앞서 영단어 하나 보고 가겠습니다. 이해하는데 큰 도움이 될 겁니다.

scope
1. (무엇을 하거나 이룰 수 있는) 기회 [여지/능력]
2. (주제조직활동 등이 다루는) 범위

---

이름 충돌 문제

변수가 존재하는 범위를 scope라고 합니다. 아래 pi의 scope는 같은 단계에 있습니다. 그럼 충돌이 일어납니다.

><script>
> let pi = 3.14
> console.log(`파이 값은 ${pi}입니다.`)
</script>

><script>
> let pi = 3.141592
> console.log(`파이 값은 ${pi}입니다.`)
</script>

>> "파이 값은 3.14입니다."
>> Uncaught SyntaxError: Identifier 'pi' has already been declared

JS는 이 문제를 scope 단계를 변경함으로써 해결했습니다. 블록을 만들거나 함수를 생성합니다.

let pi = 3.14
> console.log(`파이 값은 ${pi}입니다.`)

// 블록을 사용한 scope 생성
> {
	let pi = 3.141592
  	console.log(`파이 값은 ${pi}입니다.`)
}
> console.log(`파이 값은 ${pi}입니다.`)

// 함수를 사용한 scope 생성
> function sample() {
	let pi = 3.141592
	console.log(`파이 값은 ${pi}입니다.`)
}

>sample()
>console.log(`파이 값은 ${pi}입니다.`)

>> "파이 값은 3.14입니다."
>> "파이 값은 3.141592입니다."
>> "파이 값은 3.14입니다."
>> "파이 값은 3.141592입니다."
>> "파이 값은 3.14입니다."

이렇게 블록 내부에서 같은 이름으로 변수를 선언하면 블록 내부 변수가 블록 외부 변수를 가립니다. 이걸 shadowing 현상이라고 합니다.

---

다음 글은 DOM에 대해 다룹니다.

💁‍♂️reference

혼자 공부하는 자바스크립트

윤인성 지음ㅣ한빛미디어ㅣ2021ㅣ도서 정보

EOD.