[자바스크립트] 함수(function) 정리 (함수 선언과 호출, 매개변수와 인수, 기본값 매개변수, 나머지 매개변수, 함수의 선언식과 표현식, 함수의 종류 6가지)

⚠️ 이 포스팅은 드림코딩을 공부하고 정리한 블로그 포스팅입니다. ⚠️

포스팅에 해당하는 목차는 다음과 같습니다:

1. 함수(function)

반복되는 명령어를 묶어 뒀다가 필요할 때마다 부르는 것
특정 일을 하는 명령어의 묶음
한가지의 일을 하거나 값을 연산하기 위해 사용된다
하나의 함수는 한가지의 일만 해야한다
input(ingredient: parameter) and output(result: return or operation)의 묶음

2. 함수를 사용하는 이유

반복되는 코드를 재사용할 수 있다

3. 함수의 선언(function declaration)

function 함수이름(매개변수, 매개변수...) {
  실행문...
  return;
}

함수는 무엇인가를 동작하는 것이기 때문에 함수의 이름은 명령어, 동사 형태로 지어주어야 한다
return이 실행되면 return값을 반환한 후 함수는 자동으로 종료된다
return이 없는 함수는 return undefined가 생략된 함수다

함수의 return이 하는 일

값을 반환하는데 사용한다
현재 진행중인 함수를 중지(탈출)할 수 있다

4. 함수의 호출 or 실행(function call)

함수이름(매개변수);

함수의 이름 뒤에 소괄호를 붙이면 함수를 호출할 수 있다
함수를 호출한다는 것은 함수안에 있는 명령어를 실행한다는 것이다
이때 함수에 전달할 값이 있는 경우에는 소괄호 안에 전달 인수를 넣어 함수를 호출하면 된다
소괄호를 사용하지 않고 함수이름만 사용하면 함수의 호출이 아닌 함수 그 전체를 가리킨다

5. 함수를 인수로 전달

→ 소괄호를 사용하지 않고 함수이름만 사용하면 함수의 호출이 아닌 함수 그 전체를 가리킨다

함수전달: doSomething2(add);

add 함수 자체, 함수이름은 함수자체를 전달한다

function doSomething(value) {
  console.log(value);
}

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

doSomething(add);
/*
function add(a, b) {
  sum = a + b;
  return sum;
}
*/

함수호출: doSomething2(add());

add 함수 호출 → 코드 실행 → sum이 return → a와 b는 빈값 → 숫자가 아닌값을 더해서 sum은 NaN

function doSomething(value) {
  console.log(value);
}

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

doSomething(add()); // NaN

6. 함수의 2가지 타입

1. 기능을 수행하는 함수

function doSomething() { // 함수 선언
  console.log('hello'); // 콘솔창에 기능을 수행하고 끝나는 함수
}
doSomething(); // 함수 호출

2. 값을 리턴하는 함수

function add(a, b) { // 함수 선언
  sum = a + b; // 계산을 한뒤
  return sum; // 결과값을 전달
}
const result = add(1, 2); // add 함수에 인수로 1,2를 전달 -> 리턴값을 변수에 저장
console.log(result); // result라는 변수값을 콘솔창에 출력

7. 매개변수(parameter) vs 인수(argument)

매개변수는 함수의 정의부분에 나열되어 있는 변수들을 의미하며, 인수는 함수를 호출할때 전달되는 실제 값을 의미한다. 이 같은 의미를 명확히 하기 위해 매개변수는 변수(variable)로, 인수는 값(value)으로 보는 것이 일반적이다.

용어정리

parameter === 인자, 매개변수
argument === 인수

매개변수: 함수를 선언할 때의 소괄호 안의 값

function funcNew(parameter) {
  console.log(parameter);
}

인수: 함수를 호출할 때의 소괄호 안의 값

funcNew("This is argument");

8. 매개변수를 사용하는 이유

→ 매개변수가 없다면 함수의 출력값이 고정된다

매개변수가 없는 함수

console창에 Hello를 출력하는 함수

단점: printHello 함수는 console창에 Hello만 출력할 수 있다 (값이 고정)

function printHello(){
    console.log('Hello');
}
printHello();

매개변수가 있는 함수

console창에 사용자가 정한 값을 출력하는 함수

장점: 함수가 파라미터를 받고 출력하기 때문에 사용자가 원하는 값을 자유롭게 출력할 수 있다 (값이 유동적)

function printMessage(message) {
  console.log(`value: ${message}, type: ${typeof message}`);
}

printMessage('Hello');
printMessage(1984);

9. 기본값 매개변수(default parameters)

ES6 이전: 입력되지 않은 매개변수는 undefined로 나온다

function showMessage1(message, from) {
  console.log(`${message} by ${from}`);
}

showMessage1("Hi"); // Hi by undefined

해결책: if문을 사용해 매개변수가 없을 경우에 사용할 값을 받아온다

function showMessage2(message, from) {
  if (from === undefined) {
    from = "unknown";
  }
  console.log(`${message} by ${from}`);
}

showMessage2("Hi"); // Hi by unknown

기본값 매개변수 (ES6): 사용자가 매개변수를 넣지 않았을 경우 출력되는 기본값 매개변수를 바로 넣어준다

function showMessage(message, from = "unknown") {
  console.log(`${message} by ${from}`);
}

showMessage("Hi"); // Hi by unknown

10. 나머지 매개변수(rest parameters)

