[카테고리:] JavaScript

작성일자

zod ?

JavaScript는 타입이 널널한 언어이고 이런 타입 널널한 JavaScript를 보완하고자 태어난 언어가 TypeScript이다. TypeScript는 다른 다양한 언어 중에서도 상당히 복잡한 문법을 갖는 언어이다. 많은 웹 개발자들이 TypeScript를 꺼리는 이유가 바로 이런 복잡함에 있다. 하지만 JavaScript를 사용하면서 JavaScript의 널널한 타입만큼은 좀 어떻게 보완을 할 수 없냐는 갈증을 풀어줄 라이브러리가 zod다.

npm i zod로 딱 설치하고 다음 코드를 고고씽 하면 된다.

import { z } from "zod"

const SexEnum = z.enum(["Man", "Female"])

const User = z.object({
  name: z.string(),
  age: z.number().optional(),
  birthday: z.date(),
  sex: SexEnum.nullable(),
  live: z.boolean(),
  items: z.array(z.string()),
})

const dip2k = User.parse({
  name: "dip2k",
  // age: 18,
  live: true,
  // sex: "Man",
  sex: null,
  birthday: new Date("1999-12-18"),
  items: [ "Hammer", "Key" ],
});

console.log(dip2k);

뭔 말이 필요할까. 코드 자체에 모든 설명이 담겨 있다. Hey~ zod?

작성일자

Javascript의 스프레드 연산자(spread operator)를 적용해 보자

스프레드 연산자를 적용할 수 있는 클래스 AA가 있다고 할때 활용 예는 다음과 같다.

const aa = new AA();

aa.addItem(1);
aa.addItem(2);
aa.addItem(3);

console.log(...aa)

콘솔에 1 2 3이 찍힌다. 바로 … 연산자가 스프레드 연산자이다. 이처럼 스프레드 연산자를 적용할 수 있도록 하기 위해서 AA 클래스는 다음처럼 작성되어야 한다.

class AA {
  constructor() {
    this.items = []; // 이터러블한 내용을 저장할 배열
  }

  // 아이템을 추가하는 메소드
  addItem(item) {
    this.items.push(item);
  }

  // Symbol.iterator를 구현하여 이터러블하게 만듭니다.
  [Symbol.iterator]() {
    let index = 0;
    let data  = this.items;
    return {
      next: () => {
        if (index < data.length) {
          return { value: data[index++], done: false };
        } else {
          return { done: true };
        }
      }
    };
  }
}

참고로 스프레드 연산자는 매우 유용한 문법으로, 배열이나 이터러블 객체의 요소를 개별 요소로 확장하거나, 함수 호출 시 인수로 사용하거나, 객체 리터럴에서 속성을 복사할 때 사용된다. 예를들어 아래의 코드의 예시가 있다.

사례1

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

사례2

function sum(x, y, z) {
  return x + y + z;
}

let numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

사례3

let obj1 = { foo: 'bar', x: 42 };
let obj2 = { ...obj1, y: 1337 }; // { foo: 'bar', x: 42, y: 1337 }

스프레드 연산자는 얕은 복사를 수행한다는 점을 유념하자. 위의 예제를 보면 알겠지만 스프레드 연산자는 코드를 더욱 간결하고 가독성을 높여주며 데이터 구조를 쉽게 조작할 수 있게 해준다. 하지만 얕은 복사라는 점을 다시 한번 더 유념하자.