코드카데미 Javascript - Function (헬퍼 함수, 함수 표현, 화살표 함수)

 

Default Parameters (디폴트 매개변수)

 

ES6 버전부터 함수에 디폴트 매개변수를 정하는 것이 가능해짐.

함수에 인자를 전달하지 않거나 인자가 undefined일때 이 디폴트 값을 대신 사용하게 된다.

 

function greeting (name = 'stranger') {
  console.log(`Hello, ${name}!`)
}

greeting('JKim') // Output: Hello, JKim!
greeting() // Output: Hello, stranger!

 

stranger를 name의 디폴트 값으로 설정한 경우

 

---

Helper Function (헬퍼 함수)

 

다른 함수 안에서 특정 기능을 하고 있는 함수를 헬퍼 함수라고 함

 

function monitorCount(rows, columns) {
  return rows * columns;
}

function costOfMonitors(rows, columns){
   return monitorCount(rows, columns) * 200;
}

const totalCost = costOfMonitors(5, 4);

console.log(totalCost);

 

cosOfMonitors 함수 안에 들어있는 monitorCount라는 함수가 헬퍼 함수임

 

---

Function Expressions (함수 표현식)

 

함수를 정의하는 또 다른 방법

주로 함수의 이름은 생략된다. 이름이 없는 함수는 익명 함수(anonymous function)이라고 부름

function expression은 주로 다른 변수에 저장되어 참조한다. 

 

💡 함수 선언과 달리 중괄호 뒤에 ;가 필요함

 

const calculate = function(width, height){
	return width*height;
};

 

function expression을 호출할 때는 다음과 같이 저장된 변수의 이름(=identifier;식별자)을 사용한다.

 

calculate(200, 300);

 

💡 함수 선언과 달리 함수 표현은 호이스팅 불가능

 

---

Arrow Functions (화살표 함수)

 

화살표 함수는 function이라는 키워드를 사용하지 않고 함수를 정의하는 방법이다.

function을 생략하고 매개변수가 담긴 괄호 뒤에 화살표 => 를 쓴다.

 

const calculate = (width, height) => {
	return width*height;
};

 

화살표 함수는 더 간결하게 나타낼 수도 있다.

 

//Zero parameters
const functionName = () => {};

//One parameters
const functionName = paramOne => {};

//Two or More Parameters
const functionName = (paramOne, paramTwo) => {};

 

파라미터가 하나 뿐일 때는 괄호를 생략할 수도 있다.

 

// Single-line
const sumNumbers = number => number + number;

// Multi-line
const sumNumbers = number => {
   const sum = number + number;
   return sum;
 };

 

블럭 안에 코드가 한줄이면 중괄호도 생략할 수 있다.

그리고 return 도 생략가능하다. 따라서 다음과 같이 표현하는 게 가능하다.

 

const sumNumbers = num => num + num;