함수

💡 함수란?

함수 : 특정한 일을 수행하는 코드의 집합

재사용 가능, 높은 가독성, 유지 보수성

중복되는 일이 있다면, 함수 단위로 잘 묶는 것이 중요하다

함수가 하는 일 잘 나타낼 수 있는 이름을 지어야한다.

매개변수 이름도 의미있게 지어야 한다.

💡 함수의 기본

함수를 호출하지 않으면, 선언된 함수는 실행되지 않는다.

사용예제 1
function add(a, b){
  return a + b;
}
const result = add(5, 3);

사용예제 2
function fullName(firstName, lastName){
  return `${firstName} ${lastName}`;
}

const userName = fullName('명수', '한');

💡 함수와 메모리

함수도 객체 타입이므로, 함수의 코드블럭은 메모리 Heap부분에 저장된다.

함수이름은 함수의 코드블럭이 있는 곳의 주소를 담고있다.

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

const sum = add; -> sum은 add의 코드블럭을 가르키게 된다.

sum(1, 2) === add(1, 2) -> 완전히 동일하다.

추가로, 함수를 호출할 때는 항상 소괄호 묶어야한다.
add() != add

💡 반환이란?

return을 명시적을 하지 않으면 자동으로 Undefined이 반환됨!

return -> 함수를 종료시킬 수 있다.

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

function print(text){
  console.log('text');
}
const outcome = print('hello') 
console.log(outcome) -> undefined

function print(num) {
  if(num < 0){
    return; --> return을 만나면 함수를 종료시킨다.  
  }
  else {
    console.log(num);
  }
}

💡 함수의 인자

매개변수를 전달하지 않으면 매개변수의 기본 값은 Undefined이다.

매개변수를 전달 받지 못할 경우를 대비하여, 매개변수의 기본 값을 함수를 선언할 때 설정할 수 있다.

Rest Parameters : 몇개의 인자가 올 건지 알 수 없을 때, 인자들을 배열 형태로 전환하여 저장한다.

function add(a, b){
  console.log(a);
  console.log(b);
  console.log(arguments); -> 함수 내부에서 접근이 가능한 arguments 객체는 매개변수의 정보를 담고있다.
  return a + b;
}

add() -> 매개변수를 전달하지 않으면, 매개변수는 undefined 기본값이다.

function add(a = 1, b = 2) -> 매개변수가 전달되지 않을 때를 대비하여 기본 값 설정 가능
{
  return a + b;
}

Rest Parameters 
function sum(a, b, ...numbers) -> 몇개의 인자가 올 건지 알 수 없을 때 사용한다.
... -> 배열 형태로 저장된다.

💡 함수 표현식

함수 선언문과 표현식의 차이점?

모든 표헌식은 문에 포함되며, 값으로 평가될 수 있는 것들이 표현식이다.

함수 선언문 function name() { }

함수 표현식 const name = function () { }

let add = function (a, b) {

return a + b;

};

add에 전달되는 것은 코드블럭에 주소가 할당된다.

화살표 함수

const name = () => { } function 생략된 부분

코드블럭 안에서 값만 리턴하는 경우라면, 괄호, 리턴 생략가능

함수자체는 값으로 계산될 수 있는 표현식이다.

<함수 선언식 : 호이스팅 영향 받음, 선언 위에서 호출 가능>

<함수 표현식 : 호이스팅 영향 받지 않음, 클로저 , 콜백 사용 가능>

IIFE (Immedicately-Invoked Function Expressions)

// 함수 선언문
function add(a, b){
  return a + b;
}

// 함수 표현식
const add = function (a, b){
  return a + b;
}
이때 add에 할당되는 것은 코드블럭이 위치한 메모리 주소이다.

// 화살표 함수
const add = (a, b) => {return a + b;}
function이 생략된 버전(화살표 함수)

// 화살표 함수2
코드블럭의 내용이 바로 값을 반환하는 경우라면, return 과 괄호 생략가능
const add = (a, b) => a + b;

// IIFE
(function run() {
  console.log('💡')
}) ();
괄호로 묶으면 함수는 값(메모리주소)으로 표현되고, ()로 그 주소를 호출함

💡 드디어 콜백함수

함수의 인자로 함수가 들어가는 것을 콜백함수라고 한다.

이때 인자로 들어가는 것은 함수의 코드블럭이 들어있는 주소값, 즉 레퍼런스이다.

함수의 인자로 함수가 들어오면 그 즉시 호출이 되는 것이 아니라, 함수 내부에서 필요한 순간에 호출이 된다

// 콜백함수 (함수이름을 인자로 받는다.)
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
const pow = (a, b) => a ** b;

// 전달된 action은 콜백함수이다.
// 전달될 당시에 함수를 바로 호출해서 반환된 값을 전달받는 것이 아닌, 함수를 가리키고 있는 함수의 레퍼런스(참조값)가 전달된다.
// 결론, 콜백함수는 고차함수 안에서 필요한 순간에 호출이 나중에 됨
function calculator(a, b, action) {
  let result = 0;
  result = action(a, b);
  console.log(result);
  return result;
}
calculator(1, 3, add);
calculator(5, 4, multiply);
calculator(5, 2, pow);

💡 함수 만들기 퀴즈

function printNum(num){
    console.log(num);
}

function printTwiceNum(num){
  console.log(2 * num)
}

function iterate(max, action){
  for(let i = 0; i < max; i++){
    action(i);
  }
}

iterate(10, printNum); == iterate(10, (num) => {console.log(num);})
iterate(10, printTwiceNum); == iterate(10, (num) => {console.log(2 * num);})

실제 사용 예시
setTimeout(callback, 1000); => setTimeout(() => {console.log('Hi'), 1000ms})

💡 중요한 불변성에 대해

Immutability == unchangable 변경할 수 없는(변경 하지 않는 것이 좋은!!)

함수내부에서 외부로부터 주어진 인자의 값을 변경하는 것은 매우 좋지 않다.

원시 값이 전달되는 경우는 본래의 변수에는 영향을 끼치지 않지만, 객체타입의 경우에는 메모리주소가 전달되므로, 함수내부에서 변경하면, 그 실제의 값이 변경이 된다.

// 원시값 - 값에 의한 복사
// 객체값 - 메모리주소(참조)에 의한 복사(메모리주소)

function display(num){
  num = 5;
  console.log(num);
}
const number = 3;
display(number) -> 5
console.log(number) -> 3
=> 값에 의한 복사이므로, 원래 값은 변하지 않았다.

function displayObj(obj){
  obj.name = 'Son';
  console.log(obj);
}
const son = {
  name: 'Han'
}

displayObj(son) -> 'Son'
console.log(son.name) -> 'Son'

=> 객체 타입의 경우 참조값이 전달되므로, 본래의 값도 변경이된다.

// 정말 바꿔야 한다면?
function changeName(obj){
  return {...obj, name: 'bob'};
}

💡 일급 객체, 고차 함수

일급 객체(함수)란 함수를 변수다루듯이 다룰 수 있다는 것을 의미함

함수를 변수에 넣을 수도있고 파라미터로 넣어줄 수 있음

고차함수는 파라미터로 함수를 받고 원할 때 실행할 수 있는 함수임