[LearningJS] 함수

함수

1. 호출 & 참조

   • 호출 : 함수 식별자 뒤에 괄호() 를 쓰면 함수 바디를 실행
   • 참조 : 함수 식별자 뒤에 괄호를 쓰지 않으면 함수를 참조만 하고 실행하지 않는다.
   • 함수는 변수, 객체 프로퍼티, 배열 요소에 할당할 수 있다.

2. 매개변수(argument or parameter) : 함수를 호출하면서 정보를 전달할 때 사용

   • formal argument
     • function avg(a, b) {} 에서 a, b를 정해진 매개변수라고 한다.
   • actual argument
     • avg(5, 10) 에서 5, 10을 실제 매개변수라고 한다.
     • 실제 매개변수는 함수 바디 안에서만 존재하고 함수 밖에서 사라진다.
   • 함수 안에서 매개변수에 값을 할당해도 함수 바깥에 있는 어떤 변수에도 아무런 영향이 없다. 하지만 함수 안에서 객체 자체를 변경하면, 그 객체는 함수 바깥에서도 바뀐점이 반영된다.
   • 어떤 함수를 호출하든 정해진 매개변수 숫자와 관계없이 매개변수를 전달해도 된다.
     • 정해진 매개변수에 값을 전달하지 않으면 암시적으로 undefined가 할당된다.
   • 함수에서 남는 매개변수를 사용하려면 확산 연산자(…)를 마지막 매개변수 자리에 쓴다.

3. 메서드(method) : 객체의 프로퍼티인 함수. 객체 인스턴스에서 호출할 의도로 만든 함수.

4. this 키워드 : 메서드를 호출하면 this는 호출한 메서드를 소유하는 객체가 된다.

   • this가 포함된 객체를 다른 변수에 할당하면 함수가 어디에 속하는지 알수 없기 때문에 this는 undefined에 묶인다.
   • 중첩된 함수에서 this를 활용하면 의도한 대로 this가 연결되지 않는다.
     • 이를 해결하기 위해 첫 번째 함수에서 변수를 만들어 this를 할당한다.
       • const self = this;
     • 중첩된 함수에서는 this가 할당된 변수를 this처럼 활용한다.
       • this.name -> self.name

5. 익명함수(anonymous function) : 함수에 식별자가 주어지지 않는다.

   • 선언한 함수를 변수에 할당해서 표현식 형태로 사용한다.
     • const f = function() {};
   • 함수 안에서 자신을 호출할 때를 ‘재귀(recursion)’ 라고 한다.

6. 화살표 표기법(arrow notation)

   • 화살표 함수는 항상 익명함수로 만들어지며, 다른 곳에 전달할 때 유용하다.
   • 변수 선언 = argument => return문
     • const f1 = () => 'hello';
     • const f2 = name => 'Hello, ${name}' (‘’ 는 backtic)
   • this가 정적으로 묶이기 때문에 화살표 함수 내부에서 this를 사용할 수 있다.(중첩 가능)

7. call, apply, bind

   • call : 모든 함수에 대해 메서드로 사용 가능.

     • 함수를 호출하면서 call을 사용하고, this로 사용할 객체를 넘기면 해당 함수가 주어진 객체의 메서드인 것처럼 사용할 수 있다.

       const bruce = {name: "Bruce"};
              
       // 이 함수는 어떤 객체에도 연결되지 않았지만 this를 사용합니다.
       function greet() {
           return `Hello, I'm ${this.name}!`;
       }
              
       greet();	// "Hello, I'm undefined!" - this는 어디에도 묶이지 않았습니다.
       greet.call(bruce);	// "Hello, I'm Bruce!" - this는 bruce 입니다.
       

     • call의 첫번째 매개변수는 this로 사용할 값이고, 매개변수가 더 있으면 호출하는 함수로 전달된다.

       function update(birthYear, occupation) {
           this.birthYear = birthYear;
           this.occupation = occupation;
       }
              
       update.call(bruce, 1949, 'singer');
       // bruce는 이제 {name: "Bruce", birthYear: 1949, occupation: "singer"} 입니다.
       

   • apply : call과 같은 기능을 하지만 call은 매개변수를 직접 받고, apply는 this를 제외한 매개변수를 배열[]로 받는다.

     • update.apply(bruce, [1949, 'actor']); -> bruce는 this, 배열은 argument
     • apply의 매개변수로 확산 연산자(…) 사용 가능

   • bind : 함수의 this 값을 영구히 바꿀 수 있다.

     • this 값을 고정시키기 때문에 함수의 this가 어디에 묶이는지 정확히 파악해야 한다.