함수 파라미터를 ...과 함께 받으면 배열 형태로 전달받는다

function printAll(...args) {
  console.log(args);
}

printAll("A", "B", "C");
// ["A", "B", "C"]

배열안에 있는 데이터를 하나씩 꺼내오는 3가지 방법

1. for문

function printAll1(...args) {
  for (let i = 0; i < args.length; i++) {
  console.log(args[i]);
  }
}

printAll1("A", "B", "C"); 
// "A"
// "B"
// "C"

2. for of

function priintAll2(...args) {
  for (const arg of args) {
    console.log(arg);
  }
}

priintAll2("D", "E", "F");
// "D"
// "E"
// "F"

3. 배열의 메서드 forEach()

function priintAll3(...args) {
  args.forEach((arg) => console.log(arg)); 
}

priintAll3("G", "H", "I");
// "G"
// "H"
// "I"

11. 함수 선언식 vs 함수 표현식

→ 함수 선언식과 함수 표현식 차이점: 호이스팅

1. 함수 선언식(function declaration)

일반적인 함수 선언
호이스팅이되서 코드 맨 앞줄에 자동으로 선언이된다

sayHi(); // 아래에 있는 함수가 호이스팅이 되었기때문에 sayHi()는 출력 가능

function sayHi() { 
    console.log("Hi");
}

2. 함수 표현식(function expression)

함수를 변수에 저장
일반 함수와 다르게 호이스팅이 되지 않는다

sayHello(); // Uncaught TypeError: sayHello is not a function

let sayHello = function() {
    console.log("hello");
};

12. 일급함수(first class function)

→ 자바스크립트 함수는 변수와 같은 역할을 한다

→ 자바스크립트에서 함수는 값으로 사용할 수 있다

1. 함수를 변수에 할당할 수 있다

2. 함수를 매개변수(Parameter), 인수(Argument)로 전달이 가능하다

3. 함수를 리턴할 수도 있다

13. Good Practice: Early Return, Early Exit

Bad Practice: 조건이 맞을때 함수를 실행

function upgradeUser(user) {
  if(user.point > 10) { // 조건이 맞을 경우
    // long upgrade logic
  }
}

Good Practice: 조건이 안맞을 경우 함수를 종료

function upgradeUser(user) {
  if(user.point <= 10) { // 조건이 안맞을 경우
    return; // 함수종료
  }
  // long upgrade logic
}

14. 함수의 종류 6가지

1. 익명 함수

2. 이름있는 함수

3. 화살표 함수

4. 콜백 함수

5. 즉시 실행 함수

6. 재귀 함수

1. 익명 함수(annonymous function)

이름이 없는 익명함수는 변수에 저장하여 사용하는 함수표현식을 사용한다. 주로 객체 데이터의 메소드로 익명함수를 가진다.

const printMessage = function () {
  console.log("Annonymous Function");
};

2. 이름있는 함수(named function)

function printMessage() {
  console.log("Named Function");
};

3. 화살표 함수(arrow function)

기존 함수를 화살표를 사용해서 간결하게 만들어준 함수

// 예시1)
const simplePrint1 = function () {
  console.log("Arrow Function")
};
const simplePrint2 = () => console.log("Arrow Function");

// 예시2)
const add1 = function (a, b) {
  return a + b;
};
const add2 = (a, b) => a + b;

4. 콜백함수(callback function)

콜백함수란 함수의 파라미터로 함수를 넘겨주고 이를 내부에서 호출하는 함수를 말한다. 콜백함수는 이름이 없는 함수인 익명함수인 경우가 많다.

function randomQuiz(answer, printYes, printNo) {
// function randomQuiz는 변수 answer 함수 printYes와 printNo를 인자 or 매개변수(Parameter)로 받는다
// 선언된 함수를 다른 함수의 인수(Argument)로서 불러올때 콜백함수라고 한다
  if (answer === "I love you") {
    printYes(); // 정답이 맞을때 호출하게될 함수
  } else {
    printNo(); // 정답이 틀릴때 호출하게될 함수
  }
}

const printYes = function () {
  console.log("YES");
};

const printNo = function () {
  console.log("NO");
};

randomQuiz("I hate you", printYes, printNo);
randomQuiz("I love you", printYes, printNo);

5. 즉시실행 함수(IIFE: Immediately Invoked Function Expression)

함수를 선언함과 동시에 호출하는 함수로 함수의 선언을 소괄호로 묶은 다음 호출 (); 한다.

(function saySomething() {
  console.log("IIFE");
})();

6. 재귀함수(recursive function)

함수 안에서 자기 자신의 함수를 호출하는것

* 재귀: 원래의 자리로 되돌아옴

const Func = function print() {
  console.log("Recursive Function");
  print(); // callstack 초과로 에러가 난다
};

'JavaScript' 카테고리의 다른 글

[자바스크립트/한줄정리] 인자(parameter)와 인수(argument)의 차이 (0)	2022.05.26
[자바스크립트] 조건문 if문, switch문 정리 (0)	2022.05.25
[자바스크립트] 변수 선언과 할당 (var, let, const의 차이, 변수명 규칙) (0)	2022.05.24
[자바스크립트] 자바스크립트의 데이터 종류 6가지 (원시타입과 참조타입) (0)	2022.05.24
[자바스크립트/한줄정리] 제로베이스 넘버링(Zero-based Numbering)이란? (0)	2022.05.24