1. global scope와 block scope
Q. 전역 공간을 사용하지 말라(혹은 최소화)는 이유는 무엇일까?
scope
스코프는 참조 대상 식별자(Identifier, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙이다. 자바스크립트는 이 규칙대로 식별자를 찾는다.
- 프로그래밍은 변수를 선언하고 값을 할당하며 변수를 참조하는 기본적인 기능을 제공하며 이것으로 프로그램의 상태를 관리할 수 있습니다.
- 변수는 전역 또는 코드 블록(if, for, while, try catch)이나 함수 내에서 선언하며 코드 블록이나 함수는 중첩될 수 있습니다.
- 식별자는 자신이 어디에서 선언됐는지에 의해 자신이 유효한(다른 코드가 자신을 참조할 수 있는) 범위를 갖습니다.
Global Scope
코드 어디에서든지 참조할 수 있습니다. 이는 변수가 전역으로 선언되었음을 의미하는데 var 키워드로 선언한 전역 변수는 Broswer의 전역 객체(Global Object) window의 프로퍼티가 됩니다.
var global = 'global';
// 위에서 선언한 global이라는 변수는 브라우저 콘솔에서 window.global로 확인할 수 있습니다.
전역 변수의 사용은 변수의 이름이 중복될 수 있고(여러 파일들에서), 의도치 않은 재할당에 의한 상태 변화 코드를 예측하기 어렵게 만드므로 사용을 억제해야 합니다.
Block Scope
함수 코드 블록이 만든 스코프로 함수 자신과 하위 함수에서만 참조할 수 있습니다. 이는 변수가 함수 내부나 {} 블록 에서 생성되었음을 의미합니다.
var x = 'x'
function foo() {
var x = 'xx'
console.log(x)
}
foo() // 'xx'
console.log(x) // 'x'global(node)과 window(broswer) 환경의 최상위 공간 = 전역공간
전역은 브라우저, 노드 환경에서 최상위 공간이다.
var로 선언한 변수는 broswer의 window라는 최상위 공간에 값이 할당되어 전역으로 접근이 가능한 상태가 됩니다. 이 말은, 1번 스크립트 파일에서 선언한 전역 변수는 2번 스크립트 파일에서 읽고 쓸 수 있다는 뜻입니다.
이는 곧 팀 개발 환경에서 변수명에 대한 충돌을 일으킬 수 있는 취약한 환경이 됩니다.
이미 자바스크립트가 정의해 놓은 window라는 객체의 값들을 동일한 키값으로 덮어쓸수도 있기 때문에 위험의 요소를 가지고 있습니다.
요약
전역 공간을 더럽히면 안됩니다. 런타임 환경에서는 window라는 최상위 객체 공간에 전역 변수가 자리잡게 되기 때문에 이로 인한 코드충돌과 같은 혼란을 초래할 수 있습니다.
해결
전역 변수를 사용하지 않고 지역 변수 사용을 권장합니다.
window, global에 접근하며 조작하지 않도록 합니다.
IIFE(즉시 실행 함수), Module, Closure scope를 나누는 방법을 고민합니다.
2. 임시 변수 제거하기
함수 안에 존재하는 임시 변수는 추가적인 코드를 작성하고 싶은 유혹에 빠지게 합니다.
function getArrayLength(array) {
const result = array.length
// result가 0일때, "길이가 0입니다." 라는 string을 출력할까?
// 무언가 사이드 이펙트를 유발할 만한 유혹을 불러 일으킵니다.
// if(result.length === 0) result = "길이가 0 입니다."
return result
}임시변수인 resulst는 사실상 무의미 하다고 볼 수 있습니다.
function getArrayLength(array) {
return array.length
}함수가 하는 일이 명확해지고 더이상 손을 댈 구석이 없어 보입니다. 무언가 추가적인 작업을 하고 싶다면 다른 함수를 생성하거나 생성된 값을 재활용 하는 방법으로 유도됩니다.
임시변수 제거에 대한 최적의 해결책은 함수 나누기, return값 바로 반환, map, filter, reducer 등 고차함수를 사용하는 방법이 있겠습니다.
