Chapter 05. 함수

• 함수 호출 : 함수를 사용하는 것
• 매개변수 : 함수를 호출할 때 괄호 내부에 넣는 여러 가지 자료
• 리턴값 : 함수를 호출해서 최종적으로 나오는 결과

 

• 익명함수 : 출력했을 때 별다른 이름이 붙어있지 않은 함수. 순차적인 코드 실행에서 해당 줄을 읽을 때 생성됨. (안전하게 사용할 수 있는 익명 함수를 더 선호하는 편)
  function () {} 형태
• 선언적 함수 : 출력했을 때 이름이 붙어있는 함수. 순차적인 코드 실행이 일어나기 전에 생성되므로, 선언적 함수를 생성하기 전에 함수를 호출해도 문제 없이 실행 됨
  function 함수() {} 형태

 

함수 정의하기

• 함수 선언문
  function add(x, y) { return x + y; }
• 함수 표현식
  let add = function(x, y) { return x + y; }

 

화살표 함수

let add = (x, y) => { return x + y; }
let add = (x, y) => x + y; // return문이 한 줄로 작성될 경우, 중괄호와 return 키워드를 생략할 수 있음
let square = x => x * x; // 매개변수가 하나일 경우에는 괄호를 생략할 수 있음

 

일급 객체로서의 함수

다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킴

1. 변수에 함수를 할당

 

2. 함수를 인자로 다른 함수에 전달

함수가 값으로 취급되기 때문에, 다른 함수의 인자로 전달할 수 있습니다. 이것은 콜백(callback, 어떠한 함수의 매개변수로 쓰이는 함수)이나 고차 함수(higher-order function, 함수를 인자로 받거나 함수를 출력으로 반환하는 함수)를 작성하는 데 사용

function callFunction(func) {

    func();

  }

 

  const sayHello = function() {

    console.log('Hello!');

  };

 

  callFunction(sayHello); // "Hello!" 출력

 

3. 함수를 반환
함수는 값으로 취급되기 때문에, 다른 함수에서 반환할 수 있습니다. 이것은 함수 팩토리(factory)나 클로저(closure)를 작성하는 데 사용

function createAdder(num) {

    return function(x) {

      return x + num;

    }

  }

 

  const addFive = createAdder(5);

  console.log(addFive(10)); // 15 출력

 

4. 객체의 프로퍼티로 함수를 할당

객체의 메소드로 함수를 호출할 수 있음

const person = {

    name: 'John',

    sayHello: function() {

      console.log(`Hello, my name is ${this.name}`);

    }

  };

 

  person.sayHello(); // "Hello, my name is John" 출력

 

5. 배열의 요소로 함수를 할당

함수를 배열에서 사용할 수 있게 됨

const person = {

    name: 'John',

    sayHello: function() {

      console.log(`Hello, my name is ${this.name}`);

    }

  };

 

  person.sayHello(); // "Hello, my name is John" 출력```jsx

  const myArray = [

    function(a, b) {

      return a + b;

    },

    function(a, b) {

      return a - b;

    }

  ];

 

  console.log(myArray[0](5, 10)); // 15 출력

  console.log(myArray[1](10, 5)); // 5 출력

 

 

 

 

 

---

불 자료형을 리턴하는 함수의 네이밍

true 또는 false를 리턴하는 함수는 isOO이라는 이름으로 만드는 편

 

숫자 계산해서 출력하는 기본 틀

function 함수(매개변수) {

    let output = 초기값

    처리한다

   return output

}

 

배열 내부에서 최소값을 구하는 함수

function min(array) {

    let output = array[0]

    for (const item of array) {

        // 현재 output보다 더 작은 item이 있다면

        if (output > item) {

            // output의 값을 item으로 변경

            output = item

        }

    }

   return output

}

 

• 나머지 매개변수 : 매개변수들이 배열로 들어옴
  function 함수 이름(...나머지 매개변수) { }
• 전개 연산자 : 배열을 전개해서 함수의 매개변수로 전달. 요소가 매개변수에 하나하나 들어오게 됨
  함수 이름(...배열)
• 기본 매개변수 : 기본 매개변수는 오른쪽 매개변수에 사용함. 매개변수는 왼쪽부터 입력하므로 2번째에 값을 전달하기 위해서는 1번째에 값을 채워야 하기 때문 (뭔말인지..???????????????????????????????????????????)
  함수 이름(매개변수, 매개변수=기본값, 매개변수=기본값)

 

구 버전 자바스크립트의 매개변수

• 가변 매개변수 함수 arguments
  arguments는 내부에 callee:f와 Symbor(Symbol.iterator):f 라는 특이한 값이 있어서 배열과 비슷한 자료형이지만 배열이 아님. 일반적인 배열처럼 사용하면 여러 위험 있음
• 전개 연산자 구현 apply()
  함수 이름.apply(null, 배열)
• 기본 매개변수 구현
  wage = typeof(wage) != undefined ? wage : 8590
  wage = wage || 8590 // 값이 false로 들어오지 않을 때 짧은 조건문

 

 

 

---

• 콜백(callback) 함수 : 매개변수로 전달하는 함수
• 스코프(scope) : 변수가 존재하는 범위
• 섀도잉(shadowing) : 블록이 다른 경우 내부 변수가 외부 변수를 가리는 현상

 

 

선언적 함수 사용한 콜백 함수

// 함수 선언

function callThreeThims (callback) {

    for (let i = 0; i < 3; i++) {

        callback(i)

    }

}

function print(i) {

    console.log(`${i}번째 함수 호출`)

}

// 함수 호출

callThreeThims(print)

 

익명 함수 사용한 콜백 함수

// 함수 선언

function callThreeThims (callback) {

    for (let i = 0; i < 3; i++) {

        callback(i)

    }

}

// 함수 호출

callThreeThims(function print(i) { // 익명 함수 사용

    console.log(`${i}번째 함수 호출`)

})

 

콜백 함수를 활용하는 함수

forEach() 메소드 : 배열 내부의 요소를 사용해서 콜백 함수 호출
배열.forEach(function (value, index, array) { })
배열.forEach((value, index, array) => 리턴값) // 화살표 함수

map() 메소드 : 콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만듦
배열.map(function (value, index, array) { })
배열.map((value, index, array) => 리턴값) // 화살표 함수

filter() 메소드 : 콜백 함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 만듦
배열.filter(function (value, index, array) { })
배열.filter((value, index, array) => 리턴값) // 화살표 함수

 

메소드 체이닝

// 배열 선언

let number = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

// 배열의 메소드를 연속적으로 사용하기. 메소드 체이닝

number

    .filter((value) => value % 2 === 0)

    .map((value) => value * value)

    .forEach((value) => {

        console.log(value)

    })

 

타이머 함수

타이머를 종료할 때는 clearTimeout(타이머_ID), clearInterval(타이머_ID)

타이머 ID는 setTimeout() 함수와 setInterval() 함수를 호출할 때 리턴값으로 나오는 숫자

 

즉시 호출 함수

스코프는 같은 단계에 있을 경우 변수의 이름 충돌이 일어나므로 

스코프 단계를 변경하는 방법은 중괄호를 사용해 블록을 만들거나, 함수를 생성해서 블록을 만드는 방법

(function () {})()