자바스크립트 강력한 7가지 팁

자바스크립트는 아주 강력한 언어이며, 특히 웹 개발에서 그렇다. 지난 5년간, 자바스크립트는 아주 많이 향상 되었고 새로이 추가된 놀라운 특징 덕택에 코드를 쓰기 훨씬 쉬워졌다. 그래서 개발자들이 이러한 기능 혹은 특징들을 잘 활용한다면, 자바스크립트의 강력한 이점을 누릴 수 있을 것이다.

이번 글에서 우리는 개발자들이 알 필요가 있는 자바스크립트의 몇 가지 유용한 팁(trick)들을 다룰 것이다. 바로 시작해보자.

1. 문자열을 숫자로 변환하기

자바스트립트에서 단항 연산자 +를 사용하면 쉽게 문자열을 숫자로 변환할 수 있다. 이것은 간단한 트릭에 불과하지만 몇몇 사람들은 이것을 알지 못한다.

아래의 예시 코드를 보자:

the_string = "123";
console.log(+the_string);
// 123the_string = "hello";
console.log(+the_string);
// NaN

다만, 이것은 당신이 위에서 본 예시처럼 숫자로 이루어진 문자열에만 적용가능하다는 점을 명심해라.

2. 숫자를 문자열로 변환하기

자바스크립트에서 숫자를 문자열로 변환하는 것 또한 가능하다. 문자열 연결(string concatenation) 개념은 이 작업을 훨씬 쉽게 만들어준다.

아래의 예시 코드를 보자:

var converted_number = 5 + "";
console.log(converted_number);
// 5
console.log(typeof converted_number); 
// string

예시에서 보았듯이, 오직 필요한 것은 빈 문자열뿐이다.

3. 중복없이 값 추출하기(Extract Unique Values)

자바스크립트의 Set객체와 스프레드 연산자를 활용하면 중복없이 고유한(unique)한 값만으로 새로운 배열을 생성할 수 있다.

아래의 예시 코드를 보자:

var entries = [1, 2, 2, 3, 4, 5, 6, 6, 7, 7, 8, 4, 2, 1]
var unique_entries = [...new Set(entries)];console.log(unique_entries);
// [1, 2, 3, 4, 5, 6, 7, 8]

이것은 배열로부터 중복없이 값을 반환하는 아주 강력하고 쉬운 방법이다. 만약 당신이 스프레드 연산자에 익숙하지 않다면, 그것에 대해 기록한 글이 있다. 관심이 있다면 한 번 읽어보는 것도 좋다.

4. 다 차원 배열 평탄화하기

스프레드 연산자와 concat() 메소드를 활용하면 간단하게 배열을 평탄화시킬 수 있다.

아래의 예시 코드를 보자:

var entries = [1, [2, 5], [6, 7], 9];
var flat_entries = [].concat(…entries); 
// [1, 2, 5, 6, 7, 9]

위에서 보듯, 스프레드 연산자는 이 작업을 훨씬 쉽고 가독성 좋게 만들어준다.

5. 모두 교체하기

우리는 string.replace 함수가 오로지 첫번째(로 발견된) 존재만 교체한다는 것을 알고 있다. 하지만 자바스크립트에서 정규표현식은 문자열의 내용을 바꾸는 것에도 사용될 수 있다.

아래의 예시 코드에서, 우리는 정규표현식의 끝에 g플래그를 추가하여 문자열내에서 일치하는 모든 존재를 교체할 것이다.

다음 예시 코드를 보자:

var example = "potato potato";console.log(example.replace(/pot/, "tom")); 
// "tomato potato"console.log(example.replace(/pot/g, "tom")); 
// "tomato tomato"

6.조건문 블록 단축하기(short-circuit)

우선 아래의 예시 표현을 먼저 보자:

if (available) {
    addToCart();
}

논리 연산자 &&를 사용하면 위의 구문을 쉽게 재작성할 수 있다.

아래의 예시 코드를 보자:

available && addToCart()

이것은 단순히 변수를 함수와 함께 배치함으로써 위의 구문을 단축할 수 있게 해준다.

7. 배열을 비우거나 리사이징하기 위해 length 사용하기

자바스크립트에서는 배열의 length 프로퍼티를 덮어쓸 수 있다. 그래서 우리는 이것을 배열을 비우거나 리사이징하는 데 사용할 것이다.

배열을 리사이징하고 싶다면 요기 예시가 있다:

var entries = [1, 2, 3, 4, 5, 6, 7]; 
console.log(entries.length); 
// 7 
entries.length = 4; 
console.log(entries.length); 
// 4 
console.log(entries); 
// [1, 2, 3, 4]

배열을 비우고 싶다면 요기 또 다른 예시가 있다:

var entries = [1, 2, 3, 4, 5, 6, 7]; 
console.log(entries.length); 
// 7 
entries.length = 0; 
console.log(entries.length); 
// 0 
console.log(entries); 
// []