함수의 특징 (3)

# 함수 특징 (3)

출처: https://medium.com/ibare-story/e252506f8525

10. 함수호출하는 3가지 방법 - 이름, call, apply

// 예제 1

function foo(x) { };

foo(10);

foo.call(this, 10);

foo.call(this, [10]);

- 함수가 호출될 때 함수에게 전달되는 모든 인수를 담은 arguments 유사 배열과 함께 this도 암시적으로 전달

=> this는 함수를 호출한 컨텍스트를 가르키며 전역 공간에서 호출될 땐 전역 객체를 가르킴

=> ex) 브라우저 환경이라면 window 객체

=> 객체의 메소드로서 함수가 호출되면 this는 객체를 가르킴

// 예제 2

var person = {

age: 10,

addAge: function(n) {

this.age += n;

}

};

person.addAge(1);

console.log(person.age); // 11

- addAge의 this는 암묵적으로 함수 호출시 전달된 객체

=> 객체의 메소드인 경우 객체 그 자체

- this는 person 이라고 설명해도 문제는 없지만 자바스크립트는 this가 지시하는 대상을 변경할 수 있는 유연성을 제공

 

// 예제 3

var person = {

age: 10,

addAge: function(n) {

this.age += n;

}

};

var monkey = {

age: 1

};

person.addAge.call(monkey, 1);

console.log(person.age); // 10

console.log(person.age); // 2

- 객체 내부에서 사용하는 this가 호출시점의 실행 컨텍스트를 가르키며 이는 함수가 어떻게 호출되는가에 따라 this가 달라질 수 있다는 것

 

11. apply

- call과 똑같이 동작

- 두번째 인수, 즉 호출할 함수에게 전달할 인수 목록을 배열로 받음

- 호출할 함수가 가변 인수를 받는 함수라면 배열을 전달하는 apply를 사용하면 손쉽게 처리 가능

12. bind

ECMAScript 5 스펙에 추가된 bind 메소드는 함수와 객체를 연결시킴

 

 

13. 1급 함수

- 함수도 변수에 할당 가능

=> 함수의 인수로 전달 가능,

=> 함수의 반한값이 될 수 있음

- 변수에 할당된 함수의 호출은 일반적인 함수의 호출과 같은 방식으로 작동

// 예제

// 변수에 할당한 함수

var foo = function foo() { ... } ;

// 변수에 할당된 foo 함수 호출

foo();

 

 

14. 이름 없는 익명 함수

- 함수의 이름이 필요 없다면 기술하지 않아도 됨

// 예제 1

// 익명 함수 생성 후 foo 변수에 할당

var foo = fucntion(x) {

return x * x;

};

foo(10); // 100

 

- 이름없는 익명 함수를 참조하고 있는 foo를 이용하여 마치 foo 라는 함수를 호출하는 것과 같은 방식으로 호출할 수 있음

- 함수는 length 속성 이외에 name 속성도 제공

// 예제 2

var foo1 = function orgFoo() { };

var foo2 = function() { };

console.log(foo1.name); // orgFoo

console.log(foo2.name); // 빈문자열

 - 위 코드를 보면 익명 함수는 이름이 없다는 걸 확인 가능

 

// 예제 3

var foo = {

age: 10,

addAge: funcion() {

this.age++;

}

};

- 위 코드는 객체 foo를 생성하며 addAge 메소드를 작성하며 익명 함수를 사용함

- 이 경우 addAge 속성이 존재함으로 함수의 이름이 불필요하기 때문에 이름이 없는 익명 함수를 사용

 

15. 즉시 실행 함수

- 익명 함수를 생성과 동시에 즉시 실행 가능

// 예제

(function () {

...

}) ();

-단 한번만 수행되는 초기화 작업 등, 전역 공간의 오염 없이 수행하기 위한 방법으로 많이 사용

 

 

16. 지역 유효 범위 생성자로서의 함수

- var 구문 없이 생성된 변수는 전역 변수로 생성 됨

=> 지역 스코프에 존재하지 않고 함수의 수행이 종료된 후에도 전역 스코프에 잔류

=> 메로리 낭비됨

// 예제

functin foo(x) {

sum = x * x;

}

foo(10);

console.log(sum); // 100

 

// 예제 2

function foo () {

var x = 10;

function getx() {

return x; // 상위 지역 스코프 변수 x를 참조. 10을 반환한다

}

return getx();

}

foo(); // 10