2장, 알아두어야 할 자바스크립트

2.1 ES2015+

2015년 자바스크립트 문법에 매우 큰 변화가 있었다. 이것이 ES6이라고도 불리우는 ES2015가 등장한 것이다. 2015년을 기점으로 매년 문법 변경 사항이 발표되고 있으며, 이 책에서는 ES2015이상의 자바스크립트를 통틀어서 ES2015+라고 표현한다.

2.1.1 const, let

const 와 let 이 공통적으로 가지는 특징인 블록 스코프(범위)의 차이

• var 은 함수 스코프를 가지므로 if문의 블록과 관계없이 접근할 수 있음.
• 하지만 const 와 let은 블록 스코프를 가지므로 블록 밖에서는 변수에 접근할 수 없다.

const 는 한 번 값을 할당하면 다른 값을 할당할 수 없다. 또한, 초기화 할 때 값을 할당하지 않으면 에러가 난다. 그래서 const로 선언한 변수를 상수라고 부르기도 한다.

2.1.2 템플릿 문자열

ES2015 문법에 새로운 문자열이 생겼다. 기존 문자열과 다르게 백틱(`) (맥에서는 영문키로 바꾸고 ₩ 버튼을 누르면된다..) 으로 감싼다. 특이한 점은 문자열 안에 변수를 넣을 수 있다는 것이다.

const a = 10;
const b = 20;
const str = `${a} 곱하기 2는 ‘${b}'`;

${변수} 형식으로 변수를 더하기 기호 없이 문자열에 넣을 수 있고 큰따옴표나 작음따옴표도 함께 사용할 수 있다.

2.1.3 객체 리터럴

객체의 메서드에 함수를 연결할 때, 콜론(:)과 function을 붙이지 않아도 된다.
속성명과 변수명이 동일한 경우에는 한 번만 써도 된다.

2.1.4 화살표 함수(arrow function)

새로 추가된 기능. 기존의 function() {} 도 그래도 사용가능 하다.

function multiple(a, b) {
	return a*b;
}

const multiple2 = (a, b) => {
	return a*b;
};

function 선언 대신 => 기호로 함수를 선언한다. 변수에 대입하면, 나중에 재사용 가능하다.

** this 바인드 방식
this 를 사용해야 하는 경우에는 화살표 함수와 함수 선언문(function)중에서 하나를 고르면 된다.

2.1.5 구조분해 할당

구조분해 할당을 사용하면 객체와 배열로부터 속성이나 요소를 쉽게 꺼낼 수 있다.

배열에 대한 구조분해 할당 문법

const arr = [‘nari’, {}, 27, true];
const [name, birthday, , bool] = arr;

name 은 배열의 첫 번째 요소, birthday는 두 번째 요소, bool은 네번째 요소이다. 중간에 27은 빈칸으로 두었으므로 변수명을 지어주지않아서 무시하면된다.

2.1.6 클래스

클래스 문법이 추가되었지만 다른 언어처럼 클래스 기반으로 동작하는 것이 아니라 프로토타입 기반으로 동작한다. 프로토타입 기반 문법을 보기 좋게 클래스로 바꾼것이라고 이해하면 된다.

2.1.7 프로미스

자바스크립트와 노드에서는 주로 비동기를 접한다. ES2015부터는 자바스크립트와 노드의 API들이 콜백 대신 프로미스(Promise)기반으로 재구성되며, 콜백 지옥(callback hell) 현상을 극복했다는 평가를 받고 있다.

프로미스에는 규칙이 있다. 먼저는 프로미스 객체를 생성해야한다. new Promise로 프로미스를 생성할 수 있으며, 그 내부에 resolve와 reject 를 매개변수로 갖는 콜백함수를 넣는다. 이렇게 만든 프로미스 변수에는 then 과 catch 메서드를 붙일 수 있으며, resolve가 호출되면 then이 실행되고, reject가 호출되면 catch가 실행된다. finally 부분은 성공/실패 여부와 상관없이 실행된다.

쉽게 말하자면, 실행은 바로 하되 결과값은 나중에 받는 객체이다. 결과값은 실행이 완료된 후 then 이나 catch 메서드를 통해서 받는다.

2.1.8 async/await

이 기능은 노드 7.6버전부터 지원되는 기능이다. 비동기 위주로 프로그래밍을 할 때 도움이 된다. 프로미스가 콜백지옥을 해결했지만, then과 catch가 계속 반복되어 코드가 장황하다. 하지만 async/await 문법은 프로미스를 사용한 코드를 한 번 더 깔끔하게 줄여준다.

2.2 프런트엔드 자바스크립트

2.2.1 AJAX

Asynchronous Javascript And XML 의 약자로 비동기적 웹 서비스를 개발할 때 사용하는 기법이다. 이름에 XML이 들어있지만 꼭 사용해야하는 것은 아니여서 요즘은 JSON을 많이 사용하고 있다.
쉽게 말해서 페이지 이동없이 서버에 요청을 보내고 응답을 받는 기술이다.

2.2.2 FormData

HTML form 태그의 데이터를 동적으로 제어할 수 있는 기능으로 AJAX와 함께 사용된다.

const formData = new FormData();

// 키-값 형식의 데이터를 저장할 수 있음. 키 하나에 여러 개의 값 추가 가능
formData.append(‘name’, ‘nari’);

// 주어진 키에 해당하는 값이 있는지 여부를 반환함
formData.has(‘name’); //true

// 주어진 키에 해당하는 값 하나를 가져옴
formData.get(‘name’);

formData.append(‘name’, [‘shin’, ‘young’]);

// 주어진 키에 해당하는 모든 값을 가져옴
formData.getAll(‘name’); // nari, shin, young

// 현재키를 제거하는 메서드
formData.delete(‘name’);
formData.get(‘name); //null. 바로위에서 name 키에 해당하는 값을 지웠으므로.

// 현재 키를 수정하는 메서드
formData.set(‘name’, ‘rebekah’);
formData.getAll(‘name’); // [‘rebekah’]

2.2.3 encodeURIComponent, decodeURIComponent

AJAX 요청을 보낼 때, ‘http://localhost4000/나리’처럼 주소에 한글이 들어가는 경우가 있다. 서버에 따라서 한글 주소를 이해하지 못하는 경우가 있는데, 이 때 window 객체의 메서드인 encodeURIComponent 메서드를 사용한다.

https://localhost4000/${encodeURIComponenet(‘나리’)}’

이렇게 할 경우 한글주소가 % 와 영어, 숫자가 섞인 문자열로 변환된다.
그리고 다시 변환시킬때, 받는 쪽에서는 decodeURIComponent 를 사용하면 한글로 다시 바뀐다.

2.2.4 데이터 속성과 dataset

데이터 속성(Data Attribute)
HTML과 관련된 데이터를 저장하는 공식적인 방식.
노드를 웹 서버로 사용하는 경우, 서버에서 보내준 데이터를 프론트엔드 어디에 넣어야할지 고민하게 되는데, 첫 번째로는 ‘보안’ 을 고려해야한다.

2.3 함께 보면 좋은 자료