낡은 자바스크립트 작성 습관, 이젠 바뀌어야겠지

 이 글은 프론트엔드 엔지니어인 Freddy Manrique라는 분이 작성한 글을 -> 요즘IT와 Mr.P라는 번역가가 해석 및 정리한 컨텐츠를-> 제가 다시 정리하며 곱씹어 보는 글 입니다. '내가, 나에게' 말하는 느낌이니 편하게 작성하겠습니다.

 

원본(Freddy Manrique) : https://medium.com/gogrow/say-bye-bye-to-bad-javascript-practices-5971688ba80a

요즘 IT : https://yozm.wishket.com/magazine/detail/1836

 

 

 

1) var는 이제 버리자. let, const로 더욱 명확하게.

 

// 나쁜코드 With var
var name = 'GoGrow'
if( name === 'GoGrow' ) {
  var name = 'To the moon'
}
console.log(name) // 'To the moon'

// 좋은코드 With let and const
const name = 'GoGrow'
if( name === 'GoGrow' ) {
  let name = 'To the Moon'
}
console.log(name) // 'GoGrow'

 

이렇게 하면 장점은,

• 범위가 분명해집니다.
• 전역 객체를 생성하지 않습니다.
• 동일 변수명을 다시 선언할 때 오류를 표시합니다.

전역 객체,변수의 남발은 메모리 관리에도 영향을 준다. 범위와 용도가 모호한 var는 앞으로 이별~

 

 

 

 

2) 주석 남발 금지

 이건 '클린코드' 에서도 발췌했던 부분인데, 주석으로 코드를 설명하기보다는 딱 봐도 눈에 잘 읽히는 코드, 함수명/변수명/클래스명에 더 신경을 많이 써야한다. 전문가처럼 주석을 작성하는 팁은 다음과 같다고 한다.

• 의견 중복하지 않기, 왜 하는지에 대해 작성하기. (코드가 무슨일 하는지 쓰지말고)
• 주석은 최대한 요약. 장황하게 작성하는 주석은 더이상 nono
• 언어 사용에 대해 일관성 유지, 시간이 지나도 수정되지 않을 내용을 작성

좋은 주석을 작성하는건 은근히 힘든일이다. 사실 내가 좋은 주석을 작성해본 적이 있는지 모르겠다. 

 

 

 

3) == 대신에 ===를 사용해주세요!!!

 많은 개발자들이 무심코 사용하지만, 실제로 ==와 ===는 완전히 다른 역할을 수행한다. 

 ==는 일'반 항등 연산자' 이며,  ===는 '완전 항등 연산자' 이다. 일반 항등 연산자(==)는 피연산자가 유사한지 여부만 확인하므로, 의도치 않은 결과가 나올 수 있다. JS로 코딩을 하고 테스트를 해보면, '어라 이게 왜..' 라는 경험을 한번씩은 해봤을거다.

 

// 나쁜코드
const number = 1
const string = '1'

console.log(number == string) // true

// 나쁜코드 2
console.log( [] == 0 ) // true ㅋㅋ


// 좋은코드
const number = 1
const string = '1'

console.log(number === string) // false

 

 항상 타입과 값을 동시에! 명확히! 확인하도록 하자.

 

 

 

4) 옵셔널 체이닝을 사용해주세요~!!

  옵셔널 체이닝 연산자인 ?. 를 사용하면, 체인 깊숙한 곳의 속성값을 확인할 수 있다. 이렇게 하면 존재하지 않는 속성값에 접근하려고 할 때 오류를 방지해주는 효과도 있다. 

 

const 포켓몬 = {
  이름 : '파이리',
  정보 : {
    속성 : '화염'
  }
}

