함수를 만드는 방법

1. 함수 선언

• 선언 하기 전에 호출할 수 있음
• 함수 스코프를 가짐
  

2. 함수 표현식 (Function Expression): 함수 선언을 값처럼 활용하는 방식

• 선언 이전에 접근할 수 없음
• 할당된 변수에 따라 스코프가 결정 됨
  
  

이름이 있는 함수 표현식

• Named Function Expression (기명 함수 표현식)
• 함수 표현식으로 함수가 할당된 변수에는 자동으로 name이라는 프로퍼티를 가지게 됨

const sayHi = function printHiInConsole() {
  console.log('Hi');
};

console.log(sayHi.name); // printHiInConsole

• 이름이 없는 함수를 변수에 할당할 때는 변수의 name 프로퍼티는 변수 이름 그 자체를 문자열로 가지게 됨

const sayHi = function () {
  console.log('Hi');
};

console.log(sayHi.name); // sayHi

• 함수 내부에서 함수 자체를 가리킬 때 사용할 수 있고 함수를 외부에서 함수를 호출할 때 사용할 수는 없음

const sayHi = function printHiInConsole() {
  console.log('Hi');
};

printHiInConsole(); // ReferenceError

• 함수 내에서 함수를 가리켜야 할 때는 함수 이름을 작성해주는 것이 안전함
  • 재귀함수: 자기 자신을 부르는 함수

let countdown = function printCountdown(n) {
  console.log(n);
  if (n === 0) {
    console.log('End!');
  } else {
    printCountdown(n - 1);
  }
};

let myFunction = countdown;

countdown = null;

myFunction(5); // 정상적으로 동작

즉시 실행 함수 (Immediately Invoked Function Expression, IIFE)

• 함수가 선언된 순간에 바로 실행을 할 수 있는 함수
• 함수선언 부분을 소괄호로 감싼 다음에 바로 뒤에 함수를 실행하는 소괄호를 한 번 더 붙여주는 방식

(function (x, y) {
  console.log(x + y);
})(3, 5);

• 즉시 실행 함수는 함수에 이름을 지어주더라도 외부에서 재사용할 수 없음
  • 일반적으로는 이름이 없는 익명 함수를 사용하지만 재귀적인 구조를 만들고자 할 때는 이름이 필요할 수도 있음

(function sayHi() {
  console.log('Hi!');
})();

sayHi(); // ReferenceError

• 일반적으로 프로그램 초기화 기능에 많이 활용하거나

(function init() {
  // 프로그램이 실행 될 때 기본적으로 동작할 코드들..
})();

• 재사용이 필요 없는, 일회성 동작을 구성할 때 활용함
• 함수의 리턴값을 바로 변수에 할당하고 싶을 때 활용함

const firstName = 'Young';
const lastName = 'Kang';

const greetingMessage = (function () {
  const fullName = `${firstName} ${lastName} `;

  return `Hi! My name is ${fullName}`;
})();

• 즉시 실행 함수에서 사용하는 변수들은 함수 내에서만 유효하기 때문에 이런 점을 활용하면, 일시적으로 사용할 변수의 이름들을 조금 자유롭게 작성할 수도 있음

값으로서 함수

• 자바스크립트는 함수를 특별한 종류의 값으로 취급함
• 함수의 구체적인 데이터 타입은 객체임
• 자바스크립트의 함수는 어디에서나 할당될 수 있고 다양한 형태로 호출될 수 있음
• 콜백 함수 (Callback Function): 다른 함수의 파라미터에 전달된 함수
• 고차 함수(Higher Order Function): 함수를 리턴하는 함수
  • 이중 괄호를 사용해서 고차 함수로 리턴되는 함수를 바로 호출할 수도 있음
• 자바스크립트는 일급 함수(First Class Function)를 가진 프로그래밍 언어임

// 변수에 할당해서 활용
const printJS = function () {
  console.log('JavaScript');
};

// 객체의 메소드로 활용
const codeit = {
  printTitle: function () {
    console.log('Codeit');
  }
}

// 콜백 함수로 활용
myBtn.addEventListener('click', function () {
  console.log('button is clicked!');
});

// 고차 함수로 활용
function myFunction() {
  return function () {
    console.log('Hi!?');
  };
};

Parameter

