• 함수형 패러다임 : 고차 함수와 리스트 프로세싱으로 데이터 변환을 우아하게 처리
• 객체지향 패러다임 : 복잡한 계층 구조나 상태를 명확하게 표현
• 명령형 패러다임 : 흐름 제어와 직관성을 제공

6.1 HTML 템플릿 엔진 만들기

템플릿 엔진이란 HTML과 같은 문자열에 변수/로직을 끼워 넣어서 최종 결과물을 만드는 프로그램이다.

6.1.1 Tagged Templates

Tagged Templates는 사용자 정의 함수를 통해 템플릿 문자열과 삽입된 값을 처리할 수 있다. 이를 통해 문자열을 조작하거나 특수한 출력을 생성하는 등의 다양한 작업을 수행할 수 있다.

function upper(strs: TemplateStringsArray, ...vals: string[]) {
  console.log(strs); // ["a: ", ", b: ", "."]
  console.log(vals); // ["a", "b"]
  return strs[0]
    + vals[0].toUpperCase()
    + strs[1]
    + vals[1].toUpperCase()
    + strs[2];
}

const a = 'a';
const b = 'b';

const result = upper`a: ${a}, b: ${b}.`; // upper(["a: ", ", b: ", "."], a, b);
console.log(result); // a: A, b: B.

• 첫 번째 인자 : 리터럴 문자열 부분들
• 나머지 인자들 : ${}로 들어간 값들

6.1.2 리스트 프로세싱으로 구현하기

function html(strs: TemplateStringsArray, ...vals: string[]) {
  vals.push(''); // vals 길이를 strs에 맞추기
  return pipe(
	  vals, // zip(strs)(vals) 순서로 실행되도록 변경
    zip(strs), // strs과 vals를 순서대로 결합
    // [["<b>", "A"], ["</b><i>", "B"], ["</i><em>", "C"], ["</em>", ""]]
    flat,
    // ["<b>", "A", "</b><i>", "B", "</i><em>", "C", "</em>", ""]
    reduce((a, b) => a + b),
    // "<b>A</b><i>B</i><em>C</em>"
  );
}

const a = 'A',
  b = 'B',
  c = 'C';

const result = html`<b>${a}</b><i>${b}</i><em>${c}</em>`;

console.log(result);
// <b>A</b><i>B</i><em>C</em>

6.1.3 push를 concat으로

vals.push(’’) 대신 concat을 사용하면 다음과 같은 장점이 있다

• concat은 기존 배열을 변경하지 않음 → 부수 효과를 없앨 수 있다!
• 값을 추가한 뒤, 해당 값이 필요한 시점에 꺼내어 평가하므로 시간 복잡도 상 push와 다를 게 없다!