모던 자바스크립트 - 함수 다루기

함수 선언

---

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

함수 표현식

---

자바스크립트에서의 함수는 값을 취급될 수 도 있기 때문에 변수에 할당해서 선언 가능

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

다양한 함수의 형태

---

// 변수에 할당해서 활용
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!?");
  };
}

파라미터의 기본값

---

자바스크립트에의 함수 파라미터는 기본값을 가질 수 있다. 함수를 호출할 때 아규먼트를 따로 전달하지 않고 호출하면 기본값을 가지고 동작한다.

function sayHi(name = "default") {
  console.log(`Hi! ${name}`);
}

console.log("Kevin"); // Hi! Kevin
console.log(); // Hi! default

argument 객체

---

argument 객체는 함수를 호출할 때 전달한 아규먼트들을 배열의 형태로 모아둔 유사 객체이다. 전달되는 아규먼트의 개수가 불규칙적일 때 유용하다.

function printArguments() {
  // arguments 객체의 요소들을 하나씩 출력
  for (const arg of arguments) {
    console.log(arg);
  }
}

printArguments("Young", "Mark", "Koby");

Rest Parameter

---

argument 객체를 이용하는 것 외에도 파라미터 앞에 …을 붙여주면 불규칙적으로 전달되는 아규먼트를 다룰 수 있다. rest parameter는 argument 객체와 달리 유사 베열이 아니라 배열이기 때문에 배열의 메소드를 사용할 수 있다.

function printArguments(...args) {
  // args 객체의 요소들을 하나씩 출력
  for (const arg of args) {
    console.log(arg);
  }
}

printArguments("Young", "Mark", "Koby");

또한 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

---

arrow function은 익명 함수를 더 간결하게 표현할 수 있다.

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

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

축약형으로도 작성할 수 있다.

// 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;

this

---

메소드를 호출한 객체를 가리킨다.

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

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

끝!