HyunHo's blog

JavaScript Review 👀 - 6화

JavaScript Review 👀 - 6화

함수(function)와 친해지기

최현호's photo
최현호
·

3 min read

Table of contents

함수(function)

특정한 일을 수행하는 코드의 집합 입니다.

사용자에게 필요한 데이터를 입력 받고 → 결과 값을 출력 합니다.

코드를 작성 할 때 같은 일을 반복하는 것이 아니라 함수로 만들어서 필요할 때 마다 재사용 할 수 있습니다.

함수를 잘 사용하게 되면

  • 재사용 가능

  • 유지보수성

  • 가독성 향상

위의 장점들이 있습니다.

잘 사용하기 위해서는

  1. 작은 단위로 함수를 만들고

  2. 함수 이름으로 기능을 유추 할 만큼 잘 나타내자

  3. 전달받는 매개변수의 이름도 마찬가지

함수 문법

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

add(2, 2); // 함수 호출

  • function 은 함수 정의 키워드

  • add 는 함수 이름

  • a,b 는 매개변수 또는 인자(parameter)

  • return 키워드를 통해 결과 값 반환

함수도 결국 객체 입니다.

함수를 정의하면 Heap 이라는 메모리 공간에 할당이되고 메모리 셀 한 칸이 아니라 다수가 필요합니다.

즉 위의 add 함수는 함수가 담겨있는 메모리 주소를 가지고 있습니다.

  • 다른 변수에 함수를 할당하면 해당 변수는 동일하게 함수가 가리키고 있는 메모리 주소를 참조합니다.
function add(a, b) {
    return a + b;
}

const copy = add; // 함수가 가지고 있는 메모리 주소를 변수에 할당

add(2, 2); // 4
copy(2, 2); // 4

return 에 대해서

return 은 함수 내부에서 처리한 특정한 값을 반환하기 위해서 사용 합니다.

  • return 을 명시적으로 작성하지 않으면 undefined 처리를 해줍니다.
function add(a, b) {
    return a + b;
}

add(2, 2); // 4

-------

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

add(2, 2); // undefined
  • return 을 함수 중간에 사용하면 함수가 종료 됩니다.
function add(a) {
    if (a < 1) {
        return;
    }
    console.log(a);
}

add(2); // undefined
add(0); // 0

매개변수 탐방

  1. 매개변수의 기본 값은 undefined
function add(a, b) {
    console.log(a, b); // 1 undefined
}

add(1);
  1. 매개변수의 정보는 함수 내부에 접근이 가능한 arguments 객체에 저장
function add(a, b) {
    console.log(arguments); // { "0": 1, "1": 2}
    console.log(arguments[0]); // 1
}

add(1, 2);
  1. 매개변수에 기본 값 지정하기
  • 외부에서 전달되는 값이 있는 경우, 디폴트 값이 아니라 주어진 값을 사용 합니다.
function add(a, b = 2) {
    return a + b; // 3
}

add(1);

-----

function add(a, b = 2) {
    return a + b; // 4
}

add(1, 3);
  1. Rest 매개변수

주어지는 매개변수의 개수를 가늠할 수 없을 때, 모든 매개변수를 배열로 받고 싶은 경우

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

add(1, 2, 3, 4, 5, 6);

-----

function add(a, b, c, ...numbers) {
    console.log(a) // 1
    console.log(b) // 2
    console.log(c) // 3
    console.log(numbers); // [4,5,6]
}

add(1, 2, 3, 4, 5, 6);

함수를 선언하는 방법들

  1. 함수 선언문
function name() {}
  1. 함수 표현식

  • 함수도 객체이므로 변수에 할당 및 재할당 가능

  • 함수의 이름이 없다하며 무명 함수라고도 합니다.

const name = function () {};

화살표 함수

const name = () => {}

---

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

add(1,2)

---

# 값만 return 하는 경우

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

콜백 함수

자바스크립트에서 함수를 일급 함수로 취급 합니다.

함수가 일반 객체처럼 모든 연산이 가능 합니다. 출처 : MDN

  • 다른 함수들에 인자로 제공되고

  • 다른 함수에 의해 반환될 수 있으며

  • 변수에 값으로서 할당될 수 있습니다.

추가로 고차 함수라는 정의도 있습니다.

인자로 함수를 받거나(콜백함수), 함수를 반환하는 함수를 말합니다.

콜백 함수 예시

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

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

calculator(3, 4, add);
calculator(3, 4, minus);

Point ❗️

  • 전달되는 당시에 함수를 바로 호출해서 반환된 값을 전달 하는 것이 아니라

  • 함수를 가르키고 있는 함수의 참조 값을 전달 합니다.

  • 그 후 고차 함수 안에서 필요한 순간에 호출이 됩니다.

JavaScript