지금 당장 알아야 할 자바스크립트 스니펫 🔥 - #2

그래서 어떻게 됐어?

50가지 필수 JS 스니펫의 두 번째 에디션에 오신 것을 환영합니다. 아래의 첫 번째 에디션을 놓치셨다면 읽어보세요.

지금 당장 알아야 할 자바스크립트 스니펫 🔥 - #1

Abhiraj Bhowmick ・ 2021년 11월 10일 ・ 2분 읽기

#javascript #webdev #beginners #programming

시작하자.

1️⃣ 모두 평등
이 스니펫은 배열의 모든 요소가 동일한지 확인합니다.

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

allEqual([1, 2, 3, 4, 5, 6]); // false
allEqual([1, 1, 1, 1]); // true

2️⃣ 대략 같음
이 스니펫은 두 숫자가 약간의 차이를 제외하고 서로 거의 같은지 여부를 확인합니다.

const approximatelyEqual = (v1, v2, epsilon = 0.001) => Math.abs(v1 - v2) < epsilon;

approximatelyEqual(Math.PI / 2.0, 1.5708); // true

3️⃣ 시도
이 스니펫은 함수를 실행하여 결과 또는 포착된 오류 객체를 반환합니다.

const attempt = (fn, ...args) => {
  try {
    return fn(...args);
  } catch (e) {
    return e instanceof Error ? e : new Error(e);
  }
};
var elements = attempt(function(selector) {
  return document.querySelectorAll(selector);
}, '>_>');
if (elements instanceof Error) elements = []; // elements = []

4️⃣ 분기하여
이 스니펫은 조건자 함수를 기반으로 값을 두 그룹으로 나눕니다. 조건자 함수가 진실한 값을 반환하면 요소가 첫 번째 그룹에 배치됩니다. 그렇지 않으면 두 번째 그룹에 배치됩니다.

Array.prototype.reduce() 및 Array.prototype.push()를 사용하여 각 요소에 대해 fn에서 반환된 값을 기반으로 그룹에 요소를 추가할 수 있습니다.

const bifurcateBy = (arr, fn) =>
  arr.reduce((acc, val, i) => (acc[fn(val, i) ? 0 : 1].push(val), acc), [[], []]);

bifurcateBy(['beep', 'boop', 'foo', 'bar'], x => x[0] === 'b'); 
// [ ['beep', 'boop', 'bar'], ['foo'] ]

5️⃣ 바닥보임
이 스니펫은 페이지 하단이 보이는지 확인합니다.

const bottomVisible = () =>
  document.documentElement.clientHeight + window.scrollY >=
  (document.documentElement.scrollHeight || document.documentElement.clientHeight);

bottomVisible(); // true

6️⃣ castArray
이 스니펫은 배열이 아닌 값을 배열로 변환합니다.

const castArray = val => (Array.isArray(val) ? val : [val]);

castArray('foo'); // ['foo']
castArray([1]); // [1]

7️⃣ 컴팩트
이 스니펫은 배열에서 잘못된 값을 제거합니다.

const compact = arr => arr.filter(Boolean);

compact([0, 1, false, 2, '', 3, 'a', 'e' * 23, NaN, 's', 34]); 
// [ 1, 2, 3, 'a', 's', 34 ]

8️⃣ 현재 URL
이 조각은 현재 URL을 반환합니다.

const currentURL = () => window.location.href;

currentURL(); // 'https://abhiraj.mdx.one'

9️⃣ 연기
이 스니펫은 현재 호출 스택이 지워질 때까지 함수 실행을 지연시킵니다.

const defer = (fn, ...args) => setTimeout(fn, 1, ...args);

defer(console.log, 'a'), console.log('b'); // logs 'b' then 'a'

🔟 degreeToRads
이 코드 스니펫은 값을 각도에서 라디안으로 변환하는 데 사용할 수 있습니다.

const degreesToRads = deg => (deg * Math.PI) / 180.0;

degreesToRads(90.0); // ~1.5708

읽어 주셔서 감사합니다. 3부를 계속 지켜봐 주십시오.


내 블로그와 기술 뉴스를 절대 놓치지 않으려면 아래 내 뉴스레터에 가입하세요.

Abhiraj's Dev-letter

다음 시간까지,
Abhiraj