[WIL] Week02 회고

Weekly I Learned Week02

👊 JavaScript의 ES란?

• ES는 ECMA Script의 약자
• 현재는 ES6 ECMA Script6의 규격을 따르고 있다 (ES6 - 6번째 규격 이런 느낌)
  👉 즉, ECMA Script는 규격, 표준 즉, 스펙

자바스크립트는 1990년대 Netscape 회사의 Brendan Eich 라는 사람에 의해 최초 개발되었다.
자바스크립트가 잘 되자, MS에서 Jscript라는 언어를 개발해 IE에 탑재하였는데,
이 두 스크립트가 너무 제각각이라, 표준이 필요하게 되었다.
표준을 위해 자바스크립트를 ECMA(European Computer Manufactures Association)라는 정보와
통신시스템의 비영리 표준 기구에 제출하였고 표준에 대한 작업을 ECMA-262란 이름으로
1996년 11월에 시작해 1997년 6월에 채택되었다.
ES5는 ECMA Script5의 규격을 따른다고 생각하면 된다.

---

👍 ES5/ES6 문법 차이

• ES5문법

1. 배열과 관련해서 새로운 메소드들이 생겼는데 대표적으로 forEach, map, filter, reduce, some, every와 같은 메소드가 생김
   이 메소드들은 개발자가 반복 횟수나 조건을 잘못 입력하는 등의 실수를 줄여주는 효과 있음

👉 forEach : 배열 원소들을 반복하면서 액션(함수)을 취하고, 가장 단순하다
   의미 : 단순 반복 값을 리턴하지 않기 때문에 단순 반복에 쓰는데,
         내부에서 배열을 만드는 것도 가능은 함
         단, 배열 만들 때는 보통은 map을 사용

👉 map : 배열 원소들을 반복하면서 값을 변경(함수로)해서 리턴
         즉, 새로운 배열이 탄생한다.
   의미 : 반복하면서 결과를 배열로 반환, 보통 배열 전체의 값을 변경할 때 사용

👉 filter : 배열 원소들을 반복하면서 조건(함수)에 true면 원소를 남기고 false면 없애버림
            이것도 새로운 배열이 탄생
   의미 : 배열 값들 중에 의미 없는 값들을 버릴 때 사용

👉 reduce : 배열 원소들을 반복하면서 값들을 조합(함수로)해서 특정 값을 만든다
           배열이 아니라 특정 값으로 반환되고, 배열로 만들수도 있다.
   의미 : 보통 배열값들을 이용해서 하나의 결과를 낼 때 사용한다.
         (모두 더한다던지 아니면 평균을 낸다던지)

👉 some : 배열 원소들을 반복하면서 특정 원소가 조건(함수)에서 true가 나온다면
         즉시 반복을 종료하고 true를 반환 아니면 false를 반환한다.
   의미 : 보통 배열에서 특정 값이 있는지 확인하려고 사용한다.
        아니면 반복을 특정 상황에서 멈추는 for문을 만드려고 할 때 사용한다.
        굉장히 유용한데 그 이유는 다른 반복들과는 다르게 break가 가능하기 때문이다.

👉 every : 배열 원소들을 반복하면서 모든 원소가 조건(함수)에서 true가 나온다면
          true를 반환하고 하나라도 false가 나오면 반복을 멈추고 false를 반환한다.
   의미 : 배열이 모든 조건을 만족하는지 확인하려고 사용한다.
         every역시 some처럼 break가 가능은 한데 보통 그런 목적이면 some으로도 가능하다.
         

2. object에 대한 getter/setter 지원

👉 getter 메서드는 obj.propName을 사용해 프로퍼티를 읽으려고 할 때 실행
👉 setter 메서드는 obj.propName = value으로 프로퍼티에 값을 할당하려 할 때 실행
👉 접근자 프로퍼티는 'getter(획득자)'와 ‘setter(설정자)’ 메서드로 표현된다
   객체 리터럴 안에서 getter와 setter 메서드는 get과 set으로 나타낼 수 있다

3. 자바스크립트 strict 모드 지원(더욱 세심하고, 엄격하게 문법 검사)
4. JSON 지원(과거에는 XML을 사용하다가, json이 뜨면서 지원)
5. bind() 메소드가 생김

👉 bind 함수와 객체를 묶는(연결) 함수
        호출될 때 this 키워드가 제공된 값으로 설정되는 새로운 함수를 반환

ES5 대표메소드 출처와 예제 https://kamang-it.tistory.com/entry/JavaScript-13js%EC%97%90%EC%84%9C-%EB%B0%B0%EC%97%B4-%EB%A9%94%EC%86%8C%EB%93%9C%EB%93%A4map-forEach-filter-reduce-some-every%EC%9D%B4%EC%9A%A9%ED%95%B4%EC%84%9C-%ED%95%A8%EC%88%98%ED%98%95-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D%ED%95%98%EA%B8%B0

getter/setter 예제와 출처 https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-getter-setter-%EB%9E%80

• ES6문법

1. let, const 키워드 추가

👉 let 중복 선언 X, 재할당 O
👉 const 중복 선언 X, 재할당 X

2. arrow(화살표함수) 지원

- 일반함수와 화살표험수의 차이
👉 this
- 일반함수
  자바스크립트에서 모든 함수는 실행될 때마다 함수 내부에 this라는 객체가 추가
  아래는 일반 함수에서 this가 바인딩 되는 상황
  함수 실행시에는 전역(window) 객체를 가리킨다
  메소드 실행시에는 메소드를 소유하고 있는 객체를 가리킨다
  생성자 실행시에는 새롭게 만들어진 객체를 가리킨다
  일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고,
  함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다

