JavaScript 속기 팁 및 요령

속기 팁과 기타 요령을 확인해 봅시다.

Remember, some of these are not readable and might not seems relevant to use in a project, but my intensions here is to make you aware that these tricks exist.

여러 변수에 값 할당

배열 구조 분해를 사용하여 한 줄에 여러 변수에 값을 할당할 수 있습니다.

//Longhand
let a, b, c;

a = 5;
b = 8;
c = 12;

//Shorthand
let [a, b, c] = [5, 8, 12];

기본값 할당

OR(||) 단락 평가 또는 무효 통합 연산자(??)를 사용하여 예상 값이 거짓인 경우 변수에 기본값을 할당할 수 있습니다.

//Longhand
let imagePath;

let path = getImagePath();

if (path !== null && path !== undefined && path !== '') {
    imagePath = path;
} else {
    imagePath = 'default.jpg';
}

//Shorthand
let imagePath = getImagePath() || 'default.jpg';
// OR
let imagePath = getImagePath() ?? 'default.jpg';

AND(&&) 단락 평가

변수가 true 인 경우에만 함수를 호출하는 경우 이에 대한 대안으로 AND(&&) 단락을 사용할 수 있습니다.

//Longhand
if (isLoggedin) {
    goToHomepage();
 }

//Shorthand
isLoggedin && goToHomepage();

두 변수 교환

두 변수를 교환하기 위해 종종 세 번째 변수를 사용합니다. 배열 분해 할당으로 두 변수를 쉽게 교환할 수 있습니다.

let x = 'Hello', y = 55;

//Longhand
const temp = x;
x = y;
y = temp;

//Shorthand
[x, y] = [y, x];

템플릿 리터럴

일반적으로 + 연산자를 사용하여 문자열 값을 변수와 연결합니다. ES6 템플릿 리터럴을 사용하면 더 간단한 방법으로 할 수 있습니다.

//Longhand
console.log('You got a missed call from ' + number + ' at ' + time);

//Shorthand
console.log(`You got a missed call from ${number} at ${time}`);

여러 조건 확인

다중 값 일치를 위해 모든 값을 하나의 배열에 넣고 indexOf() 또는 includes() 방법을 사용할 수 있습니다.

//Longhand
if (value === 1 || value === 'one' || value === 2 || value === 'two') {
  // Execute some code
}

// Shorthand
if ([1, 'one', 2, 'two'].indexOf(value) >= 0) {
   // Execute some code
}

// OR
if ([1, 'one', 2, 'two'].includes(value)) { 
    // Execute some code 
}

개체 속성 할당

변수 이름과 개체 키 이름이 같으면 개체 리터럴에서 키와 값 모두 대신 변수 이름을 언급할 수 있습니다. JavaScript는 자동으로 변수 이름과 동일한 키를 설정하고 값을 변수 값으로 할당합니다.

let firstname = 'Amitav';
let lastname = 'Mishra';

//Longhand
let obj = {firstname: firstname, lastname: lastname};

//Shorthand
let obj = {firstname, lastname};

문자열을 숫자로

문자열 값 앞에 단항 연산자(+)를 제공하기만 하면 문자열을 숫자로 변환할 수 있습니다.

//Longhand
let total = parseInt('453', 10);
let average = parseFloat('42.6', 10);

//Shorthand
let total = +'453';
let average = +'42.6';

지수 전력

Math.pow() 방법을 사용하여 숫자의 거듭제곱을 찾을 수 있습니다. 이중 별표(**)를 사용하여 이를 수행하는 더 짧은 구문이 있습니다.

//Longhand
const power = Math.pow(4, 3); // 64

// Shorthand
const power = 4**3; // 64

이중 NOT 비트 연산자(~~)

이중 NOT 비트 연산자는 Math.floor() 메서드를 대체합니다.

//Longhand
const floor = Math.floor(6.8); // 6

// Shorthand
const floor = ~~6.8; // 6

The double NOT bitwise operator approach only works for 32 bit integers i.e (2**31)-1 = 2147483647. So for any number higher than 2147483647 and less than 0, bitwise operator (~~) will give wrong results, so recommended to use Math.floor() in such case.

배열에서 최대 및 최소 수 찾기

const arr = [2, 8, 15, 4];
Math.max(...arr); // 15
Math.min(...arr); // 2

배열 병합

let arr1 = [20, 30];

//Longhand
let arr2 = arr1.concat([60, 80]); // [20, 30, 60, 80]

//Shorthand
let arr2 = [...arr1, 60, 80]; // [20, 30, 60, 80]

배열에서 잘못된 값 제거

let arr = [12, null, 0, 'xyz', null, -25, NaN, '', undefined, 0.5, false];

let filterArray = arr.filter(Boolean);
// filterArray = [12, "xyz", -25, 0.5]

Note: Zero (0) is considered to be a falsey value so it will be removed in both the cases. You can add an extra check for zero to keep it.

어레이에서 중복 제거

const arr = [10, 5, 20, 10, 6, 5, 8, 5, 20];
const unique = [...new Set(arr)];
console.log(unique); // [10, 5, 20, 6, 8]

임의의 문자열 토큰 생성

const token = Math.random().toString(36).slice(2);
// it will create a 11 character string. Ex: '3efstaz9g8a'

함수에서 예상하는 인수 수 찾기

function func(a, b, c) {
  // code
}

console.log(func.length); // 3
// function with Rest parameter
function func(a, b, ...c) {
  // code
}
console.log(func.length); // 2

객체에 키가 있는지 확인

const ob = {x: 5, y: 10};
// using "in" operator
console.log('x' in ob); // true
console.log('abc' in ob); // false
// using Reflect object
console.log(Reflect.has(ob, 'x')); // true
console.log(Reflect.has(ob, 'abc')); // false

당신은 또한 좋아할 수 있습니다

Map in JavaScript and when to use it over object

JavaScript Set object to store unique values

Generator functions in JavaScript

A brief guide to Object.defineProperty() method

The Vibration API in JavaScript

JavaScript Fetch API to make HTTP requests

Object.freeze() vs Object.seal() vs Object.preventExtensions()

시간 내주셔서 감사합니다 ❤️
웹 개발 블로그jscurious.com에서 내 글을 더 찾아보십시오.