초보 개발자에게 필수인 초강력 자바스크립트 한줄 함수 TOP 10
1, 홀수/짝수 확인하기
2로 나눈 나머지 값이 0인지 아닌지를 판별해서 불리언을 리턴합니다.
const isEven = num => num % 2 === 0;
console.log(isEven(124)); //true
console.log(isEven(57)); //false
2. 숫자인지 확인하기
인자 값을 실수로 변환한 결과가 숫자이고 유한 수이면 true를 반환합니다.
const isNumber = num => !isNaN(parseFloat(num)) && isFinite(num);
isNumber(123); //true
isNumber(123.45); //true
isNumber("str"); //false
3. 평균값 구하기
배열을 축소하는 함수로 배열의 합을 구한 후 배열 길이로 나누어서 평균값을 구합니다.
const averageNum = (...args) => args.reduce((a, b) => a + b) / args.length;
averageNum(43, 8, 37, 4); //23
averageNum(66, 12, 3, 99); //45
4. 웹페이지 화면 맨 위로 이동시키기
웹페이지 화면을 왼쪽 위 시작점 위치로 스크롤합니다.
const scrollToTop = () => window.scrollTo(0, 0);
scrollToTop();
또는 다음처럼 옵션으로 표현할 수 도 있습니다. behavior: 'smooth' 옵션은 웹페이지 내용을 건너뛰지 않고 부드럽게 스크롤해서 이동합니다.
const scrollToTop = () => window.scrollTo({top: 0, left: 0, behavior: 'smooth'});
scrollToTop();
5. 클립보드로 복사하기
텍스트 내용을 클립보드로 복사합니다.
const copyText = (text) => navigator.clipboard.writeText(text);
copyText("Hello JavaScript");
6. 중첩 배열을 1차원 배열로 만들기
중첩 내열을 중첩 레벨에 무관하게 1차원 배열로 변환합니다. 자바스크립트의 내장 함수입니다.
2 중첩 이상의 배열은 flat() 함수에 인자를 넣어서 1차원 배열로 만들 뎁스를 지정할 수 있습니다.
let numbersArray = [8, [10, 9], [7, 3], 12];
numbersArray.flat(); //returns [8, 10, 9, 7, 3, 12]
let twoLevels = ["Hello", [6, [8, 7, [4, "Hi"]], "Javascript"], 15];
twoLevels.flat(2); //['Hello', 6, 8, 7, [4, "Hi"], 'Javascript', 15]
7. 문자열 뒤집기
문자열을 역순으로 변환합니다. 문자열을 분리(split())한 후 뒤집어서(reverse()) 다시 합칩니다.(join())
const reverseStr = str => str.split('').reverse().join('');
reverseStr('Hello JavaScript'); //returns 'tpircSavaJ olleH'
8. 웹페이지의 선택한 영역 텍스트 얻기
현재 블록으로 선택한 영역을 얻습니다. 얻은 텍스트는 앞서의 클립보드 복사하기 한 줄 함수로 클립보드로 보낼 수도 있습니다.
const selectedText = () => window.getSelection().toString();
selectedText();
9. 랜덤 색상 만들기
16진수 표현인 웹 웹 컬러를 랜덤하게 생성합니다.
임의의 색상을 선택해서 무작위 색상을 적용할 때 사용합니다.
const generateRandomHexColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16)}`;
console.log(generateRandomHexColor());//#7e01a1
10. 배열의 중복 요소 제거하기
인자로 받은 배열을 셋(집합) 객체로 변환(배열 중복 요소 제거) 한 후 다시 펼침 연산자로 풀어서 배열로 반환합니다.
const getUnique = (arr) => [...new Set(arr)];
// Testing
const arr = [1, 1, 2, 3, 3, 4, 4, 4, 5, 5];
console.log(getUnique(arr));//[1,2,3,4,5]