유용한 javascript tips (볼 때마다 계속 여기에 정리할 것)

이런 류의 포스팅이 주기적으로 날아와서 정리하기로 했다.

앞으로는 javascript tip이 있으면 여기에 몰아 정리하기로 하자.

 

 

CSS의 미디어 쿼리를 자바스크립트적으로 사용하기

 

(css-tricks.com/working-with-javascript-media-queries/)

// Create a condition that targets viewports at least 768px wide
const mediaQuery = window.matchMedia('(min-width: 768px)')


function handleTabletChange(e) {
  // Check if the media query is true
  if (e.matches) {
    // Then log the following message to the console
    console.log('Media Query Matched!')
  }
}


// Register event listener
mediaQuery.addListener(handleTabletChange)

// Initial check
handleTabletChange(mediaQuery)

 

숫자 => 문자열 / 문자열 => 숫자 

 

const str = "3";
const int = 6;

// number to string
console.log(int + "");
console.log(typeof (int + "")); // string

// string to number
console.log(+str);
console.log(typeof +str); // number

 

배열 내 중복 제거

 

python에서도 set의 속성을 이용해서 종종 사용하는 방식이죠.

set에 대해서는 darrengwon.tistory.com/900?category=858365 에서 다뤘습니다.

let array = [100, 23, 23, 23, 23, 67, 45];

let outputArray = Array.from(new Set(array));
let spreadArray = [...new Set(array)];

console.log(outputArray);
console.log(spreadArray);

 

 

배열 => 객체 || 객체 => 배열

// Array to object
let arr = ["value1", "value2", "value3"];
let arrObject = { ...arr }; // { '0': 'value1', '1': 'value2', '2': 'value3' }

// Object to Array
let numbers = {
  one: 1,
  two: 2,
};
let key = Object.keys(numbers); // key = [ 'one', 'two' ]
let value = Object.values(numbers); // value = [ 1, 2 ]
let entry = Object.entries(numbers); // entry = [['one' : 1], ['two' : 2]]

 

 

배열인지 체크하기 (arr 라는 타입은 없어서 Array.isArray를 사용해야 함)

const arr = [1, 2, 3];
console.log(typeof arr); // object
console.log(Array.isArray(arr)); // true

 

랜덤한 값 생성

Math.floor(Math.random() * 4) //  will give us a random number from 0 to 3.

 

Numeric Separators

단순히 가독성을 높이는 효과. java에서는 예전부터 있었던 것 같았는데 흠.

const amount = 1000000;
const amount2 = 1_000_000;

console.log(amount === amount2); // true. _를 붙여도 완전히 같은 것으로 인식

 

multiple OR

includes를 사용하면 훨씬 편하게 muliple OR 기능을 구현할 수 있다.

단, includes를 지원하도록 babel이나 tsconfig를 구성해줘야 한다.

let canEdit = false;
let x = "abc";

// long
if (x === "abc" || x === "def" || x === "ghi" || x === "jkl") {
  canEdit = true;
}

// short
if (["abc", "def", "ghi", "jkl"].includes(x)) {
  canEdit = true;
}

 

sleep

JS에서는 sleep이 없어서 비동기 처리로 직접 만들어줘야 한다.

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

// 사용
await sleep(1000);

 

%c

다음과 같이 콘솔 창에서도 css를 적용한 결과물을 출력할 수 있습니다.

console.log("%c Hello Console", "color:Red; font-weight: 800")

 

 

console.table

 

테이블을 보여줄 수 있습니다. console.table의 인자로 객체를 넣을 수 있으며 당연히 객체의 변형인 배열 또한 넣을 수 있습니다. tensorflow.js 와 같이 데이터를 js에서 다룰 때 유용하게 사용하게 될것입니다.

const foo = {first: 1, second: 2, third: 3}
undefined
console.table(foo)

 

 

console.time(End)

 

시간 측정에 유용한 console 명령어입니다. 성능에 대한 벤치마킹을 하는데 유용합니다. 저는 bcrypt의 암호화에 걸리는 시간을 1초 정도로 만들기 위해 종종 사용합니다. 혹은 병목 지점을 파악하는데에도 유용합니다.

console.time("인자가 같아야 함");
// 여기에 코드를 넣습니다.
console.timeEnd("인자가 같아야 함");

// 인자가 같아야 함: 0.061ms

 

 

DOM 접근 함수시 반복되는 document.querySelector 함수 처리하기

// $는 제이쿼리에서 사용하던 것이긴 한데, 연속성을 위해서 함수 이름을 '$'로 지었음. 특별히 $가 특별한 건 아님
function $(selector: string) {
  return document.querySelector(selector);
}

// DOM을 가져올 때, 아래와 같이 편하게 가져올 수 있게 된다.
const confirmedTotal = $(".confirmed-total") as HTMLSpanElement;

 

만약 타입스크립트를 사용한다면 제네릭을 활용한 아래 꼴이 사용하기 편하다.

function $<T extends HTMLElement>(selector: string): T {
  const dom = document.querySelector(selector) as T;
  return dom;
}

const confirmedTotal = $<HTMLSpanElement>(".confirmed-total");

 

 

함수형 프로그래밍을 위한 array 생성

fill 안해주면 undefined으로 해당 lenght 만큼 채워집니다.

const a = [...Array(10).fill('a')];
const b = Array.from({ length: 10 }).fill('b');

 

 

for 문 말고 reduce를 사용하기

const sum = [...Array(10)].reduce((acc, _, i) => acc + i, 0);

console.log(sum);

 

 

reduce로 객체 조작

 

reduce의 기본적인 용법이긴 합니다만 종종 잊어버려서 남깁니다.

const cities = [
  { name: 'Paris', visited: 'no' },
  { name: 'Lyon', visited: 'no' },
  { name: 'Marseille', visited: 'yes' },
];

const result = cities.reduce((acc, item) => {
  return {
    ...acc,
    [item.name]: item.visited,
  };
}, {});

console.log(result);

 

 

구조분해할당에서 곧바로 새로운 객체 생성하기

const rawUser = {
  name: 'John',
  surname: 'Doe',
  email: 'john@doe.com',
  displayName: 'SuperCoolJohn',
  joined: '2016-05-05',
  image: 'path-to-the-image',
  followers: 45,
};

let user = {};
({ name: user.name, email: user.email } = rawUser);
console.log(user); // { name: 'John', email: 'john@doe.com' }

 

객체에 동적 key 부여

const dynamic = 'age';
let user = {
  name: 'John',
  [dynamic]: 23,
};
console.log(user);

 

 

 

참고한 글)

medium.com/better-programming/the-top-3-new-javascript-es-2021-es-12-features-im-excited-about-a3ac129efbb2

dev.to/rahxuls/17-pro-javascript-tricks-you-didn-t-know-5gog

blog.ull.im/engineering/2019/06/10/some-of-useful-javascript-trick.html

medium.com/javascript-in-plain-english/34-javascript-optimization-techniques-to-know-in-2021-d561afdf73c3