• 파라미터: 함수 선언 부분에서 소괄호 안에 작성되는 것
• 아규먼트: 함수를 호출하는 부분에서 파라미터로 전달하는 값에 해당하는 부분
• 파라미터가 있는 함수에 아규먼트를 주지 않으면 undefined가 파라미터 부분에 출력됨
• 함수를 호출할 때 undefind값을 전달해서 기본값을 사용할 수도 있음
• 기본 값은 ES2015부터 나온 기능임

Arguments

• 아규먼트 개수에 따라 유연하게 동작하는 함수를 만들려면
• 자바스크립트에서 함수를 선언할 때 함수 내부에서는 arguments라는 특별한 객체를 사용할 수가 있음
  • 유사 배열임
  • 항상 전달된 모든 아규먼트를 다룸
• 함수를 호출할 때 전달되는 아규먼트의 개수가 불규칙적일 때 유용하게 활용됨

Rest Parameter

• 일반 파라미터 앞에 마침표 세개 ...를 붙여 준 것
• 배열이기 때문에 배열의 메소드를 자유롭게 사용할 수 있음
• 일반 파라미터와 함께 사용할 수도 있음
  • 앞에 정의된 파라미터에 아규먼트를 먼저 할당하고 나머지 아규먼트를 배열로 묶는 역할을 하기 때문에 반드시 가장 마지막에 작성되어야 함

function printRankingList(first, second, ...others) {
  console.log('코드잇 레이스 최종 결과');
  console.log(`우승: ${first}`);
  console.log(`준우승: ${second}`);
  for (const arg of others) {
    console.log(`참가자: ${arg}`);
  }
}

printRankingList('Tommy', 'Jerry', 'Suri', 'Sunny', 'Jack');

Arrow Function

• 익명 함수를 좀 더 간결하게 표현할 수 있도록 ES2015에서 새롭게 등장한 함수 선언 방식
• 모든 화살표 함수는 이름이 없는 익명 함수임
  • 표현식으로 함수를 정의할 때 활용될 수도 있고 콜백 함수로 전달할 때 활용할 수도 있음

// 화살표 함수 정의
const getTwice = (number) => {
  return number * 2;
};

// 콜백 함수로 활용
myBtn.addEventListener('click', () => {
  console.log('button is clicked!');
});

• 파라미터가 하나이면 소괄호를 생략할 수 있음
  • 파라미터가 두개 이상 있거나 하나도 없으면 반드시 소괄호를 작성해 줘야함
• 내부 동작 부분이 return문 하나로만 이루어져 있다면 중괄호와 return 키워드도 생략할 수 있음

// 1. 함수의 파라미터가 하나 뿐일 때
const getTwice = (number) => {
  return number * 2;
};

// 파라미터를 감싸는 소괄호 생략 가능
const getTwice = number => {
  return number * 2;
};

// 2. 함수 동작 부분이 return문만 있을 때
const sum = (a, b) => {
  return a + b;
};

// return문과 중괄호 생략 가능
const sum = (a, b) => a + b;

• 리턴 값이 객체인 경우 중괄호와 return 키워드를 생략하면 에러가 나므로 객체를 나타내는 중괄호 바깥에 소괄호를 한번 감싸주면 됨

const getCodeit = () => ({name: 'Codeit'});

• 에로우 펑션에는 arguments 객체가 없으니 주의하기!
• this가 가리키는 값이 일반 함수와 다르니 주의하기!

What is this?

• 함수 내부에서 주로 사용되며 객체의 메소드를 만들 때 중요한 역할을 함
• 웹 브라우저에서 this가 사용될 때는 전역 객체, Window 객체를 가지게 됨
• 객체의 메소드를 정의하기 위한 함수 안에선 메소드를 호출한 객체를 가리키게 됨
  • 따라서 코드를 작성할 때 값이 미리 결정되는 게 아니라 함수가 호출될 때 어떤 객체가 그 함수를 호출했는지에 따라 상대적으로 값이 변하게 됨

const user = {
  firstName: 'Tess',
  lastName: 'Jang',
  getFullName: function () {
    return `${this.firstName} ${this.lastName}`;
  },
};

console.log(user.getFullName()); // getFullName 안에서의 this는 getFullName을 호출한 user객체가 담긴다!

• 일반함수와 화살표 함수는 this를 다루는 방식이 서로 다름
  • 일반함수: 호출한 대상에 따라 상대적으로 변함
  • 화살표 함수: 화살표 함수가 선언되기 직전에 유효한 this 값과 똑같은 값을 가지고 동작함
  • 따라서 객체에 메소드를 만들 때는 일반함수가 권장 됨

참고 자료

• 코드잇 모던 자바스크립트