클린코드에 대해서 항상 많은 고민을 했습니다.
기능 구현에만 앞선던 코드들을 어디 내놓으려니 부끄럽기도 합니다.
팀원들에게 보여줄 수 있고, 그들이 한번에 이해하기 쉬운 코드를 짜야겠다 라는 생각으로
자바스크립트 클린코드 에 대한 공부를 시작했습니다.
클린코드에 대해 고민하기
-
남이 적은 코드가 항상 맞진 않습니다.
-
물론 내 코드도 항상 옳지 않습니다.
-
항상 열린 태도로 여러 코드를 읽어보고 판단하는 것이 중요합니다
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 을 안쓰고 , 함수를 함수 표현식으로 사용하면 오류를 줄일 수 있습니다.
변수 다루기
타입검사
자바스크립트는 동적인 타입이라, 타입검사가 어렵습니다.
typeOf 나 instanceOf 로 원시타입, 참조타입을 알 수 있습니다.
Object.prototype.toString.call( )
undefined & null
undefined & null 은 값이 없거나 정의되지 않은 것입니다.
type = undefined , Object
eqeq 줄이기
== (두개) = 동등 연산자
type casting 이 일어납니다.
‘1’== 1 >> true
=== (세개 )= 엄격한 동등 연산자
‘1’=== 1 >> false
두개가 형 변환이 되어서 더 편한 게 아닌가 ? 하는 의문도 있지만 엄격하게 맞추는 것이 더 오류 검사에 좋습니다.
Number(‘1’)=== 1 >> true
함수 작성법
숫자와 관련된 함수 (min-max)
경계값을 다룰 때 함수 작성법
function getValidAge = (age:number)=>{
const MIN_IN_AGE = 19
const MAX_AGE = 45
return(age< MAX_AGE && age>= MIN_IN_AGE)
} 네이밍을 최소값과 최대값을 잘 명시해줍니다.
이상, 이하 일 경우 IN 과 같은 전치사로 알기 쉽게 합니다.
begin-end
예약날짜를 잡을 때 주로 사용합니다 .
function reservationDate(beginDate,endDate){
...
}
reservationDate('YYYY-MM-DD','YYYY-MM-DD')first- last
함수 안에서 array 의 첫 인자와 마지막 인자를 의미할 때 변수로 사용합니다.
function getStudent(first,last){
...
}prefix & suffix
접두사, 접미사
일관성 있게 코드네이밍을 하기 위해서는 접두사가 필요합니다.
접미사는 s를 붙이는 등의 방법이 있습니다.
매개변수의 순서가 경계이다.
인자가 두개일 경우에는 처음과 끝이구나 라고 생각을 할 수 있습니다.
인자가 여러개일 경우에는 어떤 식으로 함수를 생성하면 될까요?
- 호출하는 함수의 네이밍과 인자의 순서의 연관성을 고려합니다.
- 매개변수를 2개가 넘지 않도록 만듭니다.
- arguments, rest parameter
- 매개변수를 객체에 담아서 넘긴다.
- 랩핑하는 함수를 만듭니다. ⇒ 받아오는 함수가 따로 있고, 실제 함수를 만듭니다.
