번역] 굉장히 강력한 9가지 자바스크립트 팁들

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

 

_____

 

1. Replace all

 

우리는 String.replace() 함수가 오직 첫 번째 항목만을 치환한다는 것을 알고 있다. 하지만 당신이 정규표현식(regex)[1] 뒤에 /g를 추가해준다면 모든 항목을 치환할 수 있다.

 

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

 

추가로 모질라 문서에서도 String.prototype.replace()[2]에 관한 예를 찾을 수 있다.

 

const p = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?';

const regex = /dog/gi;

console.log(p.replace(regex, 'ferret'));
// expected output: "The quick brown fox jumps over the lazy ferret. If the ferret reacted, was it really lazy?"

console.log(p.replace('dog', 'monkey'));
// expected output: "The quick brown fox jumps over the lazy monkey. If the dog reacted, was it really lazy?"

 

보면 첫 예에서는 정규 표현식 뒤에 /g를 붙이고 두번째 예에서는 /g/i를 붙였음을 알 수 있다. 간략하게 언급[3]하면 자바스크립트는 플래그(flag)를 사용해 전역 대소문자를 구별해 검색한다. g로 전역을 설정하고, i는 대소문자를 구별하지 않고 일치시키며 이 두 개를 합쳐서 gi로 표시하기도 한다. 즉 두 번째 경우에는 dog뿐 아니라 Dog도 ferret으로 치환된다.

 

2. Extract unique values

 

우리는 Set 객체[4]와 전개 구문(Spread operatorsyntax)[5]을 사용해 유일한 값을 가진 새로운 배열을 생성할 수 있습니다.

 

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]

 

내 경우엔 두 번째 문장이 조금 익숙치 않았는데 풀어쓰면 아래와 같다.

 

const _set = new Set(entries);	// Set(8) {1, 2, 3, 4, 5, ...}
const newArr = [...set];	// (8) [1, 2, 3, 4, 5, 6, 7, 8]

 

3. Convert number to string

 

우리가 해야 할 것은 단지 연결 연산자와 빈 문자열이다.

 

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

 

4. Convert string to number

 

우리에게 필요한 건 단지 + 연산자뿐이다. 다만 이 방법은 숫자 문자(string numbers)를 다룰 때만 동작한다는 사실을 주의해야 한다.

 

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

 

5. Shuffle elements from array

 

var my_list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(my_list.sort(function() {
    return Math.random() - 0.5
})); 
// [4, 8, 2, 9, 1, 3, 6, 5, 7]

 

6. Flatten multidimensional array

 

전개 구문을 사용하면 간단하다.

 

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

 

두 번째 줄의 전개 구문은 concat 함수[6] 안에 있어서 나머지 매개변수로 쓰였다고 착각할 수도 있는데, 선언이 아닌 호출 시 사용되었음을 기억한다. MDN의 문서를 참고하면, 전개 구문을 사용하면 문자열이나 배열과 같은 반복 가능한 문자를 요소(배열 리터럴의 경우)나 0개 이상의 인수(함수로 호출할 경우)로 확장한다고 되어 있다. 아래와 같이 말이다.

 

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// expected output: 6

 

그리고 concat 함수를 사용한다. MDN 문서의 예를 추가한다.

 

const letters = ['a', 'b', 'c'];

const alphaNumeric = letters.concat(1, [2, 3]);

console.log(alphaNumeric);
// results in ['a', 'b', 'c', 1, 2, 3]

 

7. Short circuit conditionals

 

다음과 같은 코드를 생각해볼 수 있다.

 

if (available) {
    addToCart();
}

 

위 코드는 다음과 같이 한 줄로 축약[7]할 수 있다.

 

available && addToCart()

 

8. Dynamic property names

 

 

 

9. Use length to resize/empty an array

 

 

 

_____

1. 매우 단순하게 얘기하자면, 정규 표현식을 사용하는 이유는 검색과 치환이 전부다.

2.

const newStr = str.replace(regexp|substr, newSubstr|function)

3. 손에 잡히는 정규 표현식(2009), 벤 포터 저

4. Set 객체는 자료형에 관계없이 원시값과 객체 참조 모두 유일한 값을 저장할 수 있다.

new Set([iterable]);

5. ...은 나머지 매개변수(rest parameters syntax)나 전개 구문(spread syntax)으로 사용된다. 이 둘은 아래의 방법으로 구분할 수 있다.

• ...이 함수 선언 시 매개변수의 끝에 있으면 인수 목록의 나머지를 배열로 모아주는 나머지 매개변수
• ...이 함수 호출 시 사용되면 배열을 목록으로 확장해주는 전개 구문

6. MDN 문서를 참고하면 아래 두 가지 쓰임을 찾을 수 있다.

/* Array.prototype.concat() */
const new_array = old_array.concat([value1[, value2[, ...[, valueN]]]])

/* String.prototype.concat() */
str.concat(str2 [, ...strN])

7.

 

_____

참고자료

 

• 나머지 매개변수와 전개 문법