[JavaScript] 코드 가독성 높이기

Dico·2020년 8월 13일
0

[JavaScript]

목록 보기
8/21

읽기 쉽고 이해하기 쉬운 코드야말로 잘 작성된 코드❗️
잘 작성된 코드 스타일을 갖추기 위해 기억하면 좋을 몇 가지 TIP 모음 ✍🏻 ➡️


#1. 함수에서 Boolean값 반환

비교한 값을 반환받아야 하는 경우, 비교연산자는 boolean값을 반환하기 때문에

function isLess(a, b) {
  if (a < b) {
    return true;
  } else {
    return false;
  }
}

isLess(10, 15);           //true
isLess(15, 10);           //false

if / else문을 제외하여 아래와 같이 표현될 수 있다.

function isLess(a, b) {
  return a < b;
}

isLess(10, 15);           //true
isLess(15, 10);           //false

#2. 제네릭 함수(Generic function) 속 Callback 함수 실행

//Generic Function
function interviewQuestion(job) {
  if (job === "designer") {
    return function (name) {
      console.log(name + ", can you please explain what UX design is?");
    };
  } else if (job === "teacher") {
    return function (name) {
      console.log("What subject do you teach, " + name + "?");
    };
  } else {
    return function (name) {
      console.log("Hello " + name + ", What do you do?");
    };
  }
}

예를 들어, 위 제네릭 함수로부터 "What subject do you teach, John?"이라는 값을 반환받기 위해 아래와 같이 실행할 수 있다.

var teacherQuestion = interviewQuestion("teacher");
teacherQuestion("John");      
//What subject do you teach, John?

첫번째로 interviewQuestion함수로부터 콜백함수
function (name) {console.log("What subject do you teach, " + name + "?");};를 반환받아 변수 teacherQuestion에 담는다.
그 후, 두번째로 teacherQuestion에 담긴 위 함수를 매개변수John과 함께 실행한다.

위 2-step 과정은 아래와 같이 한 줄의 코드로 대체 가능하다.

interviewQuestion("teacher")("John");
//What subject do you teach, John?

두 실행방법은 모두 동일한 결과를 반환한다.

profile
프린이의 코묻은 코드가 쌓이는 공간

0개의 댓글