문법적 설탕 (Syntax Sugar)

문법적 설탕에 대해 알아보자.

문법적 설탕이란?

문법적 설탕이란, 프로그래밍 언어에서 언급되는 개념으로
특별한 기능이 추가되었다기보다는 기존 문법을 더 간단하고 읽기 좋은 문법으로 제공하는 것을 말한다.
즉, 개발 생산성과 가독성을 높여주는 표현 방식이다.

클래스 (class)

자바스크립트는 원래 프로토타입 기반 객체 지향 언어이다.
class 문법은 새로운 객체 지향 모델을 만든 것이 아닌, 기존 프로토타입 기반 상속을 더 보기 쉽게 만든 문법적 설탕이다.

원래 방식

function Person(name) {
  this.name = name;
}
Person.prototype.sayHello = function() {
  console.log(`Hello, ${this.name}`);
};

class 방식

class Person {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    console.log(`Hello, ${this.name}`);
  }
}

화살표 함수 (() => {})

function 키워드를 쓰던 기존 함수 표현을 더 간결하게 줄여서 쓸 수 있게 해주는 문법이다.
화살표 함수에서는 this 바인딩 규칙이 직관적으로 다르게 동작한다.

원래 방식

const numbers = [1, 2, 3];
const doubled = numbers.map(function(n) {
  return n * 2;
});

화살표 함수

const doubled = numbers.map(n => n * 2);

템플릿 리터럴 (`백틱`)

문자열과 변수를 + 연산자로 이어 붙이지 않고, 가독성 있게 함께 표현할 수 있다.

원래 방식

const name = "Alice";
console.log("Hello, " + name + "!");

템플릿 리터럴

const name = "Alice";
console.log(`Hello, ${name}!`);

구조 분해 할당 (Destructuring Assignment)

배열이나 객체에서 원하는 값을 쉽게 꺼내 쓸 수 있는 문법이다.

원래 방식

// 배열
const arr = [1, 2, 3];
const first = arr[0];
const second = arr[1];

// 객체
const user = { name: "Tom", age: 20 };
const name = user.name;
const age = user.age;

구조 분해 할당

// 배열
const arr = [1, 2, 3];
const [first, second] = arr;

// 객체
const user = { name: "Tom", age: 20 };
const { name, age } = user;

async/await

비동기 코드를 더 직관적으로 표현하여 동기 코드처럼 읽을 수 있게 만든 문법이다.
내부적으로는 Promise 기반으로 동작한다.

Promise의 .then() 체인을 줄이고, try/catch를 이용하여 직관적으로 예외 처리를 할 수 있다.

원래 방식

fetchUser().then(user => {
  console.log(user);
});

async/await

async function showUser() {
  const user = await fetchUser();
  console.log(user);
}