- 화살표 함수
  화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.
  화살표 함수의 this 언제나 상위 스코프의 this를 가리킨다.(Lexical this)
  또한 call, apply, bind 메소드를 사용하여 this를 변경할 수 없다.


👉 생성자 함수로 사용 가능 여부
- 일반 함수는 생성자 함수로 사용할 수 있다.
- 화살표 함수는 생성자 함수로 사용할 수 없다. prototype 프로퍼티를 가지고 있지 않기 때문이다.


👉 arguments 사용 가능 여부
- 일반 함수 에서는 함수가 실행 될때 암묵적으로 arguments 변수가 전달되어 사용할 수 있다.
- 화살표 함수에서는 arguments 변수가 전달되지 않는다.

3. iterator / generator 추가

👉 Iterator
   이터레이터는 반복 처리가 가능한 객체를 뜻
   이터레이터는 내부적으로 next() 메서드를 가지며 next() 메서드는
   IteratorResult객체 value와 done이라는 프로퍼티를 가진 객체를 반환해야 한다
   
   
👉 Generator
   제너레이터는 이터레이터를 좀 더 유연하게 사용할 수 있는 기능
   이 제너레이터는 코드를 일시 정지 재시작을 할 수 있다.
   코드가 실행된 상태가 유지가 되기 때문에 정지된 상태부터 다시 시작할 수 있다
   제너레이터의 선언은 함수 선언문에 *을 붙여 선언한다

4. module import / export 추가

👉 import : 외부 스크립트 또는 외부 모듈의 출력된 함수, 객체를 가져오는데 사용
- import 사용방법
  - 모듈 전체 가져오기
    import * as myModule from "my-module.js";// myModule.sayHello()

  - 하나의 멤버 가져오기
    import {myMember} from "my-module.js";

  - 여러개의 멤버 가져오기
    import {foo, bar} from"my-module.js";

  - 다른 이름으로 멤버 가져오기
   멤버를 가져올 때 다른 이름으로 멤버를 지정할 수 있다.
   export 된 멤버 이름이 길거나, 복잡할 때, 임의의 이름으로 멤버를 지정할 수 있다.
   import {reallyReallyLongModuleMemberName as shortName} from "my-module.js";
   import {reallyReallyLongModuleMemberName as shortName, anotherLongModuleName as short} from "my-module.js";

  - 바인딩 없이 모듈만 실행하기
    단순히 특정 모듈을 불러와 실행만 할 목적이라면, import만 사용하는 것이 좋다.
    import "my-module.js";

  - default export 값 가져오기
    default export를 통해 export 된 값들을 가져올 수 있다.
    이때 { } 는 넣지 않는다.
    import myModule from "my-module.js";
    위에서 설명한 기본 구문과 함께 사용할 수도 있다.
    이 때, 기본 값(default export 된 값)을 가져오는 부분이 먼저 선언되야 합니다.
     import myDefault, * as myModule from "my-module.js";// 또는import myDefault, {foo, bar} from "my-module.js";



👉 export : 파일이나 모듈안의 함수나, 객체를 내보내고,출력하는데 사용
- export 사용방법
  - Named exports
    Named exports는 여러값을 export 하는데 유용
    export 된 이름을 사용하여 import 하여 사용할 수 있다.
  - Default exports
    모듈 당 딱 한 개의 default export만 있어야 한다. 
    default export로 객체, 함수 클래스 등이 될 수 있다.
    가장 간단하게 export 할 수 있으며, 딱 한개만 default export를 할 수 있기 때문에,
    "메인" 이라고 할 수 있는 것을 default export 하는 것이 좋다.

5. Promise 도입

👉 프로미스는 자바스크립트 비동기 처리에 사용되는 객체
   여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고
   다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미

👉 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다.
   하지만 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중
   발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한번에 처리하는 데도 한계가 있다.

   ES6에서는 비동기 처리를 위한 또 다른 패턴으로 프로미스(Promise)를 도입했다.
   프로미스는 전통적인 콜백 패턴이 가진 단점을 보완하며
   비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다.

6. Default, Rest 파라미터

👉 매개변수 기본값 (Default Parameter value)
   함수를 호출할 때 매개변수의 개수만큼 인수를 전달하는 것이 일반적이지만
   그렇지 않은 경우에도 에러가 발생하지는 않는다.
   함수는 매개변수의 개수와 인수의 개수를 체크하지 않는다.
   인수가 부족한 경우, 매개변수의 값은 undefined이다.
  
👉 Rest 파라미터(Rest Parameter, 나머지 매개변수)
   매개변수 이름 앞에 세개의 점 ...을 붙여서 정의한 매개변수를 의미한다.
   Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다.

7. 분해 할당, Spread 연산자

👉 분해할당 구조 : 분배열 혹은 객체에서 각각 값(value)이나 프로퍼티(property) 를 분해하여
                  손쉽게 별도의 수 있도록 해 준다.
👉 Spread : 배열 또는 객체에 대해 iterable Object(열거 가능한 오브젝트)을
            "개별" 요소로 분리한다.

8. 템플릿 리터럴(Template literals)

👉 Template literals : 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴
                       여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다. 

9. 호이스팅이 사라진 것 같은 효과
10. 함수 단위 스코프에서 블록 단위 스코프로 변경

화살표함수 예제 및 출처 https://poiemaweb.com/es6-arrow-function

일반함수와 화살표함수차이 https://hhyemi.github.io/2021/06/09/arrow.html

프로미스 예제와 출처 https://poiemaweb.com/es6-promise

Default, Rest 파라미터 예제 https://poiemaweb.com/es6-extended-parameter-handling