ECMAScript 1: The Easy Wins(1)

dolphinSarah·2020년 10월 10일

ES6 JavaScript

ECMAScript

목록 보기

1/1

ECMAScript 1: The Easy Wins

How JS vars compare to other languages(C, Java, PHP, Ruby, Python)

var에서 let으로 넘어간 이유

간단히 말하면, ❗️variable의 scope 문제❗️ 때문이다. 아래의 코드를 먼저 보자.

#include <stdio.h>

int i = 1000; 
for(int i = 0; i < 2; i++){
	printf("%d", i);
}
printf("%d", i);

C의 경우에는, for문을 도는 동안에는 0과 1이 출력될 것이고, 마지막 print문에서는 1000이 출력될 것이다.
즉, for문 안의 i와 바깥의 i는 서로 scope가 다른 것이다.

동일한 구조로 이루어진 코드가 JavaScript에서는 어떤 결과로 나타날까?

var i = 1000; 
for(var i = 0; i < 2; i++){
	console.log(i);
}
console.log(i);

for문을 돌면서 0과 1이 출력되고, 마지막 print문에서는 1000이 아닌 2가 출력될 것이다.
var을 사용하는 ES6 이전 문법의 경우, variable의 scope이 block으로 나눠져 있지 않다. 단순히 C와 JavaScript의 차이라고 이해하기에는, 이 차이 때문에 JavaScript에서는 간혹 엄청난 문제들이 발생하곤 한다. 예를 들어, 변수 선언에 예민하지 않은 개발자가 나와 똑같은 변수를 선언해 내가 의도하지 않은 value로 바꿔버릴 수가 있는 것이다.

이 때문에 💯let💯이 등장하게 되었다. 💯let💯을 사용하게 되면 위와 같은 문제를 해결할 수 있다. 즉, block, function의 scope을 가지게 되면서 안전하게 변수를 사용할 수 있게 되는 것이다.

const

const가 등장한 이유는 'protect'를 위해서이다. 실수로라도 값을 바꾸고 싶지 않은 변수들 앞에 const를 붙여주는 것이다.
그렇다고 아예 내용을 바꿀 수 없느냐? 그건 아니다. 아래의 코드를 살펴보자.

const array = [1, 2, 3, 4];
array.push(5); 
console.log(array); // [1, 2, 3, 4, 5] 
//❌array = [3, 4, 5];❌

push나 shift 등을 이용하여 variable의 내용을 바꿀 수는 있지만, 마지막 주석처럼 새로운 값을 할당하는 것은 불가능하다.

Template Literals

Concatenate string

ES6 이전에는 아래와 같이 string을 합치곤 했다.

const name = "Rob"; 
const introduction = 'My name is' + name; 

const selectQuery = 'SELECT * FROM users WHERE name = "'+name'" AND city = "' + name + '"'; 
console.log(selectQuery);

두번째 예시(sql)를 보면 string을 새롭게 넣어줄 때마다 앞뒤로 "' + + '" 를 넣어주어야 함을 알 수 있다. 한두 번은 괜찮을지 몰라도 계속하면 👹몬스터👹 같은 코드가 된다.

Template Literals

위의 문제를 해결해줄 수 있는 것이 바로 'Template Literals'이다. 바로 사용 예시를 보자.

const hello = `Hello, ${name}`; 
console.log(hello); 

const selectQuery = `SELECT * FROM users WHERE name = "${name}" AND city = "${name}"; 
console.log(selectQuery);

혼잡하게 여러 기호들을 쓰고 붙이고 하지 않아도 된다는 장점 외에도 template literals를 사용했을 때의 다른 좋은 점도 있다.

문장이 다음 줄로 넘어가게 하기 위해 new line을 사용하지 않고, template literals를 활용할 수 있다.

const string = `It was a rainy day.
It was very rainy.`;

이렇게만 해도 두번째 문장이 바로 다음 줄로 넘어간다.

그리고 계산도 알아서 해준다.

const anExpression = `43 * 1902 = ${43*1902}`;
console.log(anExpression); 

//결과 
43 * 1902 = 81786

Tagged Templates

Tagged Templated Literals은 Templated Literals을 이용하여 함수의 인자를 파싱하여 넘겨주는 것이다. 코드로 바로 보자.

Template Literal 사이의 li 태그가 string으로 인식되어 출력됨을 확인할 수 있다.

Template Literal 사이의 li 태그는 string으로, lines는 expression으로 인식되어 lines 배열이 출력된다.

${lines[0]}, ${lines[1]}을 활용하여 lines 배열의 0번째 element와 1번째 element가 차례로 출력된다.

아래는 tag 사이에 lines의 각 element가 들어가는 배열을 return하는 newHTML을 확인할 수 있다.

testFunction의 return 값을 출력하게 위해, taggedCallback 함수의 두번째 인자에 ${()=>testFunction()}을 넣어주었다.