함수

🍋 함수

입력을 받아 출력을 내보내는 일련의 과정

 

// 함수 정의
function 함수이름(매개변수) {
  return 반환값;
}

함수이름(인수) // 함수 호출

 

function add(a, b) {
  return a + b;
}

const result = add(1, 2);
console.log(result); //3

 

🍋 함수를 사용하는 이유

만약 동일한 작업을 반복적으로 사용해야 한다면 같은 코드를 계속 작성해야 한다.

이때 미리 정의된 함수를 사용하면 중복을 제거하고 코드를 재사용하는 것에 유리하다.

 

let a = 0;
let b = 0;
let addResult = 0;

a = 1;
b = 1;
addResult = a + b;

a = 2;
b = 2;
addResult = a + b;

//이 코드를 이렇게 함수로 바꿀 수 있다
function add(a, b){
return a + b;
}

let addResult = 0;
addResult = add(1,1);
addResult = add(2,2);

 

🍋 함수 정의

함수의 정의 방식에는 여러가지가 있다. 

함수 선언문, 함수 표현식, Function 생성자 함수, 화살표 함수가 있다. 

 

함수 선언문 

function name() {

}

 

function add(a, b){
	return a + b;
}

 

함수 표현식

const name = function() { 

}

 

const add = function (a, b) {
  return a + b;
};

console.log(add(1, 2));

 

Function 생성자 함수

const name = new Function()

 

const add = new Function('a', 'b', 'return a + b');

 

화살표 함수

const name = () => { }

 

const add = (a, b) => a + b;

 

🍋 반환문

함수는 return을 통해 실행 결과를 외부로 반환할 수 있다.

return을 명시적으로 하지 않으면 undefined가 반환된다.

 

function add(a, b) {
  a + b;
}
const result = add(1, 2);
console.log(result); //undefined

 

return을 함수 중간에서 하게 되면 함수가 종료된다.

따라서 return 이후 다른문이 있다면 이는 실행되지 않는다.

 

function add(a, b) {
  if (a < 0) {
  	return
 };
  console.log(a + b); //a가 0보다 작을 경우 여기는 실행되지 않음
}

 

🍋 매개변수

함수를 실행하기 위해 외부에서 내부로 필요한 값을 전달할 경우, 매개변수를 통해 인수를 전달한다.

매개변수의 기본값은 undefined이고, 인수가 순서대로 할당된다.

 

매개변수는 함수 내부에서만 참조 가능하고, 외부에서는 참조가 불가능하다.

따라서 매개변수의 정보는 함수 내부에서 접근 가능한 arguments 객체에 저장된다.

 

function add(a, b) {
  console.log(arguments); //[Arguments] { '0': 1, '1': 2 }
  return a + b;
}
add(1, 2);

 

만약 매개변수의 개수와 인수의 개수가 일치하지 않는다면 어떻게 될까?

인수가 부족할 경우는 할당되지 않은 매개변수의 값이 undefined이고,

매개변수가 부족할 경우는 초과된 인수는 무시되고 arguments 안에 보관된다.

 

function add(a, b) {
  console.log(arguments); //[Arguments] { '0': 1, '1': 2, '2': 3 }
  return a + b;
}
add(1, 2, 3); //3은 사용되지 않음

 

인수가 많을 경우 매개변수에 다 넣기 힘들다.

이때, Rest Parameters를 사용하면 손쉽게 작성할 수 있다.

 

function sum(...numbers) {
  console.log(numbers);
}
sum(1, 2, 3, 4, 5); //[ 1, 2, 3, 4, 5 ]

 

🍋 콜백함수

매개변수로 함수를 전달받아, 함수의 내부에서 실행하는 함수이다.

 

const add = (a, b) => a + b;

function calculator(a, b, callback) {
  let result = callback(a, b);
  return result;
}

console.log(calculator(1, 2, add));

 

위 함수에서 callback은 콜백함수이다.

먼저 함수를 가리키고 있는 함수의 참조값이 전달되고, 필요한 순간에 호출된다.

 

콜백함수의 동작 방식을 비교하자면 이와 같다.

맛집에 갔다가 대기 줄이 길어서 대기자 명단을 썼습니다.

입장하기 전까지 주변을 구경 다닙니다.

그러던 중 식당에 자리가 났다고 전화가 왔습니다.
이때, 전화를 받는 시점이 콜백 함수가 호출되는 시점입니다.

자리가 준비된 시점에 원하는 동작을 수행할 수 있습니다.