번역] 15가지 자바스크립트 팁

이 글은 다음 글(15 'Hacks' In JavaScript)을 번역, 요약한 글입니다. 자바스크립트 초보자로 공부 목적으로 적은 글이라 작성 중이고 추가해나갈 예정입니다. 틀린 부분이 있을 수 있는데, 댓글로 피드백 주시면 감사하겠습니다.

 

_____

 

자바스크립트 언어를 배우는 것은 쉽지만 이를 사용하여 대화형 웹 인터페이스를 개발하는 것은 특정한 기술들을 필요로 한다. 그러므로 당신이 이 개발 언어를 조금 더 쉽게 사용할 수 있도록, 웹사이트를 개발하는 동안 성능 및 속도를 최적화하고 시간을 아낄 수 있는 몇 가지 팁을 소개하고자 한다.

 

1. Async/await with destructuring:

 

배열 비구조화[1]가 제공하는 많은 기능은 놀랍기만 하다. 만약 당신이 복잡한 흐름을 좀 더 단순하게 만들고 싶다면, 단지 배열 비구조화를 async/await와 결합한 후 확인해보라.

 

const [user, account] = await Promise.all ([ 
    fetch ( '/ user'), 
    fetch ( '/ account') 
]);

 

****

디스트럭처링

구조분해할당

JavaScript Async/Await Promise All Array Destructuring

JavaScript Destructring Pro Tips

****

 

2. Use '!!' operator to convert to boolean:

 

!!는 자바스크립트 언어에서 이중 부정 연산자로 알려져 있다. 개발자들은 이를 통해 변수가 존재하는지 혹은 유효한 값을 갖는지 확인할 수 있다. 이는 데이터를 자동적으로 불리언(boolean)으로 바꿔준다. 만약 데이터가 다음 값(0, '', "", null, NaN, undefined)들 중 하나라면 이는 false를 반환할 것이다. 이 외의 경우에는 true를 반환할 것이다.

 

function Account(cash) {
    this.cash =cash
    this.hasMoney = !!cash;
}

var account = new Account(100.50);
console.log(account.cash);	// 100.50
console.log(account.hasMoney);	// true

var emptyAccount = new Account(0);
console.log(emptyAccount.cash);		// 0
console.log(emptyaccount.hasMoney);	// fasle

 

3. Swap variables:

 

배열 비구조화(array destruction)을 사용하면 값을 바꿀 수 있다. 아래 코드와 같다.

 

let a = 'world', b = 'hello';
[a, b] = [b, a];
console.log(a); // hello
console.log(b); // world

 

4. Use the + operator to convert to numbers:

 

우리는 매우 단순하지만 문자 숫자(string numbers)에 작동하는 놀라운 팁을 갖고 있다. 하지만 만약 문자 숫자가 아니라면, 이는 숫자가 아님을 의미하는 NaN을 반환할 것이다.

 

function toNumber(strNumber) {
    return +strNumber;
}

console.log(toNumber( “1234”)); // 1234
console.log(toNumber(“ABC”));	// NaN

 

5. Short-circuit conditionals:

 

 

6. Debugging hack:

 

 

7. How to detect properties in an object with a hack?

 

 

8. One-liners:

 

 

9. Array concatenation:

 

concat 대신 전개 구문을 사용하라.

 

const one = ['a', 'b', 'c'];
const two = ['d', 'e', 'f'];
const three = ['g', 'h', 'i'];

// Old way #1
const result = one.concat(two, three);
// Old way #2
const result = [].concat(one, two, three);
// New
const result = [...one, ...two, ...three];

 

10. Array filter usage:

 

 

11. Get your floating number ensuring good performance:

 

 

12. Array elements are deleted using splice:

 

 

13. Get the last item in the array:

 

 

14. Named parameters:

 

 

15. Cloning:

 

 

_____

1. 디스트럭처링(Destructuring)은 구조화된 배열 혹은 객체를 개별적인 변수에 할당하는 것이다. 이는 배열 또는 객체 리터럴에서 필요한 값만을 추출하여 변수에 할당하거나 반환할 때 유용하다.

2.

 

_____

참고자료