[JS] 구루처럼 자바스크립트 작성하기

How To Write JavaScript Like A Guru

이 3분짜리 블로그 글이 당신의 코드를 아주 깔끔하고 일관되도록 하는데 필요한 여러 가지 간단한 트릭을 알려줄 것이다. 

 

아래의 코드를 한 번 보자

음.. 참 깔끔하지 않은가? 몇개의 if-else 문만으로 있기 때문에 딱히 최적화가 필요해 보이진 않는다. 자 그럼 코드 작성의 새로운 레벨로 들어가 보자. 

 

매직 숫자와 스트링을 피해라

여기서 매직이란 의미를 가지지 않는 변수 혹은 상수명으로 대체될 수 있는 값을 의미한다. 

 

우리의 예제의 경우 아래와 같이 변경해 볼 수 있다. 

이는 잠재적 오타의 위혐을 줄이고 코드를 더욱 읽기 쉽도록 해준다. 

 

필자는 typescript를 사용하길 강력히 권장한다. 강력한 타입 체킹으로 타입 에러를 효과적으로 줄이고 에디터에서부터 미리 에러를 캐치할 수 있기 때문이다. (우리 예제의 경우 Enums을 활용하면 좋을 것이다.)

 

중복 if 문을 피해라

중복된 if문은 아주 일기 힘들다. 따라서 이번 팁은 이를 어떻게 분해하느냐이다. 이는 꽤 쉽다.

위와 같이 간단한 변화로 코드가 더욱 읽기 쉬워졌다. 

더 이상 중복 구문은 안된다. return 구문이 함수 실행을 중단시키기 때문에 예제 문제를 해결할 수 있었다. 훨씬 보기 좋아졌다!

 

음... 하지만 아직 만족하지 못했다. if-else 구분에 뭔가 문제가 있어보이는데... 뭐가 문제인지 대충 알 것 같다. 

 

'return' 구문을 피하지 말라

함수 구문은 인터프리터가 return 구문을 호출하면 종료된다는 것을 우리는 알고 있다. 

 

이를 이용해서 코드를 더 간단하게 만들어 보자. 

if-else 구문이 없어지면서 훨씬 깔끔해졌다! 보기 좋다. 이정도 코드는 문제없이 사용할만하다. 

 

보너스: console.log()를 return 구문과 함께 사용하기

여기서 좀더 깊게 들어가 보고 싶다면, 여기 자그마한 팁이 있다. 콘솔 객체의 로그 메서드는 undefined를 반환한다. 브라우저의 dev 툴에서 이를 테스트할 수 있다. 

오케이, 그럼 이제 무엇을 할까? 이제 우리는 좀 더 코드를 줄여볼 수 있다. 

9, 12, 15, 그리고 18번 째 줄에서 더욱 간단하고 스마트한 리턴 구문이 만들어졌다.

 

그런데 이렇게 여러 개의 console.log() 구문을 가지는 게 옳은 걸까? 아니다. 이런 반복을 하지 말자. 

 

이러면 최종적으로 정말 깔끔한 코드가 만들어진다. 맨 처음 코드와 한번 비교해 보라.

 

출처: https://denis-bunchenko.medium.com/how-to-write-javascript-like-a-guru-eca601f21f30

How To Write JavaScript Like A Guru