2월 5일 여정 28일차이다.

간단하게나마 ES6 문법정리를 해보려고 한다.

1. const, let 변수 선언

const number = 123;
number = 'hello'; // TypeError: Assignment to constant variable.
number = 456; // TypeError: Assignment to constant variable.

let hello = 'foo';
hello = 'bar';

const는 재할당이 불가능하고 let은 재할당이 가능하다. const는 선언과 동시에 초기화를 해줘야 한다.

const number; // SyntaxError: Missing initializer in const declaration
number = 123;

2) Template Literals

템플릿 리터럴이란 문자열 표헌법이다. 여러 줄의 문자열과 내장 표현식을 사용할 수 있다.

const lyric =
'동해물과 백두산이 마르고 닳도록\n하느님이 보우하사 우리나라 만세\n무궁화 삼천리 화려 강산\n대한 사람 대한으로 길이 보전하세.';

const name = '조윤재';
const age = 21;
console.log('제 이름은 ' + name + '(이)고 나이는 ' + age + '살입니다.');
// 출력 결과: 제 이름은 조윤재(이)고 나이는 21살입니다.

위 문자열들을 백틱을 사용하여 아래와 같이 보기 쉽게, 쓰기 쉽게 나타낼 수 있다.

const lyric = 
`동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세.`;

const name = '조윤재';
const age = 21;

console.log(`제 이름은 ${name}(이)고 나이는 ${age}살입니다.`);
// 출력 결과: 제 이름은 조윤재(이)고 나이는 21살입니다.

3) Arrow Functions

ES6에서 새로 추가된 함수 선언 방법이다. 함수 표현식에서 사용할 수 있다.

// ES5
const plus = function (num1, num2) {
  return num1 + num2;
};


// ES6
const plus = (num1, num2) => num1 + num2;

함수의 내용이 한 줄이고, 리턴밖에 없으면 return 키워드와 중괄호를 생략할 수 있다.

const square = x => x * x;

4) 배열 메서드

1. map()

배열 안의 요소들을 처리하여 새 배열을 만들 때 사용한다.

const arr = [1, 3, 5, 7, 9];
const mapArr = arr.map((x) => x + 1);

console.log(mapArr);
// 출력 결과: [2, 4, 6, 8, 10]

2. filter()

콜백의 조건에 충족하는 값만을 뽑는다.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const oddArr = arr.filter((x) => x % 2 === 1);

console.log(oddArr);
// 출력 결과: [1, 3, 5, 7, 9]

3. reduce()

배열의 값을 줄여서 하나의 값으로 만듭니다.

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((acc, cur) => acc + cur, 100); // 100 자리가 비어도 됨, default: 0

console.log(sum);
// 출력 결과: 115

4. forEach()

배열의 각 요소에 대해 함수를 실행합니다.

const arr = ['똘기', '떵이', '호치', '새초미'];
arr.forEach((x, i) => {
  console.log(x.repeat(i + 1));
});

// 출력 결과:
// 똘기
// 떵이떵이
// 호치호치호치
// 새초미새초미새초미새초미

위의 메서드들은 정말로 리액트에서 많이 쓰이는 배열 메서드이다. 위의 배열 메서드들의 특징은 콜백함수가 같이 쓰인다는 것이다.

5) 구조 분해 할당과 스프레드

5-1) 구조 분해 할당

구조 분해 할당이란 객체나 배열을 분해해서 그 값들을 각각의 변수로 저장하는 표현식이다.

// 객체
const user = {
	email: 'google@gmail.com',
	pw: '123qwe',
	name: 'Yunjae',
}; 

const { email, pw, name } = user;
console.log(email); //google@gmail.com
console.log(pw); // 123qwe
console.log(name); // Yunjae

user라는 객체의 속성들을 각각의 키값을 이름으로 지니는 변수로 뜯어서 저장했다.

// 배열
const arr = ['사과', '침착맨', '호랑이'];

const [apple, coolGuy, tiger, canada] = arr; 
console.log(apple); // 사과
console.log(coolGuy); // 침착맨
console.log(tiger); // 호랑이
console.log(canada); // undefined

