웹과 애플리케이션이 점점 복잡해지면서 JavaScript와 Node.js는 개발자에게 필수적인 기술로 자리 잡고 있습니다. 코딩 실력을 한 단계 끌어올리고 불필요한 시행착오를 줄이려면, 간단한 작업을 빠르게 처리할 수 있는 유틸리티 함수들을 코드 초반에 미리 정의해 두는 것이 좋습니다.
참고로 JavaScript는 Java와 전혀 다른 언어입니다. 두 언어의 차이점을 모른다면 먼저 개념부터 정확히 잡고 시작하세요.
1. 배열 값 무작위로 섞기
카드 덱을 섞듯이, 아래 한 줄짜리 코드만으로도 JavaScript에서 배열의 값을 원하는 만큼 자유롭게 셔플할 수 있습니다.
const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());
카드 덱 비유를 그대로 가져와서, 52개의 값을 섞는 예제는 다음과 같습니다.
let myarray = Array.from({length:52},(v,k)=>k+1);
console.log(shuffleArray(myarray));
코드를 실행하면 콘솔에 무작위로 뒤섞인 값들이 출력됩니다.
2. 특정 날짜가 주말인지 평일인지 확인하기
간단한 나머지 연산자만 사용하면 특정 날짜가 주말에 해당하는지 손쉽게 확인할 수 있습니다.
const isWeekend = (date) => date.getDay() % 6 == 0;
반대로 평일 여부를 확인하고 싶다면 마지막 비교 연산만 뒤집으면 됩니다.
const isWeekday = (date) => date.getDay() % 6 !== 0;
아래 코드는 오늘이 주말인지 검사하는 예시입니다.
console.log(isWeekend(new Date()));
isWeekday와 isWeekend 변수를 따로 정의하지 않고, NOT 연산자를 활용해 하나의 함수만으로 if-else 문을 구성할 수도 있습니다.
if(!isWeekend(new Date())) {
console.log("오늘은 평일입니다.");
} else {
console.log("오늘은 주말입니다.");
}
3. 숫자를 특정 소수점 자릿수까지 자르기
사용자에게 보여주는 숫자는 최대한 단순해야 합니다. 지저분하게 긴 소수점 아래 숫자들이 그대로 노출되면 사이트나 앱의 완성도가 크게 떨어져 보입니다. 불필요한 소수점 자릿수를 잘라내고 깔끔하게 표시하려면 아래 함수를 활용하세요.
const decimalFormat = (n, places) => ~~(Math.pow(10, places) * n) / Math.pow(10, places);
테스트를 위해 소수점 자릿수가 비정상적으로 긴 숫자를 하나 정의하고, 이 함수를 호출해 소수점 둘째 자리까지만 표시해 보겠습니다.
let deciwow = 299.39542014592 console.log(decimalFormat(deciwow, 2));
실행 결과는 훨씬 보기 편한 형태로 출력됩니다.
4. 온도 단위 변환하기
JavaScript에는 섭씨와 화씨를 상호 변환하는 표준 내장 기능이 없습니다. 하지만 아래 두 줄의 코드만 있으면 나만의 변환 기준을 만들 수 있습니다.
섭씨를 화씨로 변환:
const cToF = (celsius) => celsius * 9/5 + 32;
화씨를 섭씨로 변환:
const fToC = (fahrenheit) => (fahrenheit - 32) * 5/9;
예를 들어 현재 기온이 영하 2도(섭씨)라고 가정해 봅시다. 섭씨→화씨 변환 함수를 사용하면 미국에 사는 사람에게 이 온도가 어떤 의미인지 바로 알 수 있습니다.
cToF(-2);
이 식은 화씨 28.4도라는 결과를 반환합니다.
5. 사용자가 다크 모드를 사용 중인지 확인하기
콘텐츠가 사용자의 색상 설정을 존중하길 원한다면, JavaScript로 다크 모드 사용 여부를 감지해 색상을 조정할 수 있습니다. 원래 작성법은 다소 번거롭지만, 아래 한 줄로 간결하게 처리할 수 있습니다.
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
이 변수를 활용한 조건문 예시는 다음과 같습니다.
if (isDarkMode) {
console.log("현재 화면은 다크 모드입니다.");
} else {
console.log("현재 화면은 다크 모드가 아닙니다.");
}
단, 이 코드는 브라우저 환경의 JavaScript에서만 동작합니다. Node.js는 window 객체를 지원하지 않으므로 서버 환경에서는 실행할 수 없습니다.
6. 숫자 배열의 평균값 구하기
데이터셋을 다룰 때, 배열에 내장된 함수를 활용하면 모든 값의 합계를 구한 뒤 배열 길이로 나누는 평균 계산을 우아하게 처리할 수 있습니다. 딱 한 줄이면 충분합니다.
const getAverage = (arr) => arr.reduce((a, b) => a + b, 0) / arr.length;
아래는 데이터셋을 만들고 모든 값의 평균을 콘솔에 출력하는 예제입니다.
let dataset = [2, 14, 88, 204, 1515, 1294, 12, 144]; console.log(getAverage(dataset));
이 코드를 실행하면 결과값으로 409.125가 출력됩니다.
7. UUID 생성하기
애플리케이션 사용자로부터 통계나 데이터를 수집할 때(예: 쿠키 생성), 침습적이지 않으면서 효과적인 방법 중 하나가 범용 고유 식별자(UUID)를 발급하는 것입니다. JavaScript에는 RFC4122 규격을 준수하는 UUID를 손쉽게 만들어 주는 내장 기능이 없습니다(다만 Node.js에서는 uuid npm 패키지를 설치하면 이 기능을 바로 사용할 수 있습니다).
JavaScript에서 아래 한 줄 표현식을 사용하면 새로운 UUID를 즉석에서 생성할 수 있습니다.
const genUUID = (a) => (a ? (a ^ ((Math.random() * 16) >> (a / 4))).toString(16) : ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, genUUID));
실제 출력 결과를 테스트해 보겠습니다.
console.log(genUUID());
8. 두 날짜 사이의 일수 구하기
특정 값의 경과 기간을 계산해야 할 때(예: 사용자 계정의 나이), 기준 시점으로부터 며칠이 지났는지 계산해야 합니다. 이를 처리하는 간단한 한 줄 코드는 다음과 같습니다.
const ageDays = (old, recent) => Math.ceil(Math.abs(old - recent) / (1000 * 60 * 60 * 24));
실전 예시로, 2012년 12월 28일에 계정을 만든 사용자의 계정 나이를 계산한다고 가정해 봅시다. 아래 코드로 해당 날짜와 오늘 사이의 일수를 구할 수 있습니다.
console.log(ageDays(new Date('2012-12-28'), new Date()));
글을 작성하는 시점 기준으로 약 3298일이라는 결과가 나옵니다.
9. 특정 범위 내 난수 생성하기
때로는 단순히 아무 난수나 생성하는 것으로는 부족하고, 생성 범위를 제한해야 할 필요가 있습니다. 아래 한 줄 코드를 사용하면 지정한 범위 안에서만 숫자를 생성할 수 있습니다.
const rangeRandom = (low, high) => Math.floor(Math.random() * (high - low + 1)) + low;
테스트 방법은 매우 간단합니다.
console.log(rangeRandom(400, 20000));
자주 묻는 질문
1. 쿠키에 UUID를 사용하는 이유는?
쿠키는 본질적으로 사용자의 기기 저장 공간을 차지하는 요소이므로, 데이터를 수집할 때는 최대한 효율적이고 침습적이지 않은 방식을 지향해야 합니다. UUID를 사용하면 두 가지 장점이 있습니다. 첫째, 식별자 길이가 128비트에 불과해 클라이언트 저장 공간을 최소화할 수 있습니다. 둘째, 사용자의 어떤 개인 정보에도 의존하지 않습니다.
2. Node.js에서 다크 모드 감지 시 "window is not defined" 오류가 발생합니다. 어떻게 해야 하나요?
Node.js는 클라이언트-서버 관계가 내장된 브라우저 JavaScript와 달리 클라이언트 측 모듈을 호출할 수 없습니다. 이 글에서 소개한 다크 모드 감지 코드는 브라우저 환경의 JavaScript 전용이며, Node.js에서는 사용할 수 없습니다.
3. 이 코드는 모든 브라우저에서 동작하나요?
JavaScript는 이론상 모든 브라우저에서 동작하도록 설계된 인터프리터 기반 언어입니다. 하지만 브라우저마다 코드를 해석하는 방식이 조금씩 다를 수 있으며, 특히 오래된 소프트웨어에서는 차이가 커집니다. 이 글에서 소개한 원 라이너들은 사용자가 어떤 브라우저를 사용하더라도 동일한 결과를 반환해야 합니다. 다만 일반적인 JavaScript 기능 중 일부는 Pale Moon, Internet Explorer 또는 초기 2000년대 버전의 브라우저에서는 정상 동작하지 않을 수 있으니 유의하세요.