if else || && 삼항 연산자 다시 보기

if의 괄호

if 와 else if 다음에는 괄호가 나온다. 괄호에서는 기본적으로 true와 false를 받으며, true로 해석되는 값과 false로 해석되는 값도 받는다. 그리고 괄호 안에서는 거의 모든 일을 할 수 있다. 코드를 실행할 수 있다는 얘기다. if의 괄호에서 못 하는 일이 있는데 지역 변수를 선언하는 것과 지역 함수를 선언하는 것이다.

괄호에서 할 수 없는 일이 한 가지 더 있는데, 바로 비동기 프로그래밍이다. 자바스크립트에서는 비동기 코드를 if와 함께 사용하기 어렵다.

함수형 자바스크립트를 잘 다루기 위해서는 숲을 보는 것보다 나무의 결을 들여다 보는 것이 중요하다. 자바스크립트 문법과 기본적인 동작에 집중해보자. 함수 하나가 정의되고 실행되고 참조되는 과정, 인자를 받거나 넘기는 과정, 클로저가 되거나 비동기가 일어나는 과정, 괄호, 대괄호, 점, 쉼표 등을 자세히 들여다 보자. 문법적 감각이 좋아지면 원하는 곳 어디에서나 함수를 열고 실행할 수 있게 된다.

함수형 자바스크립트를 잘 익히기 위해서는 무엇보다 함수를 다루는 다양한 방법들을 잘 익히는 것이 중요하다. 함수를 잘 다루려면 함수와 관련된 개념들과 관련된 몇 가지 기능들에 대해 잘 알아야 하는데 이를테면 일급 함수, 클로저, 고차 함수, 콜백 패턴, 부분 적용, arguments 객체 다루기, 함수 객체의 메서드 등이 있다.

이전 포스트에서 함수형 프로그래밍의 간략한 소개와 몇가지 예제 코드를 구현했었다. 오늘은 이전 포스트에 이어 다음 내용을 진행하려고 한다.

회원 목록 중 한명 찾기

회원 목록 중 id 값으로 해당 id 값을 가진 회원 한 명을 찾고자 한다.

1
2
3
4

console.log(
  filter(users, function (user) { return user.id === 3 })[0]
)
// {id: 3, name: "BJ", age: 32}

filter를 통해 걸러낸 후 [0]으로 user를 얻어냈고 원하는 결과를 얻어냈기는 했다. 위 처럼 filter를 사용하여 찾을 수 있지만 filter 함수는 무조건 list.length 만큼 predicate가 실행되기 때문에 효율적이지 못하고, 동일 조건에 값이 두 개 이상이라면 두 개 이상의 값을 찾는다.

최근 사내에서 함수형 프로그래밍을 사용하여 기존 코드의 리팩토링을 시작했다.
함수형 프로그래밍 해야지 해야지 하고 항상 미뤄왔던 스터디인데 실무에서 사용하기에
터무니없이 실력이 부족함을 느껴 스터디를 시작하고자 한다.

기본적으로 함수형 자바스크립트 프로그래밍 책을 기반으로 진행하며, 필요한 내용이나 궁금한 내용은 구글링을 통해 진행한다.

도서 링크: 함수형 자바스크립트 프로그래밍

함수형 자바스크립트 소개

• 함수형 프로그래밍은 성공적인 프로그래밍을 위해 부수 효과를 최대한 멀리하고 조합성을 강조하는 프로그래밍 패러다임이다.
• 함수형 프로그래밍이 부수 효과를 최대한 멀리하는 이유
  1. 오류를 줄이기 위함.
  2. 조합성 혹은 모듈화 수준을 높이기 위함.

함수형 프로그래밍을 검색하면 나오는 예제

1
2
3
4
5
6
7

function addMaker(a) {
  return function(b) {
    return a + b;
  }
}

addMaker(10)(5);

함수형 자바스크립트에 관심을 가져 본 적이 있다면 아마 위 예제와 같은 코드를 봤을 것 이다. 커링 혹은 부분 적용과 관련된 코드들이다.
함수를 리턴한다거나 괄호가 많은 코드들을 처음 보면 난해하고 생소하게 느껴진다.

addMaker는 함수를 값으로 다루는 함수다. addMaker에서는 단 하나의 값이 선언되며 그 값은 함수다.
addMaker(10)의 결과는 function(b) { return 10 + b }; 와 같다.
이후 리턴된 함수를 바로 실행해줬기 때문에 결과값은 15가 된다.