IM 1W _ Arrow Function & "this" keyword & arguments

GOAL

1. 화살표 함수(Arrow Function)
2. this
3. 구조분해할당
4. arguments 프로퍼티

Linting의 의미와 필요성
eslint 사용법

1. Arrow Function

• 메소드 함수가 아닌 곳에 적합하며, 생성자로서 사용 불가
• this, arguments 사용 불가

1. 비교예제

      1) const func1 = function() { const num = 10; };
         const func1 = () => { const num = 10; };      // function 키워드 생략
      or const func1 = () => const num = 10;           // 본문이 하나의 실행무일 경우, 중괄호 생략하고 한 줄에 표기 가능, 이 경우, 해당 실행문의 결과가 "함수의 반환값"으로 지정

      2) const func2 = function(num) { for(let i = 0; i < 10; i++) { num++; } return num; };
         const func2 = num => { for(let i = 0; i < 10; i++) { num++; } return num; };         // 매개변수가 하나일 경우, 소괄호 생략

      3) const func3 = function (num) { return `입력된 숫자는 ${num}입니다.`; };
         const func3 = num => `입력된 숫자는 ${num}입니다.`;                                    // 중괄호, return 생략

2. 매개변수 지정 방법

    () => { ... }     // 매개변수가 없을 경우
     x => { ... }     // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
    (x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.

3. 함수 몸체 지정 방법

• 파라미터가 단 한개면, 소괄호 생략 가능
• return 생략시에는 중괄호를 사용하지 않음

    x => { return x * x }  // single line block
    x => x * x             // 바디가 한줄이면 중괄호 생략, 암묵적으로 return 됨 / 위 표현과 동일하다.
    () => {                // multi line block.
      const x = 10;
      return x * x;
    };

4. 함수 호출

• 화살표 함수는 반드시 함수 표현식(Function Expression)으로 생성 & 호출 (익명함수로만 사용할 수 있음)

          // ES5 //
          var pow = function (x) { return x * x; };
          console.log(pow(10)); // 100

          // ES6 //
          var pow = x => x * x;
          console.log(pow(10)); // 100

5. 클로저 표현

• 화살표 함수는 클로저를 표현할 때 매우 효과적

// 함수 표현식 예
	let adder = function(x) {
      	console.log(`x:${x}`)	// x:5
	  return function(y) {
        console.log(`y:${y}`)	// y:7
	    return x + y
	  }
	}
	adder(5)(7) 		// 12

// 화살표 함수 예
	let adder = (x) => {
	  return (y) => {
	    return x + y
	  }
	}
------------------------------------------
	let adder = x => {
	  return y => x + y
	}
------------------------------------------
	let adder = x => y => x + y
------------------------------------------
	=> 다음과 같이 표현할 수 있다! 

2. this

this는 여기를 참고하기!

3. 구조분해할당

4. arguments 프로퍼티

• 함수 호출 시 전달된 인수(argument)들의 정보를 담고 있는 순회가능한(iterable) 유사 배열 객체(array-like object) | 함수 내부에서 지역변수처럼 사용됨. 즉, 함수 외부에서는 사용 불가
• 매개변수(parameter)는 인수(argument)로 초기화됨
  • 매개변수의 갯수보다 인수를 적게 전달했을 때, 인수가 전달되지 않은 매개변수는 undefined로 초기화
  • 매개변수의 갯수보다 인수를 더 많이 전달한 경우, 초과된 인수는 무시됨
• JS는 함수를 호출할 때 인수들과 함께 암묵적으로 arguments객체가 함수 내부로 전달됨
• 그러나, arguments객체는 "유사배열객체"
  • 유사배열객체
    - length프로퍼티를 가진 객체를 뜻함 |
    - 배열 메소드를 사용하면 에러

        // ex.
          function sum() {
            if (!arguments.length) return 0;
            var array = Array.prototype.slice.call(arguments);    // arguments 객체를 배열로 변환
            return array.reduce(function (pre, cur) {
              return pre + cur;
            });
          }
          ----------------------------------------------------
       // ES6
          function sum(...args) {
            if (!args.length) return 0;
            return args.reduce((pre, cur) => pre + cur);
          }

          console.log(sum(1, 2, 3, 4, 5)); // 15