자바스크립에서 요긴하게 쓸 수 있는 한 줄 짜리 코드 들을 공유 합니다.
배열 섞기
배열을 랜덤으로 섞어 줍니다.
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