Javascript 유용한 스니펫

프론트엔드 개발할 때 유용하게 사용할 수 있는 자바스크립트 스니펫들을 모아보았습니다.

1.한 줄로 값 바꿔치기

let x = 'a';
let y = 'b';

[y, x] = [x, y];

console.log(x, y) // 'b' 'a'

2.ByteSize 구하기

const ByteSize = data => new Blob([data]).size;

console.log(ByteSize("Yoo")) // 3
console.log(ByteSize(23244)) // 5

3.값 뒤집기

반복문 사용하지 않고 String 값을 리버스하는 방법입니다.

const ReversedString = str => str.split("").reverse().join("");

console.log(Reverse("Coding")) //  gnidoC
console.log(Reverse("World")) //  dlroW

4.모두일치 여부 확인하기

모든 배열요소가 모두 일치하는 값인 지 아닌지 확인하는 방법입니다.

const isEqual = arr => arr.every(val => val === arr[0]);

console.log(isEqual([10,10,11,11,12,13])) // false
console.log(isEqual([10,10,10,10])) // true

5.랜덤으로 선택하기

배열을 인자로 받아서 랜덤으로 선택하는 함수 만드는 방법입니다.

function RandomSelect (arr) {
	return arr[Math.floor(Math.random() * arr.length)];
}

const arr = ["a", "b", "c", "d", "e"];

console.log(RandomSelect(arr)); // a

6.JSON 가독성 높이기

JSON 데이터를 받아서 가독성 높게 만드는 방법입니다.

// JSON READABLE
const JsonData = JSON.stringify({ name: '김철수', age : 25, class: 'A' }, null, '\t');
console.log(JsonData);
// output
{
 "name": "김철수",
 "age": 25,
 "class": "A"
}

7.배열의 요소 중복 제거

배열 속의 요소들의 중복을 삭제하는 방법입니다. Set을 이용하여 중복을 제거합니다. Set은 배열요소의 중복을 허용하지 않습니다.

function removeDuplicate(arr) {
    return [...new Set(arr)];
}

console.log(removeDuplicate([1, 1, 3, 3, 4, 5, 6, 7, 7, 7, 9])) // [1, 3, 4, 5, 6, 7, 9]

8.문자열을 한글자씩 쪼개서 배열로 만들기

말그대로 문자열을 한글자씩 끊어서 배열요소로 만드는 방법입니다.

const sampleString = "FIRE";
const convertedString = [...sampleString];

console.log(convertedString) // ["F","I","R","E"]

9.첫번째 문자만 대문자로 만들기

첫번째 문자만 대문자로 만드는 방법입니다.

const capitalize = ([letter, ...rest]) => letter.toUpperCase() + rest.join('');
console.log(capitalize("javascript")) // Javascript
console.log(capitalize("programming")) // programming

10.현재 시간 구하기

const date = new Date();
let hour = date.getHours();
let min=  date.getMinutes();
let sec = date.getSeconds();