[JavaScript] Syntactic Sugar

💡 알고 있으면 코드의 양이 획기적으로 줄어드는 Syntactic Sugar. 적극 활용해보자!

목표

• Syntactic Sugar가 무엇을 의미하는지 설명할 수 있다.
• 자바스크립트에서 대표적인 Syntactic Sugar에는 무엇이 있는지 설명할 수 있다.
• 유용한 예제를 기록하는 공간으로 활용할 수 있다.

 

프로그래밍을 하다보면, 익숙하지 않은 용어가 등장하게 된다.

'Syntactic Sugar'도 그 중에 하나이다.

 

Syntactic Sugar란, 직역하면 문법적인 설탕이라는 뜻으로 달달한 문법이라고 생각하면 된다.

Candy Grammer라고도 부르기도 하며, 코드를 더 간략하고 쉽게 만들어주는 문법을 의미한다.

 

자바스크립트에서는 어떤 문법들이 syntactic sugar 일까?

자바스크립트의 Syntactic Sugar

ES6(ES2015)부터 추가된 대표적인 문법 class와 구조분해할당(spread), 객체 분해(desturcture) 등이 이에 해당한다.

프로그래밍을 하면서 사용하면 유용할 예제들을 틈틈히 정리해보자.

 

보호 연산과 기본값 연산

&&과 || 도 대표적인 syntactic sugar 이다. 다음 예제를 분석해보자.

const a = 1, b = 5, c = 3, d = 9;
let temp1 = a || b || c || d;
let temp2 = a && b && c && d;

a ~ d 까지 모든 값이 0이상인 숫자라고 가정해보자.

그 결과는 다음과 같다.

1
9

|| 연산자는 좌항에 값이 있으면, 그 값으로 연산을 끝낸다. 좌항에 값이 없다면 반환값은 우항의 값일 것이다.

&& 연산자는 좌항에 값이 있드면, 우항 반환하여 연산을 끝낸다. 좌항에 값이 없다면 어떻게 될까? 반환값은 좌항이다.

let temp = a && falseValue && c && d;
// false

 

||와 && 모두 프로그래밍을 하면서 생각보다 자주 쓰이는 유용한 문법이다.

||는 주로 기본값(default)을 정할 때 많이 쓰인다.

function arrayInitiator(value) {
  var answer = value || []; // Before, value ? value : [];
  console.log(answer);
}
arrayInitiator([1, 2, 3]); // [1, 2, 3]
arrayInitiator(); // []

&&는 필수 조건을 의미할 때 많이 쓰인다.

function visitGreeting(isFirst) {
  var answer = isFirst && 'hello';
  console.log(answer);
}
visitGreeting(true); // 'hello';
visitGreeting(); // undefined

또는 객체 안의 속성에 안전하게 접근(보호 연산)하기 위해 사용한다.

즉, cannot read property of undefined 에러를 사전에 방지할 수 있다.

const a = object && object.a && object.b
const b = object?.a && object.b

 

Boolean 변환

무엇인가로부터 받아온 값이 True인지 False인지 다음과 같은 구문으로 빠르게 비교할 수 있다.

const a = [];
const b = NaN;
const c = undefined
!!a; // true
!!b; // false
!!c; // false

굳이 if ~ else 구문을 기입할 필요가 없으며, 결과값을 변수에 저장하거나, 반환할 때 유용하게 쓸 수 있다.

 

시간 변환

다음과 같이 현재 시간을 밀리초 단위 숫자로 표현할 수 있다.

// 1970년 이후로 지나간 밀리초
new Date().getTime() // === new Date().valueOf()
+new Date();
// 1657244629630

 

For...of

`for...of` 는 반복을 위한 문법적 설탕 구문이다.

가장 기본적인 `for` 반복문에 대한 예제는 다음과 같다.

let fruits = ['apple', 'banana', 'cherry'];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

apple
banana
cherry

 

'for...of' 반복문은 for 반복문과 동일한 기능을 달성하지만, 구문을 더 짧게 작성할 수 있다.

배열, 문자열 및 집합과 같은 반복 가능한 테이블 위에 반복한다.

for (variable of iterable) {
  // statement that executes for each variable
}

 

위 예제를 `for...of`로 대체한 코드는 다음과 같다:

let fruits = ['apple', 'banana', 'cherry'];
for (let i of fruits) {
  console.log(i);
}

apple
banana
cherry

 

 

 

출처

• Syntactic sugar, Wikipedia, 2022-05-06
• Examples of Syntactic Sugar in JavaScript,Sophia , 2020-08-08

 

Last Updated. 2022. 09. 05.