JS 기초 3 : 함수, 재귀함수, 콜백함수

함수

- 함수는 다수의 명령문을 코드 블록으로 감싸고, 하나의 실행 단위로 만든 코드의 집합

- 유사한 동작을 하는 코드를 하나로 묶어 범용성을 확대시킨 블록 코드

- 함수는 정의 부분과 호출 부분으로 구성

- 함수는 가급적 한가지 일만 하며 매개 변수는 최대 3개 이내로 작성 권장

 

함수 정의

- 함수 이름, 매개  변수, 반환 결과로 구성

- 매개변수는 함수 안에서 변수와 같은 역할을 한다.

1. 함수 선언식

2. 함수 표현식

3. 화살표 함수

// 1. 함수선언식
function add_1(x,y) {
  return x + y;
};

// 2. 함수표현식 
const add_2 = function (x,y) { // 이름 없는 함수값을 add_2에 저장해라
  return x + y;
};

// 3. 화살표 함수
const add_3 = (x, y) => x + y;

console.log(add_1(1,2)); // 3
console.log(add_2(1,2)); // 3
console.log(add_3(1,2)); // 3

 

함수 호출

- 매개변수와 인수의 개수가 일치하는지 확인하지 않음

- undefined 변수가 들어올 경우(변수를 지정하지 않을 경우) 값 초기화 지정 가능

// 1. default value
function print_add(x, y = 10){
  console.log(x + y);
}

print_add(10); // 20


// 2. dynamic parameters
function print_min(){
  console.log(arguments[0]-arguments[1]);
}

print_min(10, 20); // -10

 

함수 반환

- return 후 코드는 수행되지 않으며 default return value는 undefined

function add(x,y) {
  return x + y; // break
}

let result = add(10, 20);
console.log(result); // 30

// 조건문과 함께
function checkAge(age) {
  if (age >= 20) return true;
  else return false; 
}

console.log(checkAge(50)); // true
console.log(checkAge(13)); // false

 

재귀 함수

- 함수 스스로 자신을 참조해 호출하면서 동일한 코드가 계속적으로 수행되는 함수 호출 방법

- 재귀 함수는 특정 조건이 됐을 때 자신을 그만 호출되도록 제한하는 exit code가 필요

function recursive(num) {
  if (num == 0) return;
  console.log(num)
  recursive (num -1);
}
recursive(3) // 3 2 1

// 3 + 2 + 1 + 0
function recursive(num) {
  if (num == 0) return 0;
  return num + recursive(num -1);
}
console.log(recursive(3)); // 6

// factorial
function factorial(num) {
  if (num == 0) return 1;
  return num * factorial(num -1);
}
console.log(factorial(4)); // 6

 

콜백 함수

- 콜백 함수(Callback Function)란 다른 함수의 매개변수로 전달되어 수행되어지는 함수

- 고차 함수(Higher-order Function)란 매개변수를 통해 함수를 받아 호출하는 함수

function add(x, y) {
  return x + y;
}
function sub(x, y) {
  return x - y;
}
function mul(x, y) {
  return x * y;
}
function div(x, y) {
  return x / y;
}

function calculator(callback, x, y) {
  return callback(x, y);
}

console.log(calculator(add, 5, 2)); // 7
console.log(calculator(sub, 5, 2)); // 3
console.log(calculator(mul, 5, 2)); // 10
console.log(calculator(div, 5, 2)); // 2.5

 

call by 

call by value

- 값에 의한 복사로 함수 내에서 매개 변수 값을 변경 시켜도 영향이 미치지 않음

- 원시 타입(primitive type)을 매개 변수로 넘겼을 때 발생

let a = 1;
let add = function (b) { b = b + 1;} 
add(a);
console.log(a); // 1

call by reference

- 주소에 대한 복사로 함수 내에서 매개 변수 내 값을 변경시키면 원본 데이터에도 영향을 받음

- 객체 타입(object type)을 매개 변수로 넘겼을 때 발생 

var a = { v : 1 };
var add = function (b) {b.v = b.v + 1};
add(a);
console.log(a.v); // 2

 

연습 문제

function MAX(x, y) {
if (x > y) return x;
return y;
}

console.log(MAX(0,3));
console.log(MAX(-1,5));
console.log(MAX(100,7));

//case 2
function MAX(x, y) {
  return x > y ? x : y;
  }
  
  console.log(MAX(0,3));
  console.log(MAX(-1,5));
  console.log(MAX(100,7));

 

---

수학 공식이 외우기는 어렵지만 계산하기 쉽듯이..

이번 함수는 역대급 졸림+다시보기 반복으로 4강 밖에 안됐지만 마무리했다^^..

 

특히 연습문제 간단했지만 한번에 풀었을 때 쾌감이 ㅎㅎ

이제 JS 기초 강의가 16강 남았다 아자아자!