자바스크립트를 위한 클린코드 작성-1

프로토타입 기반 언어,

NaN이 NaN이 아닌 언어,

함수를 표현하는 데에만 4가지 표현식이 있는 언어,

여튼 간에 쫌 이상한 구석이 있는 언어인 Javascript.

 

Node.js를 통해 로컬에서 돌릴 수도 있고,

웹 브라우저를 통해 Web API를 이용할 수 있으며,

Electron, Flutter, React Native 등 다양한 플랫폼을 위한 프로그램을 만들 수도 있는 언어이다.

 

생각보다 매우 다양한 곳에서 쓰이며,

프론트엔드/백엔드의 풀스택 언어로도 가장 많이 쓰이는 언어이다.

 

오늘부터 클린코드 작성을 위해서 여러 자료를 모아서 작성하려고 한다.

 

책 / 인터넷 강의 / 유튜브 등 여기저기서 모아온 지식들을 공유한다.

 

 

 

 

1. 변수 선언시 var 선언을 되도록 사용하지 말자.

프로그래밍 언어를 배울 때 가장 먼저 배우는 것 중에 하나가 변수이다.

자바스크립트는 계속 변화하는 언어이다.

 

기존에는 var라는 키워드로 변수를 선언했지만,

ES2015 버전 이후에서는 변수를 선언하는 키워드가 2(let, const)개 추가되었다.

 

var 키워드는 함수 단위의 스코프(범위)에서 유효하며,

let, const 키워드는 블록 단위의 스코프에서 유효하다.

 

var를 자주 사용하지 말라는 이유는 무엇일까?

 

• 1. 변수명이 중복으로 선언되어도 동작한다.

var name = "아이언맨"
var name = "블랙위도우"
var name = "캡틴아메리카"

console.log(name) // "캡틴아메리카"

// 이렇게 적어도 동작한다.

이런 경우에는 코드가 길어지면 치명적이다.

위에서 선언한 변수로 똑같이 선언하면 말 그대로 '덮어 씌워'지는 것이다.

 

• 2. 함수 단위로 유효하다.

함수단위로 유효하다는 뜻은 다음 예시를 통해서 알아보자.

if문을 사용하여 하나의 블럭을 생성해본다.

var name_hero = "캡틴아메리카";

if (name_hero === "캡틴아메리카") {
  var name_hero = "블랙위도우";

  console.log(name_hero); // 블랙위도우
}

console.log(name_hero); // 블랙위도우

가장 위에 선언해둔 전역변수까지 바뀌어버렸다.

우리가 기대하는 것은 블록 밖에 있는 변수는 내가 선언한 전역변수(캡틴아메리카)가 그대로 출력되는 것이었다.

 

이런 현상은 여러 언어를 코딩하는 프로그래머에게는 기대와 다른 결과를 낳을 수 있게 만든다.

 

let으로 바꾼다면 당연히 블록 단위로 실행될 것이므로 밖에 있는 name_hero는 캡틴아메리카가 출력된다.

 

• 3. 호이스팅(hoisting)이 일어난다.

호이스팅이란 var로 쓴 변수가 유효한 범위(함수 내부에서만, 혹은 전체에서만) 내에서 가장 최상단으로 '정의'되는 것을 말한다.

 

예를 들면 이런 경우이다.

 

var 전역변수 = "캡틴아메리카";

function 바깥함수() {
    console.log(전역변수);  // undefined
    var 전역변수 = "블랙위도우";

    function 안쪽함수() {
        var 전역변수 = "앤트맨";
        console.log(전역변수)  // 앤트맨
    }

    안쪽함수()
    
    전역변수 = "아이언맨"
    console.log(전역변수)  // 아이언맨
}

바깥함수()

이 경우 가장 위의 undefined가 나오는 출력값이 나오는 이유는,

console.log 하기 전에 [var 전역변수] 부분이 바깥함수 내부에서 가장 윗 줄로 강제로 끌어올려지기 때문이다.

 

무슨 말이냐면, 자바스크립트가 실행될 때 var로 되어있는 모든 변수를

그 변수가 유효한 위치에서 무조건 가장 위로 끌어올린다. 단, 값은 할당하지 않고 '선언'만 한 상태로 올린다.

[var 전역변수] <--- 선언 (이렇게 최상단으로 올라감)

[var 전역변수 = "값"]  <------ 할당 (이렇게 올라가지 않음)

 

그렇다보니,

[var 전역변수]만 함수의 최상단으로 올라가서 해당 값은 현재 비어있는 상태고,

공간은 선언되어있는데 값이 할당되지 않는 상태를 자바스크립트에서는 값이 정해지지 않았다는 의미의

'undefined'를 출력하게 된다.

 

이렇게 되면 값이 비어있는 상태로 연산이 되거나 문제가 되는 경우가 발생할 수 있기 때문에

var를 지양하는 것이 좋다.

 

 

 

 

---

읽어볼만한 글 :

 

1. Javascript의 Prototype

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes

Object prototypes - Learn web development | MDN

2. JS is Weird (자바스크립트는 이상하다.)

https://jsisweird.com/

Jacob Bergdahl

 

3. WTFJS (도대체 자바스크립트 왜 이래..? 정도로 해석;;)

https://github.com/denysdovhan/wtfjs

GitHub - denysdovhan/wtfjs: 🤪 A list of funny and tricky JavaScript examples

 

4. 자바스크립트의 함수 표현법

 

5. 자바스크립트 var 키워드의 호이스팅(hoisting)에 대하여

https://developer.mozilla.org/en-US/docs/Glossary/Hoisting

Hoisting - MDN Web Docs Glossary: Definitions of Web-related terms | MDN