자바스크립에서 요긴하게 쓸 수 있는 한 줄 짜리 코드 들을 공유 합니다.

배열 섞기

배열을 랜덤으로 섞어 줍니다.

const shuffleArray = (arr) => arr.sort(() => Math.random() - 0.5);

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];  
console.log(shuffleArray(arr));

클립보드 복사하기

const copyToClipboard = (text) =>
  navigator.clipboard?.writeText && navigator.clipboard.writeText(text);

copyToClipboard("Hello World!");

유니크 배열

const getUnique = (arr) => [...new Set(arr)];

const arr = [1, 1, 2, 3, 3, 4, 4, 4, 5, 5];
console.log(getUnique(arr));

배열 체크

const isArray = (arr) => Array.isArray(arr);

console.log(isArray([1, 2, 3]));  // true
console.log(isArray({ name: 'Ovi' }));  // false
console.log(isArray('Hello World'));  // false

랜덤 숫자

const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

console.log(random(1, 50));

다크 모드 검출

const isDarkMode = () =>
  window.matchMedia &&
  window.matchMedia("(prefers-color-scheme: dark)").matches;

console.log(isDarkMode());

스크롤 맨 위로 / 아래로

const scrollToTop = (element) =>
  element.scrollIntoView({ behavior: "smooth", block: "start" });

const scrollToBottom = (element) =>
  element.scrollIntoView({ behavior: "smooth", block: "end" });

랜덤 색상 생성기

const generateRandomHexColor = () =>
  `#${Math.floor(Math.random() * 0xffffff).toString(16)}`;

날짜 사이 계산하기

const daysDiff = (date, date2) => Math.ceil(Math.abs(date - date2) / 86400000);

console.log(daysDiff(new Date('2022-05-10'), new Date('2022-11-25')));  // 199

값 바꾸기

let foo = 'foo';
let bar = 'bar';

[foo, bar] = [bar, foo];

console.log(foo, bar); // bar foo

배열 합치기

// 배열을 합칩니다. 하지만, 중복은 유지
const merge = (a, b) => a.concat(b);
// 또는
const merge = (a, b) => [...a, ...b];

// 중복을 제거 하면서 합침
const merge = [...new Set(a.concat(b))];
// 또는
const merge = [...new Set([...a, ...b])];

자바스크립트 실제 유형 가져오기

const trueTypeOf = (obj) => {
  return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
};

console.log(trueTypeOf(''));  // string
console.log(trueTypeOf(0));  // number
console.log(trueTypeOf());  // undefined
console.log(trueTypeOf(null));  // null
console.log(trueTypeOf({}));  // object
console.log(trueTypeOf([]));  // array
console.log(trueTypeOf(0));   // number
console.log(trueTypeOf(() => {}));  // function

긴 문자열 자르기

const truncateString = (string, length) => {
  return string.length < length ? string : `${string.slice(0, length)}...`;
};

console.log(truncateString('동해 물과 백두산이 마르고 닳도록', 10)); // 동해 물과 백두산이

현재 탭이 보이고 있는지 체크

const isTabInView = () => !document.hidden; // Not hidden

console.log(isTabInView()); // true or false

숫자 앞에 0붙여서 출력하기

const numberPad = (num, size) =>
  String(num)
    .padStart(size, '0')
    .substring(-size);

console.log(numberPad(5, 3)); // 005

빈 배열 체크

const checkEmptyArray = (arr) => !Array.isArray(arr) || arr.length === 0;
 
console.log(checkEmptyArray([0, 2, 3, 4, 5])); // true
console.log(checkEmptyArray([])); // false
console.log(checkEmptyArray(""))y(arr3));  // false