ProgrammingLanguageJavaScript

[자바스크립트] 자주 사용하는 한 줄 코드 11가지

, , , , , ,

프로젝트를 만드는 데 많은 도움이 되었던 가장 유용하고 간단한 JavaScript 한 줄짜리 코드를 공유하고자 합니다.

워크플로우를 간소화하기 위해 매일 사용하는 자바스크립트 one-liners 10가지를 소개합니다. 이 코드은 간단하지만 강력하며 최소한의 노력으로 앱의 성능과 기능을 향상시킵니다.

1. 배열이 비어 있는지 확인

1
const isEmpty = (arr) => arr.length === 0;

배열에 요소가 없는지 확인합니다.

2. 현재 타임스탬프 가져오기

1
const timestamp = () => Date.now();

1970년 1월 1일 이후의 밀리초 수를 반환합니다. 이를 사용 가능한 날짜로 변환하려면 다음 코드를 적용하면 됩니다.

1
const myDate = new Date(timestamp).toLocaleString();

3. 배열 복제하기

1
const cloneArray = (arr) => [...arr];

배열의 얕은 복사본을 생성합니다.

4. 배열에서 잘못된 값 제거하기

1
const removeFalsy = (arr) => arr.filter(Boolean);

배열에서 false, null, 0, "", undefined, NaN과 같은 값을 제거합니다.

5. 문자열 배열을 대문자로 변환하기

1
const toUpperCaseArray = (arr) => arr.map((s) => s.toUpperCase());

배열의 모든 문자열 요소를 대문자로 변환합니다.

6. 배열의 모든 숫자 합하기

1
const sum = (arr) => arr.reduce((a, b) => a + b, 0);

배열에 있는 숫자의 총합을 계산합니다.

7. 배열에서 임의의 요소 가져오기

1
const randomElement = (arr) => arr[Math.floor(Math.random() * arr.length)];

배열에서 임의의(random) 요소를 반환합니다.

8. 임의의 16진수 색상 생성하기

1
2
3
4
const randomHexColor = () =>
  `#${Math.floor(Math.random() * 0xffffff)
    .toString(16)
    .padStart(6, '0')}`;

임의의(random) 16진수 색상 코드를 생성합니다.

9. 함수 디바운스(Debounce)하기

1
2
3
4
5
6
7
const debounce = (fn, delay) => {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => fn(...args), delay);
  };
};

실행을 지연시켜 함수가 실행될 수 있는 속도를 제한합니다.

10. 함수 제한

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const throttle = (fn, limit) => {
  let lastFunc;
  let lastRan;
  return (...args) => {
    if (!lastRan) {
      fn(...args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(() => {
        if (Date.now() - lastRan >= limit) {
          fn(...args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
};

함수가 실행될 수 있는 속도를 지정된 시간 간격당 한 번으로 제한합니다.

11. 문자열에서 HTML 이스케이프

1
2
const escapeHTML = (str) =>
  str.replace(/[&<>"']/g, (match) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[match]));

특수 HTML 문자를 이스케이프(Escape) 처리하여 XSS 공격을 방지합니다.

마무리

이러한 코드를 일상적으로 사용하면 프로젝트의 보안과 기능을 효율적이고 효과적으로 향상시킬 수 있습니다.

Share