몽땅뚝딱 개발자

[JavaScript] 이렇게도 사용할 수 있다! (1) 본문

Development/Javascript

[JavaScript] 이렇게도 사용할 수 있다! (1)

레오나르도 다빈츠 2023. 3. 12. 10:32

 

 

◽️ console.log를 줄이는 방법

나는 주로 인텔리제이에서 재공하는 Postfix Completion을 사용한다. (.log를 입력)

const { log } = console;

log("Hello world!");
// Expected output: Hello world!

// SAME AS //

console.log("Hello world!");
// Expected output: Hello world!

 

 

✍🏻 다른 Postfix Completion가 궁금하거나 적용하고 싶다면?

 

[IntelliJ] Postfix Completion 예제 및 적용하기

console.log("result >>> ", foo()) 이렇게 매번 결과에 대한 콘솔찍기가 귀찮아서 만들어 본 단축어. 1. ⌘ + , 를 사용하여 Preferences로 이동한다. 2. Editor > General > Postfix Completion에서 +를 누른다. 나는 JavaScr

be-a-weapon.tistory.com

 

 

 

 

◽️ times()

특정 함수를 여러번 실행시킬 때 사용한다.

// 5초머다 실행
setInterval(() => {
  randomFunction();
}, 5000); // runs every 5 seconds

// 3번 실행
const times = (func, n) => {
  Array.from(Array(n)).forEach(() => {
    func();
  });
};

times(() => {
  randomFunction();
}, 3); // runs 3 times

 

 

 

◽️ slugify()

문자열을 URL에서 안전하게 사용할 수 있도록 변경해준다.

const slugify = (string, separator = "-") => {
  return string
    .toString() // Cast to string (optional)
    .toLowerCase() // Convert the string to lowercase letters
    .trim() // Remove whitespace from both sides of a string (optional)
    .replace(/\s+/g, separator) // Replace spaces with -
    .replace(/[^\w\-]+/g, "") // Remove all non-word chars
    .replace(/\_/g, separator) // Replace _ with -
    .replace(/\-\-+/g, separator) // Replace multiple - with single -
    .replace(/\-$/g, ""); // Remove trailing -
};

slugify("Hello, World!");
// Expected output: "hello-world"

slugify("Hello, Universe!", "_");
// Expected output: "hello_universe"

 

 

 

◽️ validateEmail()

문자열이 올바른 이메일 포맷인지 검사한다.

const validateEmail = (email) => {
  const regex = /^\S+@\S+\.\S+$/;
  return regex.test(email);
};

validateEmail("youremail@org.com"); // true
validateEmail("youremail@com"); // false
validateEmail("youremail.org@com"); // false

 

 

 

◽️ capitalize()

const capitalize = (str) => {
  const arr = str.trim().toLowerCase().split(" ");

  for (let i = 0; i < arr.length; i++) {
    arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1);
  }

  return arr.join(" ");
};

capitalize("hello, world!");
// Expected output: "Hello, World!"

 

 

◽️ 로컬스토리지

const storage = {
  get: (key, defaultValue = null) => {
    const value = localStorage.getItem(key);
    return value ? JSON.parse(value) : defaultValue;
  },
  set: (key, value) => localStorage.setItem(key, JSON.stringify(value)),
  remove: (key) => localStorage.removeItem(key),
  clear: () => localStorage.clear(),
};

storage.set("motto", "Eat, Sleep, Code, Repeat");
storage.get("motto");

 

 

 

 


 

 

 

출처 및 참고

 

박승규_Andy / 도움되는 가지 자바스크립트 유틸리티 함수 | 커리어리

링크에서는 다음의 10가지 유틸리티 함수를 소개합니다. 기존에 있었던 함수도 있고, 저자가 만든 함수도 있습...

careerly.co.kr

 

 

 


개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

 

 

Comments