arr라는 배열을 매핑하는 [apple, coolGuy, tiger, val] 배열이 arr에 씌워졌다.
할당 값이 없는 변수 canada 는 undefined가 된다.

5-2) 스프레드(spread)

구조 분해 할당으로 할당되지 않은 나머지를 모두 받는 방법이다. “…”으로 표기한다.

// 객체
const user = {
  email: 'google@gmail.com',
  pw: '123qwe',
  name: 'Yunjae',
  age: 21,
  isMarried: true,
};

const { email, pw, ...spread } = user;
console.log(spread); // { name: 'Yunjae', age: 21, isMarried: true }

email 과 pw 는 할당되었지만 나머지 엘리먼트들은 다른 변수에 할당되지 못했다.
이 때 “…”키워드로 나머지를 모두 할당할 수 있다.

// 배열
const arr = ['사과', '침착맨', '호랑이', '캐나다', '오뚜기', '마스크', '키'];

const [apple, coolGuy, tiger, canada, ...spread] = arr;
console.log(spread); // [ '오뚜기', '마스크', '키' ]

배열에서도 사용법은 같다.
할당되지 못한 4번 인덱스부터는 스프레드 문법으로 spread라는 변수가 모두 할당받아갔다.

6) Object Shorthand Property

객체의 key, value 가 같은 이름일 때 단축해서 사용할 수 있다.

const account = 'google@gmail.com';
const password = 'dbswocjswo';
const nickname = 'dbswoWkd';
const user = {
  email: account,
  pw: password,
  nickname, // nickname: nickname 과 같은 표현
};

console.log(user.nickname); // dbswoWkd

user 객체의 key 이름인 nickname과 value 값인 nickname이 같기에 하나만 써도 된다.

7) for of, for in 반복문

8-1) for of

반복 가능(iterable)한 대상에 사용가능하다(배열, 객체, 문자열 등등)

// for of
const arr = ['BTS', '봉준호', '손흥민', '?제이팍', '레츠고'];
for (let x of arr) { // x라는 변수로 arr 배열 엘리먼트의 값들을 받음
	console.log(x);
}

// 출력 결과:
// BTS
// 봉준호
// 손흥민
// ?제이팍
// 레츠고

8-2) for in

열거 가능(enumerable)한 대상에 사용가능하다.

// for in 객체에서 사용
const obj = {
  flower: '무궁화',
  flag: '태극기',
};

for (let x in obj) { // i라는 변수로 arr 배열 엘리먼트의 키(인덱스)들을 받음
  console.log(x); 
}

// 출력 결과:
// flower
// flag

// for in 배열에서 사용(비권장)
const arr = ['민지', '하니', '다니엘', '혜린', '혜인'];
for (let i in arr) {
	console.log(i);
}

// 출력 결과:
// 0
// 1
// 2
// 3
// 4

for of, for in 두가지 표현 모두 let i = 0; i < arr.length; i++ 어쩌고 저쩌고 안해서 편하지만 내부 동작을 모르고 쓰시면 큰 일이 난다.

1. 끝까지 순회합니다. Complexity의 낭비가 있을 수 있다.

2. for of의 경우 Symbol.iterator 라는 메서드를 갖고 있는 자료형에만 사용 가능하다.
   Array, TypedArray, String, Map, Set 타입이 Symbol.iterator 메서드를 갖고 있다.

3. for in의 경우 자기 자신과 상속받고있는 모든 프로토타입의 열거가능한 자료들을 순회한다.

Object.prototype.Melbourne = '03';

const numbers = {
  Seoul: '02',
  Busan: '051',
  Jeju: '064',
};
for (let i in numbers) {
  console.log(i);
}

// 출력 결과:
// Seoul
// Busan
// Jeju
// Melbourne <-- ?????

4. for in은 순서를 고려하지 않는다.(배열에서의 사용을 비권장하는 이유이다.)

const obj = {
  'first': 'first',
  '2': '2',
  '34': '34',
  '1': '1',
  'second': 'second'
};

for (const i in obj) {
  console.log(i);
}

// 출력 결과:
// 1
// 2
// 34
// first
// second

참고자료

https://brass-anise-01b.notion.site/ES6-72c6b7f36675433f8c51ed99043ab700
(항해99 Notion자료)