Javascript | 클린코드 자바스크립트(강의 정리) 1편

[1] var의 지양

---

[1-1. do not var]

즉 var로 변수 지정을 하지 말자는 것이다.

var는 함수 스코프를 가지며, 흔히들 전역변수라고 하여 전체적인 파일에 아주 부정적인 영향을 미친다.

 

예를들어

var global = '전역변수';

if (global === '전역변수'){
var global = '힝 속았지'
console.log(global);
}

console.log(global);

 

이런 코드가 있다고 치자.

 

우선 처음엔 global 이라는 변수를 var를 통해 '전역변수'라고 선언을 하였다.

하지만 if문 내에서 내 마음대로 다시 var를 통해 global을 '힝 속았지'로 변경을 했다.

그럼 각각의 console.log의 결과 값은 어떻게 나올까?

 

첫번째 log, 두번째 log 모두 다 '힝 속았지'라는 값이 나온다.

 

이렇게 if 문이라는 하나의 스코프 안에서 쓴 단순한 선언이지만

이것이 그 스코프 안에서만 적용되는것이 아닌

글로벌하게 적용이 된다는 뜻이다.

 

그래서 var를 함부로 사용하면 안된다.

 

그러면 뭐 안된다고 손가락만 쪽쪽 빨고 있어야하냐?

 

그건 아니당

 

let과 const는 블록단위의 스코프를 가지기 때문에 위와 같은 문제가 발생하지 않는다.

이게 이번 강의 핵심이였다.

 

그리고 바로 그것을 사용하는 예시가 다음강에 따라온다.

---

[1-2. function scope & block scope]

 

실제로 위와 같은 상황에서 var i = 1을

let 혹은 const i = 1로 바꾸면 어떻게 될까?

 

let global = '전역변수';

if (global === '전역변수'){

		// let global = '힝 속았지' => 에러발생 //
        
	global = '힝 속았지'
	console.log(global);
}

console.log(global);

 

우선 let으로 선언은 한 번만 가능하다.

let 을 사용해 다시 새로운 값을 변경하려고 하면 빨간 밑줄이 나올것이다.

방금 말한대로 선언이 한번만 가능하기 때문이다.

 

하지만 값 자체는 변경이 가능하기 때문에

위와 같이 global = '힝 속았지'로 값이 변경 가능하다.

 

그렇다면 콘솔에는 내용이 어떻게 나올까?

 

첫번째 log의 경우 '힝 속았지'

두번째 log의 경우 '힝 속았지' 라고 나온다.

 

const global = '전역변수';

if (global === '전역변수'){

		// const global = '힝 속았지' => 에러발생 //
        
   // global = '힝 속았지' => 에러발생 //
	console.log(global);
}

console.log(global);

 

const의 경우 재할당이 불가능하기 때문에 변경자체가 불가능하다.

그래서 첫번째 두번째 로그 전부다 '전역변수'라고 나온다.

 

그렇다면 값을 만약 변경하고 싶다면 어떻게 해야할까?

 

const person = {
  name : 'aase',
  age : '30'
}

person.name = 'lee'
person.age = '22'

 

위와 같은 형식으로 재 선언, 직접 할당하는 것이 아닌 값을 대치하는 식으로 진행해주면 무리없지 진행이 된다.

 

즉 const는 재할당만 금지되므로 배열이나 레퍼런스 객체 수정은 괜찮다는 말이다.

 

---

 

그리고 여기쯤 등장하는 TDZ(Temporal Dead Zone)라는 개념.

 

TDZ는 직역하면 일시적인 사망 지역으로 무슨말인지 모르겠다.

 

지금 내 수준에서는, 간단하게 선언 전에 변수를 사용하는 것을 허락하지 않는다라고 이해하고 넘어가면 될 듯 하다.

 

---

---

[1-3] 전역공간 사용 최소화 

전역 공간을 사용하지말라고들 많이 말하는데 그것을 무조건 적으로 맹목적으로 한다고 좋은 것은 아니다.

 

보통 그 이야기를

1. 경험

2. 누군가 혹은 JS생태계에서 추천
3. 강의 혹은 책
4. 회사 혹은 멘토들의 이유
5. LINT

 

에서 처음 듣게 되는데, 여기서 말하는 전역공간이란 최상위 공간을 의미한다.

 

브라우저에서는 window, 노드제이에스에서는 global

