# JavaScript ES201n 공부

- Author: @kimyoungjo
- Published: 2019-10-29
- Updated: 2019-10-31
- Source: http://blex.me/@kimyoungjo/javascript-keycode-%EC%A0%95%EB%A6%AC
- Tags: 자바스크립트, til, javascript, es6

---

###글에 앞서
본 글은 [ZeroCho](www.zerocho.com)님의 ECMAScript 텍스트 강좌를 인용했습니다.

###ES6
JavaScript의 ES시리즈란 JavaScript의 버전을 말한다. 최신 Javascript는 var부터 모든것들이 바뀌고 편의성이 개선되었다고 한다.

###const, let
var을 대체하는 이 두 가지는 함수의 스코프를 따르는것이 아닌 블록 스코프를 따른다. var은 어느곳에서 선언해도 최상단으로 끌어올려지는 '호이스팅'이라는 개념때문에 개발자가 예기치 못한 상황을 많이 맞이하였지만, 이 const와 let은 그런 부분에 대해서 철저하게 반응하여서 선언한 곳보다 위에서 접근하는 것이 불가능하다. 블록이란 '{}'를 의미한다.

```javascript
	(function () {
		console.log(x);
		var x = 10;
	})();
```
에러가 나지 않음.
```javascript
	(() =>{
		console.log(x);
		const z = 10;
	}) ();
```
에러가 발생함.

const, let은 전역 스코프에서 선언 시 var과는 다르게 window, global에 등록되지 않는다.

###const, let간의 차이
const는 선언된 값을 = 을 통한 재 선언이 불가능하다. 하지만 선언된 그 주소값만 고정하는 것이지 그 주소의 요소가 변환되는것은 상관이 없다. 따라서 필요에 따라 값을 바꾸어주는 것이 가능하다.
let은 그 블록 내에서만 사용하게 되어있다. 그리고 const와는 다르게 자유로이 변환이 가능하다.

요약하면 기존 var의 기능은 let이 하고 const는 보다 제한적인 상황에 사용한다.

###object(객체)의 변화
```javascript
	var sayYeah = function () {
		alert('yeah')
	};
	var a = 1;
	var b = 'Wow';
	var object = {
		sayHello: function() {
			alert('Hello');
		},
		sayYeah: sayYeah
	};
	object[a + 3] = 'four';
	object['say' + b] = function() {
		alert('Wow');
	};
```
기존 방식
```javascript
	const a = 1;
	const b = 'Wow';
	const sayYeah = () => {
		alert('Yeah');
	};
	const object2 = {
		sayHello() {
			alert('hello');
		},
		sayYeah,
		[a + 3]: 'four',
		['say' + b]() {
			alert('Wow');
		}
	};
```
ES2015 방식

sayYeah는 yeah라는 문자열을 출력해주는 함수이다. 그리고 그 함수를 표현식으로 작성하였다. 두 가지 모두 object를 가지고있고 object내에는 sayHello라는 함수를 가지고 있다. 차이점을 살펴보자면 화살표 함수를 통한 function이라는 구문의 생략, 객체 내에서 함수를 불러올때도 function이 생략된다.

요약하자면 function이라는 구문을 생략하기 위한 시스템적 변화를 알 수 있다. 정도로 넘어가면 될 것 같다. 

###함수의 변화
```javascript
	var object = {
		name: 'Kim',
		friends: ['One', 'Two', 'Three'],
		alertFriends: function () {
			var self = this;
			this.friends.forEach(function(friend) {
				alert(self.name + 'and' + friend);
			});
		}
		
	};
	object.alertFriends();
```
기존 함수 방식

```javascript
	const object2 = {
		name: 'Kim',
		friends: ['One', 'Two', 'Three'],
		alertFriends() {
			this.friends.forEach((friend) => {
				alert(this.name + ' and ' + friend);
			});
		}
	};
	object2.alertFriends();
```

원래는 함수 내에서 함수를 선언 바깥함수에서 this로 저장된 값을 self라는 곳에 따로 저장을 해서 두번의 번거로운 작업을 거쳤는데 이제는 그럴 필요없이 바깥함수에서 선언된 this를 그대로 안쪽에서도 사용 할 수 있다. 

그리고 return만 있는 간소한 함수를 더 간소하게 바꾸었다.

```javascript
	var long = function (x){
		return x;
	}
```

```javascript
	const long = (x) => x;
```