🖍 클린코드에 대해 고민할 때 고려해야 할 사항들.
1. 타인이 정의한 답을 의심해보는 것
타인이라고 하면 유명 강사나 유튜브, 블로그 글등을 포함한다.
맹목적으로 타인의 정답을 믿는다면 스스로 생각하는 습관을 닫게된다.
2. 배움에 열린 태도를 갖기
모두가 자신만의 코딩 스타일을 가지고 있다.
그러나 자신만의 코딩 스타일을 프레임에 넣고 갇히게 되면 발전할 수 없다.
3. 직접 생각하고 고민하기
첫번째 사항의 연장선. 스스로 생각해서 결론을 도출해냈다면
왜 그 결론에 도달했는지 다시 고민해보기
4. 흔히 알려진 자바스크립트 코드 스타일에 대한 견해를 인지하기
대표적으로 에어비앤비, 구글, ECMA 표준, Prettier, ESLint 등이 있다.
🖍 var를 지양해야 하는 이유 (변수에 관한 클린코드)
var를 지양하고 let & const 를 사용해야 한다는 이야기는 익히 들어 알고있다.
그러나 왜 var를 지양해야 하는지 사례를 통해 알아보자.
1. 변수 ?
변수는 하나의 값을 저장하기 위한 메모리 공간 자체 또는 식별을 위해 명명하는 행위를 뜻한다.
값을 변수에 저장하는 것을 할당, 변수에 저장된 값을 읽는 것을 참조
변수를 명명하는 것을 선언 이라고 한다.
자바스크립트의 변수 선언은 var, const, let 세 가지 방법으로 할 수 있으며,
const와 let이 ES6 부터 추가되었다.
var 는 함수 레벨의 스코프를,
let&const 는 블록 레벨 스코프와 함께 TDZ 속성을 갖는다.
let 은 재할당이 가능하며, const 는 재할당이 불가능하다.
이에 대한 자세한 설명은 다음과 같다.
자바스크립트 엔진에서의 변수는 다음과 같은 3단계를 걸쳐 선언된다.
변수를 실행 컨텍스트의 변수 객체에 등록하는 선언 단계,
실행 컨텍스트에 존재하는 변수 객체에 선언한 변수를 할당하기 위한 메모리를 만드는 초기화 단계,
(이때, 메모리에는 undefined로 초기화)
undefined로 초기화된 메모리에 값을 할당하는 할당 단계
모든 자바스크립트의 선언은 호이스팅의 영향을 받게되는데,
호이스팅이란 런타임시 선언단계를 최상단으로 끌어올려주는 것을 의미한다.
그런데, var 는 선언과 초기화가 동시에 일어난다.
var 의 생명주기는 다음과 같다.
따라서 변수의 할당 단계 이전에 호출하면 에러를 발생시키지 않고 undefined를 호출한다.
코드의 예시는 다음과 같다.
var global = 0;
const outer = () => {
console.log(global); // undefined
var global = 5;
const inner = () => {
var global = 10;
console.log(global); // 10
};
inner();
global = 1;
console.log(global); // 1
};
outer();var는 함수 레벨 스코프의 영향을 받으므로
첫번째 console.log 는 재할당 되기 이전의 값 undefined를 반환한다.
두번째 console.log 는 inner 함수 내부의 지역변수를 참조하여 10을 반환한다.
세번째 console.log 는 마지막으로 재할당된 값 1을 반환한다.
let과 const는 var와는 다른 생명주기를 가지게 되는데,
const와 let은 선언 단계와 초기화 단계를 분리한다.
TDZ(일시적 사각지대)는 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 의미한다.
const와 let 또한 호이스팅에 의한 선언 단계를 거치지만,
초기화 단계가 아직 시작되지 않았을 시점에 호출하면 메모리가 할당되지 않아 참조에러를 발생시킨다.
따라서, var 대신 const와 let을 사용하는 것 만으로도 이러한 위험을 다소 예방할 수 있다.
또 다른 이유로는 함수 레벨 스코프로 인한 전역 공간의 오염이 있다.
var global = '전역'
if(global === '전역') {
var global = '지역'
console.log(global); // 지역
}
console.log(global) // 지역var 로 선언한 전역변수 global이 if 내부의 재할당에 의해 영향을 받는 모습.
if는 함수 단위가 아니기 때문이다.
let global = '전역'
if(global === '전역') {
let global = '지역'
console.log(global); // 지역
}
console.log(global) // 전역동일한 로직을 let으로 변경하면 블록 레벨 스코프의 영향을 받게되므로 위와 같은 현상이 일어나지 않는다.