파일을 나눈다고 범위가 달라지는게 아님
그래서 글로벌로 함수 지정해두면 js파일 불러와서 볼떄 문제생길 수 있음
그래서 const let 쓰는게 좋다고도 하느것이다.

 

예를들어

test.html

ㄴ 1.js

ㄴ 2.js

라는 파일이 있는데

 

1.js에 var를 통해 var globalVar = 'GLOBAL' 이라는 코드를 짰다고 가정하자

그러면 이게 전역이기 때문에 2.js 에서 console.log(globalVar)와 같은걸 통해 이 변수에 접근이 가능한것이다.

물론 변경까지..

즉, var를 사용하면 전역공간을 나도 모르게 더럽히고 있는것이다.

이 문제를 조금 더 자세히 알기 위해서는 IIF(즉시 실행 함수) 그리고 Moudle에 대해서 알아야한다.

 

Closure, const, let 사용도 이러한 문제를 해결 할 수 있다.

위와 같은 것들을 통해 전역공간을 더럽히지 않게 코딩을 해야한다.

-> 정리하자면
1. 전역 변수 사용 x 

2.지역변수 사용하기 

3. window global에 접근하며 조작하지 않기 

4.const let OK 

5. IIFE Moudle Closure로 스코프를 나누기

---

[1-4] 임시변수 제거하기

 

임시변수란 무엇일까?

function getObj(){
  const result = {};

  result.title = document.querySelector('.title')
  result.text = document.querySelector('.text')
  result.value = document.querySelector('.value')

  return result;
}

 

어떻게 보면 임시 객체도 함수가 커지면 전역 공간이나 다름 없는 상황이 이루어짐
그렇게 되면 임시 객체들이 위험해지고
그렇기 때문에 함수를 쪼개면 좋아짐

이런 상황에서 임시 변수나 객체들을 어떻게 CRUD할까하고 고민

함수쪼개기 말고도 다양한 방법이 있다.

function getElements(){

  return {
    title : document.querySelector('.title'),
    text : document.querySelector('.text'),
    value : document.querySelector('.value')
  };
}

이렇게 객체로 리턴을 한다.
이렇게 하면 사이드 이펙트가 많지 않은 함수가 되어버린다.


추가적인 스펙이 생길때 치명적인 함수가 생길 수 있음.
1. 함수추가
2. 함수를 유지보수 및 수정

임시변수를 줄이고 추상화 해야함.
명령형에 가까운 코드는 좋지않다야.

임시변수를 활용하지 않는 방법

요약

임시변수는 안좋다.
임시변수를 제거해야하는 이유는 명령형으로 가득한 코드로직이 되기 때문인데
어디서 어떻게 잘못되었는지 디버깅이 어려워진다.

타인이 추가적인 코드작성을 하고 싶은 유혹에 빠지기 쉬워진다.

함수는 하나의 역할만 해야하는데 임시변수라는 키워드가 유혹을한다.

그래서 임시변수 해결하는 해결책은
함수를 나누고 바로 함수를 반환 리턴 한느것도 좋다
그리고 고차함수 (map. filter, reduce)같은 것들을 사용
마지막은 선언형(명령형 X) 코드로 바꾸는 연습을 한다.

 

[1-5] 호이스팅

선언과 할당이 분리된것

런타임 시기에 할당되며
런타임시기는 동작될 떄를 의미한다.

코드를 작성할때는 스코프가 어떻게 어떻게 동작할것이라고 예상하는데
스코프가 런타임에서 동작할때는 예상대로 움직이지 않는다.

 

그 현상중 하나가 바로 호이스팅인데
호이스팅은 var로 선언한 변수가 제대로 안되어있을때 undifined로 끌어오는것이 대표적인 예시다.

그런데 함수도 호이스팅이 됨...

 

마지막에 선언된 함수까지 호이스팅 됨.

그래서 함수 할당을 제대로 해주면 에러가 안뜨는데 애초에 이게 프로그래밍에 악영향을 줌


함수 표현식 vs 함수 선언문

.호이스팅
런타임시 선언을 최 상단으로 끌어올려주는 행위
문제는 코드를 작성할 때 예측하지 못한 실행 결과가 노출되는것이다.
그래서 힘든 개발상황이 만들어 질 수 있다.

1, 이런것들을 탈피하기 위해 var의 사용을 지양한다.
2. 그리고 함수도 호이스팅 된다.
=> 함수 표현식을 사용하는것이 가장 간당하고 좋은 방식이다.

 

< 2021.12.27 작성 - 수정 및 복습 예정 >