[Javascript] 3. 함수

✔︎ 정의하기

 

🚀  함수 선언문 : function (x) { return x + 1; }

🚀  함수 리터럴 : var add = function (x) { return x + 1 };

🚀  함수 생성자 : var add = new Function( 'x', ' return x + 1 ' )

🚀  화살표 함수 : var add = (x) => x + 1 ( ES6 추가 )

 

 

✔︎ 호이스팅

이전 포스트에서 다룬 것과 같이 함수 선언문의 경우에도 호이스팅이 진행됩니다.

함수 선언문의 경우 라이프사이클의 선언 => 초기화 => 할당 모두가 한번에 이루어져 첫머리에 선언된 것 처럼 사용할 수 있습니다.

 

 

✔︎ 유효범위 (스코프)

유효범위란 변수에 접근 할 수 있는 범위를 말합니다.

유효범위는 어휘적 범위(Lexical Scope)와 동적 범위(Dynamic Scope)가 있으며 자바스크립트는 어휘적 범위를 채택합니다.

 

[ 블록 유효범위 ]

ES6에 새롭게 추가된 변수 선언자인 let과 const가 블록 유효범위를 가집니다. 즉 중괄호{} 안에서만 변수에 접근 할 수 있습니다.

 

[ 함수 유효범위 ]

var의 경우에는 함수 유효범위를 가지며, 같은 함수 안에서라면 블록 스코프가 다르더라도 접근이 가능합니다.

 

	var	let	const
재선언	⭕️	❌	❌
재할당	⭕️	⭕️	❌
스코프	함수	블록	블록
전역객체 프로퍼티	Window	-	-

 

✔︎ 객체의 메소드

객체의 프로퍼티가 함수 객체의 참조를 값으로 담고있다면 우린 객체의 메소드라고 부릅니다.

메소드 정의시 프로퍼티 값에 함수 리터럴를 대입하면 됩니다.

 

var box = {

     x : 20,

     y : 27,

     z : 10,

     volume = function () { return this.x * this.y * this.z };

}

 

이때, 메소드의 this는 해당 메소드를 가지고 있는 객체를 가르킵니다.

this에 대해선 실행컨텍스트를 다룰때 깊이있게 알아보겠습니다.

 

 

✔︎ 중첩 함수 (Nested)

특정 함수 내부에 선언된 함수를 중첩 함수라고 합니다.

일반적으로 많이 쓰는 C++, JAVA에선 이러한 방식으로 선언이 불가능하나, 자바스크립트는 가능합니다.

이러한 중첩함수에서의 중요한 특징은 내부 함수에서 외부 함수의 인자 접근이 가능하다는 점입니다. 반대의 경우는 불가합니다.

이러한 특징이 앞으로 설명할 클로저를 이해하시는데 도움이 될 것입니다.

function func1(x) {
   let add = addFunc();
   return add;

	function addFunc() {
    	return x + 1;
    }
}

 

 

✔︎ 함수 호출하기

🚀  함수 호출 : 함수의 참조가 저장된 변수 뒤에 () 붙임

       let f = func(5);

🚀  메소드 호출 : 개체 프로퍼티에 저장된 값이 함수인 경우에도 () 를 붙임

       f.method = function() {};

       f.method();

🚀  생성자 호출 : 생성자 함수 + new 연산자

       let f = new Object();

🚀 Call, Apply 메소드를 활용하면 간접적으로 호출 가능합니다.

 

 

✔︎ 일급 객체

이전 포스트에서 다룬 것 처럼 함수는 일급객체로입니다.

 

🚀 함수는 변수나 프로퍼티의 배열 요소에 대입 가능

🚀 함수는 함수의 인수로 사용 가능

🚀 함수는 함수의 반환 값으로도 사용 가능

🚀 함수는 프로퍼티와 메서드를 가질 수 있음

🚀 함수는 이름 없이 리터럴로 표현할 수 있음 ( 익명함수 )

🚀 함수는 동적으로 생성 가능

 

함수 선언문으로 함수를 선언하면 내부적으로는 그 함수이름을 변수의 이름으로 한 변수와 함수 객체가 만들어지고,

그 변수에 함수 객체의 Reference가 저장됩니다.

 

✔︎ apply / call 메소드

this 값과 함수의 인수를 사용하여 함수를 실행하는 메소드 입니다.

위 함수를 사용하면 사용자가 this 값을 변경할 수 있습니다.

두 메소드의 동작은 같으며, 차이점은 apply는 인수를 배열로 call은 쉼표로 구분하여 입력받습니다.

 

✔︎ bind 메소드

this 값 사용하여 새로운 함수를 만들어서 반환하는 메소드 입니다.

apply / call 메소드와의 차이점은 즉시 실행하지 않는다는 점입니다.

 

 

✔︎ 화살표 함수 ( ES6 🚀 )

많이 보셧을 화살표 함수입니다. 사용방법은 간단하니 문법적 특징을 알아보겠습니다.

 

🚀 this 값이 함수를 정의할 때 결정

우선 다음 포스트를 먼저 보고 오시면 쉽게 이해가 가실겁니다.

다음 포스트에선 this는 함수가 호출되었을 때 함수를 호출한 객체의 참조가 저장되는 곳이라고 하였습니다.

하지만 화살표 함수를 사용한다면 함수 호출이 아닌 함수가 정의될때 결정됩니다.

그래서 화살표 함수 바깥의 this 값이 화살표 함수의 this 값이 됩니다.

var obj = {
	say : function() {
    	console.log(this); // 출력 : {say: ƒ}
        var f = function() { console.log(this); };  // 출력 : Window
        f();
        var g = () => console.log(this);  // 출력 : {say: ƒ}
        g();
    }
};
obj.say();

 

🚀 arguments 변수가 없음

🚀 생성자로 사용 불가

🚀 yield 키워드 사용 불가 ( 제네릭 불가 )