[인사이드 자바스크립트] 함수와 프로토타입 체이닝

자바스크립트에서 가장 중요한 개념은 함수다.

자바스크립트에서 이러한 함수를 얼마나 제대로 이해하고 활용하는가 따라서 고급 자바스크립트 개발자로 거듭날수있다.

함수표현법에서 ECMAScript 6 버젼인 arrow function 의 사용법이있다.

 

우선  ECMAScript가 뭘까? Ecma 기관이만든 script 언어이다. 

자바스크립트를 개발한 Netscape 가 더 향상된 표준화를 위해 기술 규격을 ECMA에 제출 했고 그에 따라 새롭게 제정한 표준이
ECMA-262이다. 즉  ES6 표준을 따른다는 말은 ECMAScript 2015가 사용중인 ECMA 규격을 따라서 문법을 사용한다라고 알면된다.

년도를 붙여서 사용하므로 ECMAScript 2015(=ES6)는 2015년 에배포된 버젼,

최근에나온 버전은 ES2020(=ES11) 버전까지있다. ES11 버전이나왔지만 ES6는 기존의 문제의 해결, 가독성 및 유지보수성이 보강된 문법이 대거 추가되서 아직 많이사용중이다.

 

여기까지 알고 ES6의 화살표함수에대해 알아보자

 

 

1. 화살표 함수 (arrow function)

 

블로그 copy 포스팅

 

- 함수 표현방법 1

// 기존의 함수표현식방식
const func1 = function()  {
	const num = 10;`
};

// 익명함수 = 화살표함수 = 함수를 변수에 할당
// function 키워드 생략
const func2 = () => { 
	const num = 10; 
}; // function 키워드 생략 가능

// 함수의 매개변수에 괄호 생략가능
const func2 = num => {
	const sum = num;
}

// 표현식이 하나라면 중괄호와 return 문 생략가능
const func3 = num => `입력된 숫자는 ${num}입니다.`;

 

 

 

mdn 사이트 포스팅

 

- arrow funtcion 특징

1. this나 super에 대한 바인딩이 없고, methods로 사용될수 없습니다.

2. new.target키워드가 없다

3. 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없다.

4. 생성자로 사용할 수 없다.

5. yield를 활살표 함수 내부에서 사용할 수 없다.

 

 

- 함수 표현방법 2

// 객체 리터럴 표현을 반환하기위해서는 함수 본문을 괄호 속에 넣음
params => ({ yeji : 28 })

// 나머지 매개변수 및 기본 매개변수를 지원함
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, paramN = defaultValueN) => { statements }

// 매개변수 목록 내 Destructuring assignment 지원
var f = ([a, b] = [1, 2],  {x, c} = {x, a + b}) => a + b + c;
f();	// 6

 

 

 

arrow function 을 알아봤다면 this의 개념에대서 알아보자

 

 

 

2. 함수 호출과 this 

블로그 copy 포스팅

 

자바에서는 this 키워드를 익숙하게 써왔다

하지만 자바스크립트에서의 this는 자바처럼 단순하지 않다.

 

1. 함수실행

2. 메소드(함수 내부) 실행

3. 생성자 실행

4. 간접 실행

 

 

 

- 함수실행에서 this

함수 실행에서 this는 전역객체를 가르킨다.

 

하지만, es6에서 arrow function안에서 존재하는 this는 정적(lexically)로 결합시키기 때문에 전역객체인(window)가아닌 

맥락상 위의 코드부터 보고 결합을 시키게된다.

 

const o = {
    name: "yeji",
    speak: function() {
        getName = () => {
            return `${this.name}`;
        }
     return `My name is ${getName};
    }
};

o.speack() // My name is yeji

 

- 메소드 실행

바로 arrow function을 객체안에쓴다면 this를 불러올수없다.

const obj = {
    a: "hi",
    b: () => console.log(this.a);	// undifined
    c: function () {
        console.log(this.a);	// "hi"
    }
}

 

보통 많이사용하는 법 (

const obj = {
    a:"hi",
    b:function() {
    	 console.log(this.a);	// "hi"
    },
    c:function() {
        console.log(this.a);	// "hi"
    }
}

obj.b();
obj.c();

만약에  arrow function을 사용하고싶다면?

const obj = {
	a: "hi",
    b: function () {
    	return(() => console.log(this.a));
    },
    c: function () {
    	console.log(this.a)
    }
}

obj.b();
obj.c();

 

 

이렇게 IIFE 형식으로 사용하면된다. (IIFE 형식은 다음에 포스팅)

 

 

 

 

 

- 생성자 실행

.....포스팅중