본문 바로가기
Work/개발 노트

[양재동코드랩] 자바스크립트 강의 1일차 - Arrow Function

by ★용호★ 2018. 9. 1.

Arrow Function

  • 코드 형태 : (param) => {함수코드}
    • 자바 람다와 유사
    • 람다와 조금 다른 표현들
      • (param1, param2, ...rest) => {코드}
        • rest는 변수명. 관례적으로 rest 사용
        • rest변수에 배열형태로 값이 추가됨
      • (param1, parma2=123) => {코드}
        • Default 파라미터
  • Memo : 자바스크립트에서의 함수는 무조건 return이 있음. 생략하면 undefined 반환
    • () => {} 는 undefined 반환
  • 함수와 유사하지만 new로 인스턴스 생성 불가
    • 함수는 new로 인스턴스 생성 가능함
      • new 연산자를 사용하여 인스턴스를 생성하면 대상의 prototype 하위의 construct를 찾아감
      • construct에는 해당 오브젝트의 생성 정보를 포함하고 있어서 인스턴스 생성이 가능함
      • 인스턴스 생성시 prototype 하위의 프로퍼티들로 인스턴스를 생성
      • 오브젝트에서 prototype이 아닌 다른 프로퍼티에 선언된 변수나 함수들은 인스턴스에 포함되지 않음
    • Array function에는 prototype 변수가 없음
      • 그래서 인스턴스 생성이 불가능
  • Arrow 함수에서는 arguments 사용 불가
    • 일반 함수의 경우에는 함수가 호출되면 arguments 오브젝트가 생성됨
      • 함수에서 선언된 파라미터 수보다 전달받은 인자의 수가 더 많은 경우 arguments 오브젝트를 통해 인자 값 사용 가능
    • 함수의 실행이 끝나면 arguments 오브젝트를 제거
    • Arrow 함수에서는 사용이 안되기 때문에 rest 파라미터 사용 권장

Arrow와 This

  • 함수 내에서의 this는 함수를 호출한 오브젝트를 의미

  • 관례적으로 인스턴스로 생성할 오브젝트는 첫글자를 대문자로 선언

    • 첫글자가 대문자인 오브젝트는 prototype 정의를 포함함
  • constructor에 arrow function을 사용할 수 있지만 this의 스코프 범위가 혼동될 수 있으므로 권장하지 않음

  • 예제

    const Sports = function() {
        this.count =20;
    };
    Sports.prototype = {
    	plus: function() {
          this.count += 1;  
    	},
        get: function() {
        	setTimeout(function() {		// setTimeout은 window의 메소드
                console.log(this === window);	// 결과는 true. setTimeout 함수는 window.setTimeout으로 호출한 것이기 때문에 함수 내에서 사용하는 this의 주체는 windows가 됨
                console.log(this.plus);		// this가 window이기 때문에 undefined임            
        	}, 1000);
        },
        arrow: function() {
            setTimeout(() => {
                this.plus();	// arrow 함수 내의 this는 인스턴스가 됨. 즉, 여기서 this는 Sports 인스턴스
                console.log(this.count);	// 정상 출력됨
            }, 1000);
        },
        add: () => {
            this.count += 1;	// 여기서의 this는 window를 가리킴. 그래서 값이 NaN.
            					// prototype 내의 this는 동일한 인스턴스를 가리켜야하는데 prototype 내 arrow 함수의 this는 window를 가리키기 때문에 이런식으로 사용하면 안됨
        }
    };
    
    const sportsObj = new Sports();
    sportsObj.arrow();

Lambda Function

  • 자바스크립트에서의 람다는 익명 함수를 의미함


댓글