React를 위한 Javascript (3)

Javascript 컴파일하기

기능이 제대로 작동하도록 보장하는 유일한 방법은 브라우저에서 코드를 실행하기 전에 더 호환성이 높은 코드로 변환하는 것이다. 이런 변환을 컴파일링[compiling]이라고 한다. 가장 유명한 Javascript 컴파일링 도구로는 바벨[Babel]이 있다.

컴파일링 단계는 Javascript를 다른 컴파일 언어와 비슷하게 느껴지게 하지만, 코드를 바이너리로 변환하는 것이 아니라는 점에서 전통적인 컴파일링과 다르다. Javascript 컴파일링은 코드를 더 많은 브라우저가 이해할 수 있는 다른 버전의 Javascript 구문으로 변환한다. 게다가 이제는 Javascript에서도 소스 코드가 생겨났다. 이 말은 브라우저에서 직접 실행할 수 없는 (그래서 컴파일이 필요한) 파일이 프로젝트에 들어 있는 경우도 있다는 뜻이다.

const add = (x = 5, y = 10) => console.log(x + y);

이 코드가 변환이 되면

"use strict";

var add = function add() {
  var x =
    arguments.length <= 0 || arguments[0] === undefined ? 5 : arguments[0];
  var y =
    arguments.length <= 1 || arguments[1] === undefined ? 10 : arguments[1];
  return console.log(x + y);
};

Babel은 “use strict” 선언을 맨 위에 추가해서 코드가 엄격한 모드에서 실행되도록 만든다. 그리고 arguments배열을 통해 x와 y 파라미터의 디폴트 값을 처리한다. 여러분도 arguments배열을 통해 x와 y의 파라미터의 default 값을 처리한다. 이렇게 만들어진 Javascript 코드는 다양한 브라우저에서 사용 가능하다.

---

객체와 배열

ES6부터 객체와 배열을 다루는 방법과 객체와 배열 안에서 변수의 영역을 제한하는 방법을 다양하게 제공하기 시작했다. 이런 기능으로는 구조 분해[destructuring], 객체 리터럴 개선, 스프레드 연산자[spread operator] 등이 있다.

1. 구조 분해를 사용한 대입

구조 분해를 사용하면 객체 안에 있는 필드 값을 원하는 변수에 대입할 수 있다. 다음 객체를 보면서 필요한 필드의 값을 추출하는 예시를 보자.

const sandwich = {
  bread: "더치 크런치",
  meat: "참치",
  cheese: "스위스",
  toppings: ["상추", "토마토", "머스타드"],
};

const { bread, meat } = sandwich;

console.log(bread, meat); // 더치 크런치 참치

위의 코드는 sandwich를 분해해서 bread와 meat 필드를 같은 이름의 변수에 넣어준다. 새로 할당된 두 변수를 변경해도 원래의 필드 값이 바뀌지는 않는다.

• 중첩 객체의 내부 데이터를 조작하면? 참조사항
• const sandwich = { bread: "더치 크런치", meat: "참치", cheese: "스위스", toppings: ["상추", "토마토", "머스타드"], nutrition: { calories: 500, protein: 20, }, }; const { nutrition } = sandwich; nutrition.calories = 999; console.log(sandwich.nutrition.calories); // 999 (원본도 변경됨) console.log(sandwich); /* { bread: "더치 크런치", meat: "참치", cheese: "스위스", toppings: ["상추", "토마토", "머스타드"], nutrition: { calories: 999, // 원본 변경 protein: 20 } */

객체의 필드에 접근하기 위해 점(.)과 필드 이름을 사용하는 대신, 필요한 값을 구조 분해로 가져올 수도 있다.

const lordify = ({ fruit }) => {
  console.log(`구미의 ${fruit}`);
};

const regularInfo = {
  fruit: "멜론",
  drinking: "콜라",
};

lordify(regularInfo); // 구미의 멜론

데이터를 변경하고 이에 맞춰 한 수준 더 깊이 들어가보자. 이제는 regularInfo 객체 안에 food를 키로 하는 새로운 객체를 포함시켜보자.

const lordify = ({ region, food: { fruit } }) => {
  console.log(`${region}의 ${fruit}`);
};

const regularInfo = {
  region: "구미",
  food: {
    fruit: "멜론",
    drinking: "콜라",
  },
};

lordify(regularInfo); // 구미의 멜론

