클린코드 작성하기 - 1

클린코드에 대해서 항상 많은 고민을 했습니다.

기능 구현에만 앞선던 코드들을 어디 내놓으려니 부끄럽기도 합니다.

팀원들에게 보여줄 수 있고, 그들이 한번에 이해하기 쉬운 코드를 짜야겠다 라는 생각으로

자바스크립트 클린코드 에 대한 공부를 시작했습니다.

클린코드에 대해 고민하기

- 남이 적은 코드가 항상 맞진 않습니다.

- 물론 내 코드도 항상 옳지 않습니다.

- 항상 열린 태도로 여러 코드를 읽어보고 판단하는 것이 중요합니다

JavaScript 특성 파악하기

JS 의 폭발적인 성장은 Node.js 가 생기면서 부터 입니다.

Node.js는 크롬 v8 엔진으로 빌드 된 자바스크립트 실행 환경입니다.

현재는 Electron처럼 자바스크립트로 데스크탑 애플리케이션을 만드는 프레임워크도 있어 많은 프로그램을 만듭니다.

노션이나 VSCode 또한 js 기반으로 만들어졌다고 합니다. 🫢

Js는 치명적인 단점이 있습니다.

런타임 중에 내용이 변경되는 특성이 있는데 몽키 패치🐒라고도 불립니다.

var 지양하기

let 과 const는 ES6 부터 생겼습니다.

var는 함수 스코프이고, let & const는 블록 단위 스코프를 갖고 있습니다.

var는 선언한 내용이 다시 중복 선언이 가능하기 때문에 코드가 길어질 경우 위험에 노출됩니다.

var global= 1
  if(global===1){
      global = 2
  }
global => 2

전역 변수로 global 을 만들어서 사용해서 다른 스코프에서 변경하면 원래의 값이 변경됩니다.

let global = 1
  if(global===1){
      global = 2
      global >> 2
  }
global >> 1

하지만 let으로 선언하면 블록 안에서만 변경되기 때문에 블록 밖에서는 원래의 값을 사용가능합니다.

const global = 1
    if(global===1){
        let global = 2
        global >> 2
    }
global >> 1

블록이 다르기 때문에 두번 선언하더라도 에러가 발생하지 않습니다.

전역공간을 사용하지 말라

전역공간 : 최상위 환경

• global - node JS 환경
• window - 브라우저 환경

스코프를 나눠서 작업을 해야 하지만, 다른 곳에서도 사용이 가능해집니다.

var 를 사용하면, 전역변수로 선언이 됩니다

임시 변수 제거하기

임시 변수의 단점 ⇒ 명령형으로 가득한 로직 , 디버깅이 힘들고 유지보수가 어렵다.

해결 방법 : 함수 나누기 , 바로 반환, 고차함수 (map,filter,reduce), 선언형 함수로 변환

function getElement(){
    const result = {}
    result.a = 'a'
    result.b = 'b'
    result.c = 'c'
    return result 
}

result 라는 변수를 만들어서 return 하고 있지만 , 임시 변수를 최대한 줄이는 것이 좋습니다.

function getElement(){
     return { a:'a',b:'b',c:'c'}
}

호이스팅

호이스팅 : 런타임시 선언을 최상단으로 끌어올려 주는 것을 뜻합니다.

문제 : 코드를 작성할 때 예측하지 못하는 것이 실행되기도 합니다.

• var 를 이용하면 선언을 하기 전에 데이터를 할당하기 때문에 undefined가 나올 수 있습니다.

방법 : var 을 안쓰고 , 함수를 함수 표현식으로 사용하면 오류를 줄일 수 있습니다.