console.log( 포켓몬?.정보?.속성 )  // 화염
console.log( 포켓몬.정보.공격 )  // error
console.log( 포켓몬?.정보?.공격 ) // undefined (no error)

 

 위처럼 '공격' 이라는 정의되지 않은 프로퍼티에 접근하려고 하면 오류가 발생하고 프로그램이 중단된다. 하지만 옵셔널 체이닝을 사용하면, 에러를 사용하지 않지만 정의되어 있지 않음을 알려준다. 오류에 대해 미리 예방하는것은 장기적으로 큰 차이를 만들어 낼 수 있다.

 

 

 

 

5) 매직 넘버와 매직 스트링을 사용하지 마세요.

 

// 나쁜코드 With Magic Number
const validatePassword = (password) => {
  if(password.length > 7 ) console.log( 'Your Password is amazing' )
}

// 좋은코드 Without Magic Number
const MIN_PASSWORD_SIZE = 7;
const validatePassword = (password) => {
  if(password.length > MIN_PASSWORD_SIZE ) console.log( 'Your Password is amazing' )
}

 

 여기서 매직넘버란 멀뚱히 숫자만 써져있는 7이다. 상수에 이런 값들을 할당한다면 이해하기가 쉽고, 디버그 하기에도 편리하다.

 

 

 

6) API 호출 오류에 대해서 명확하게 처리 해주세요.

 

async function downloadImage( img = 'pokemon.png' ) {
  let response = await fetch(img)
  if( !response.ok ) {
    throw new Error( 'HTTP error! status: ${response.status}' )    
  }
  return await response.blob()
}


// 나쁜코드
const pokemonImage = await downloadImage()

// 좋은코드
let pokemonImage
try {
  pokemonImage = await download()
} catch {
  pokemonImage = DEFAULT_IMG
}

// 좋은코드 2
const pokemonImage = await downloadImage().catch(() => DEFAULT_IMG )

 

 언제나 async/await 안에서 try/catch를 사용해서 에러를 처리해야한다. 무조건 그래야만 한다. 안그러면 JS 코드가 길어질수록 버그가 속출한다. 혹은 터져버린다.  async/await + try/catch의 예문을 간단히 정리하면 다음과 같다.

 

async function f() {
  try {
    let response = await fetch('http://유효하지-않은-주소');
  } catch(err) {
    alert(err); // TypeError: failed to fetch
  }
}
f();

 

 정말 좋은 방법이다. 이거 몰랐을땐 대체 어떻게 코드를 짰던걸까.

 

 

 

7) 객체를 단일 매개변수로 사용하지 마세요~!!

// 나쁜코드
const getPokemon = (Pokemon) => {
  console.log( 'The Pokemon is ${Pokemon.PokemonName} the weight is ${Pokemon.PokemonWeight}' )
}

// 좋은코드
const getPokemon = (PokemonName, PokemonWeight) => {
  console.log( 'The Pokemon is ${PokemonName} the weight is ${PokemonWeight}' )
}

 

 객채에서 여러 속성값이 필요한 함수를 정의할 때, 단일 객체를 사용하는 것보다 여러 매개변수를 사용하는것이 좋다. 그렇게한다면 다음과 같은 장점이 있다.

• 함수에 필요한 매개변수가 명시되어있어 코드를 읽기 쉽다.
• 테스트와 유지보수가 쉽다. 불필요한 매개변수 생성을 방지하므로, 성능향상에 기여한다.
• 타입스크립트를 사용하면서 여러개의 매개변수가 있는 경우, 오류 방지 및 자동추천 이점을 누릴 수 있다.

 

 

 

8) 약어를 한번 사용해보세요.

 때때로 우리는 변수가 무.조.건 있어야만 통과할 수 있을 때 아래와 같은 코드를 짜곤 한다. 

 

if( x !== "" && x !== null && x !== undefined ){ 내용 }

 

 

 

 앞으로는 약어를 사용해보자. 더 짧고 우아한 방법으로 코드를 축약할 수 있다.

 

if( !!x ) { 내용 }

 

 

 

결론.

명확한 코드를 작성하는것이 우리의 책임이다.

유지보수가 쉽고, 시간이 절약되는 코드를 작성하자.