콜론(:)과 내포된 중괄호({ })를 사용해 내부 객체로부터 구조 분해할 수 있다.

2. 배열 구조 분해하기

배열을 구조 분해해서 값을 뽑아낼 수도 있다. 배열의 첫 번째 원소를 변수에 대입하고 싶다고 가정하자.

const [firstAnimal] = ["캥거루", "웜뱃", "코알라"];

console.log(firstAnimal); // 캥거루

불필요한 값을 콤마(,)를 사용해 생략하는 리스트 매칭[list matching]을 사용할 수도 있다. 변수에 대입하지 않고 무시하고 싶은 원소의 위치에 콤마를 넣으면 된다.

const [,,thirdAnimal] = ["캥거루", "웜뱃", "코알라"];

console.log(thirdAnimal); // 코알라

3. 객체 리터럴 개선

객체 리터럴 개선[object literal enhancement]은 구조분해의 반대라 할 수 있다. 객체 리터럴 개선은 구조를 다시 만들어내는 과정 또는 내용을 한데 묶는 과정이라 할 수 있다.

const name = "지리산";
const elevation = 1915;
const print = function () {
  console.log(`${this.name}의 높이는 ${this.elevation}m 입니다.`);
};

const funHike = { name, elevation, print };

funHike.print(); // 지리산의 높이는 1915m 입니다.

이때 객체의 키에 접근하기 위해 this를 사용했다는 사실에 유의하자.

추가로, 객체 메서드를 정의할 땐든 더 이상 function키워드를 사용하지 않아도 된다.

const name = "지리산";
const elevation = 1915;

const funHike = {
  name,
  elevation,
  print() {
    console.log(`${this.name}의 높이는 ${this.elevation}m 입니다.`);
  }
};

funHike.print(); // 지리산의 높이는 1915m 입니다.const name = "지리산";
const elevation = 1915;

const funHike = {
  name,
  elevation,
  print() {
    console.log(`${this.name}의 높이는 ${this.elevation}m 입니다.`);
  }
};

funHike.print(); // 지리산의 높이는 1915m 입니다.

4. 스프레드 연산자

스프레드 연산자[spread operator]는 3개의 점(…)으로 이루어진 연산자로 몇 가지 다른 역할을 담당한다.

먼저, 스프레드 연산자를 사용해 배열의 내용을 조합할 수 있다. 예를 들어 두 배열이 있다면, 두 배열의 모든 원소가 들어간 세 번째 배열을 만들 수 있다.

const peaks = ["대청봉", "중청봉", "소청봉"];
const canyons = ["천불동계곡", "가야동계곡"];
const seoraksan = [...peaks, ...canyons];

console.log(seoraksan.join(", ")); // 대청봉, 중청봉, 소청봉, 천불동계곡, 가야동계곡

스프레드 연산자를 통해 해결할 수 있는 문제가 있는데, 원본 배열을 변경하지 않는다는 것이다. 이는 새로운 객체를 생성할 때 원본 배열을 조작하지 않아도 되기 때문에 유리하다.

const peaks = ["대청봉", "중청봉", "소청봉"];
const [last] = [...peaks].reverse();

console.log(last);                // 소청봉
console.log(peaks.join(", "));    // 대청봉, 중청봉, 소청봉

또한 스프레드 연산자를 이용하여 배열의 나머지 원소들을 얻을 수도 있다.

const peaks = ["대청봉", "중청봉", "소청봉"];
const [first, ...rest] = peaks;

console.log(rest.join(", ")); // 중청봉, 소청봉

또, 함수의 인자를 배열로 모을 수도 있다. 이런 식으로 함수 파라미터 정의에서 스프레드 연산자가 쓰일 때는 레스트 파라미터[rest parameters]라고 부른다.

function directions(...args) {
  let [start, ...remaining] = args;
  let [finish, ...stops] = remaining.reverse();

  console.log(`${args.length}개 도시를 운행`);
  console.log(`${start}에서 출발`);
  console.log(`목적지는 ${finish}입니다.`);
  console.log(`중간에 ${stops.length} 군데를 들립니다.`);
}

directions("서울", "수원", "천안", "대전", "대구", "부산");

/*
6개 도시를 운행
서울에서 출발
목적지는 부산입니다.
중간에 4 군데를 들립니다.
*/

스프레드 연산자를 객체에도 사용할 수 있다.