당연히 작년 우테코랑 비슷하게 1주차가 간단한 알고리즘 문제.. 라고 생각했으나, 숫자야구가 저를 바로 맞아주었습니다.
숫자야구.. 작년 저한테 혼자 공부해서는 뭐 안될거라는 생각을 가지게 해주었던 문제여서 더욱 기억에 남습니다.
작년에는 부족한 실력에 기능 구현만 하기도 벅차서 힘들었는데, 이제는 완성도를 높이는게 더 힘들었던 과제였던 것 같습니다.

이번 포스트에서는 숫자야구 미션을 하면서 제가 학습한 점을 몇가지 적어보려고 합니다.

const something = () => {} // 함수 표현식

function something() {} // 함수 선언식

참고 자료

• [Airbnb] JS Style Guide
• 함수 선언식 vs 함수 표현식

메서드를 작성하면서 함수 선언식을 사용해야할까? 아니면 함수 표현식을 사용해야할까? 고민을 많이 했던 것 같습니다.
자료들을 찾아 본 결과, 함수 표현식을 권장하고 있었습니다.

함수 표현식과 함수 선언식의 차이는 다음과 같습니다.

• 함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않습니다.
• 정확히는 함수 선언식 은 함수 전체가 호이스팅되고, 함수 표현식은 선언부와 할당부로 나뉘어지는데, 선언부만 호이스팅됩니다.

따라서, 함수 표현식은 함수 선언식에 비해 다음과 같은 이점을 갖습니다.

• 함수 표현식은 클로저 생성이 가능합니다.
• 함수 표현식을 다른 함수의 인자 값으로 사용 가능합니다. (임시변수에 넣지 않고도 콜백으로 사용 가능합니다.)

따라서, 일반적인 모든 경우에서는 함수 선언식 대신 함수 표현식을 사용하는게 더 좋습니다.

다만 클래스 내부 메서드에서는 상황이 다릅니다.

참고 자료

• 클래스 내부 메서드에서 화살 함수를 사용하지 말아야 하는 이유

자료를 요약하자면 다음과 같습니다.

• 프로토타입 체이닝이 정상적으로 동작하지 않아서 메소드 오버라이드 현상이 일어나게됩니다.
• 화살 함수의 특성상 prototype을 통해 공유되어야 할 메소드가 인스턴스 내에 각각 생성되어 퍼포먼스가 저하됩니다.
• 상속이 정상적으로 동작하지 않습니다.

이름 짓기 기술로 유지보수 프로그래머의 정신을 혼미하게 만들 수 있다.
[유지보수하기 어렵게 코딩하는 방법, 2p]

효과적인 네이밍은 이름만 보고도 어떤 기능인지 알 수 있어야 합니다. 그래서 변수명을 지을 때 고민을 많이 했던 것 같습니다.
그리고 이에 대한 내용은 컨벤션에서도 찾아볼 수 있었습니다.

참고자료

• 자바스크립트 네이밍 컨벤션

// ex 1.
const array = new Array(4).fill(0) // bad
const array = Array.from({ length: 4 }).fill(0) // good

// ex 2.
// bad
const array = [1, 2, 3, 4]
const res = []

for (let i = 0; i < 4; i++) {
  if (array[i] > 2) res.push(array[i])
}

// good
const array = [1, 2, 3, 4]
const res = array.filter((val) => val > 2)

자바스크립트에는 많은 내장 함수들이 존재하기때문에, 내장 함수들을 활용하여 코딩하면 더욱 효과적입니다.

• 숫자 야구 게임 PR