[언어공부] (혼자 공부하는 자바스크립트) Chapter 5-1 함수의 기본 형

Chapter 5 함수

Chapter 5-1 함수의 기본 형

함수의 기본 형태

함수를 사용하는 것을 '함수를 호출한다’ 라고 표현한다, 함수 호출 시에 괄호 내부에 여러가지 자료는 넣는데

이러한 자료를 매개변수라고 부릅니다. 그리고 함수를 호출해서 최종적으로 나오는 결과를 리턴값이라고 부릅니다.

=> 함수에 넣는 input 이 매개변수이며, 결과로 나오는 output 이 리턴값입니다.

 

 

익명 함수

함수는 코드의 집합을 나타내는 자료형이다. 중괄호 내부에 코드를 넣어 사용하기 때문이다.

function () {}

 

함수의 이점

• 반복되는 코드를 한 번만 정의해놓고 필요할 때마다 호출하므로 반복 작업을 피할 수 있습니다.
• 긴 프로그램을 기능별로 구분해 여러 함수를 나누어 작성하면 모듈화로 전체 코드의 가독성이 좋아집니다.
• 기능별(함수별)로 수정이 가능하므로 유지보수가 쉽습니다.
• 자바스크립트에서는 함수는 일급객채. 즉 값처럼 자유롭게 사용할 수 있습니다.

 

선언적 함수

일반적으로는 익명함수보다 이름이 있는 선언적 함수를 많이 사용합니다.

function 함수() {

}

 

◆ 함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출할 수 있습니다!

 

 

함수 표현식

let arr = function(){
}

◆ 함수 표현식으로 정의한 함수는 함수 선언문으로 정의한 함수와 다르게 함수 표현식 이전에 호출할 수 없습니다. 이유는 함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성 시점이 다르기 때문입니다! 함수 선언문으로 정의한 함수는 런타임 이전 자바스크립트 엔진에 의해 먼저 실행됩니다. 그리되면 JS엔진은 함수 이름과 동일한 이름의 식별자를 암묵적으로 함수 객체를 할당합니다. 이를 함수 호이스팅이라고 합니다. 그러나 변수 호이스팅과는 개념이 다릅니다.

 

 

 

 

나머지 매개변수

최솟값을 구하는 함수에서 변수를 배열로 받았는데, 숫자 자료형 여러개를 매개변수로 받으려면 나머지 매개변수를 사용하면 됩니다.

function 함수 이름 (...나머지 매개변수) { }

함수의 매개수 앞에 ... 를 입력하면 매개변수들이 배열로 들어온다. 매개변수가 고정적이지 않을 때에도 사용할 수 있습니다.

function sample(...items) {
  console.log(items);
}

sample(a, b);		// [a, b]
sample(a, b, c);		// [a, b, c]
sample(a, b, c, d);		// [a, b, c, d]

단순히 숫자 자료형으로 호출했던 매개변수가 배열 형태로 들어오는 것을 확인할 수 있습니다.

function min(...items) {
  let output = items[0];
  for (const item of items) {
    if (output > item) {
      output = item;
    }
  } 
  return output;
}

console.log("min(51, 73, 131, 106, 275, 49, 55)");
console.log(`= ${min(51, 73, 131, 106, 275, 49, 55)}`);		// = 49

나머지 매개변수는 배열처럼 사용이 가능합니다.

 

 

 

 

나머지 매개변수와 일반 매개변수 조합하기

나머지 매개변수는 말 그대로 나머지이기 때문에, 일반적인 매개변수와 조합해 사용할 수 있습니다.

function 함수 이름(매개변수, 매개변수, ...나머지 매개변수) { }

이 때 나머지 매개변수는 항상 마지막에 작성해야 합니다!

function sample(a, b, ...c) {
  console.log(a, b, c);
}

sample(a, b);		// a b []
sample(a, b, c);		// a b [c]
sample(a, b, c, d);		// a b [c, d]
sample(a, b, c, d, e);		// a b [c, d, e]

매개변수 a, b가 먼저 들어가고, 남은 것들은 모두 c에 배열 형태로 들어갑니다.

 

매개변수 자료형에 따라 다르게 작동하는 함수

function min(first, ...rests) {
  let output;
  let items;
  
  if(Array.isArray(first)) {
    output = first[0];
    items = first;
  } else if (typeof(first) === "number") {
    output = first;
    items = rests;    
  }
  
  for (const item of items) {
    if (output > item) {
      output = item;
    }
  }
  
  return output;
}

매개변수 자료형이 배열인지, 숫자인지에 따라 다르게 작동하는 함수입니다.

1. 매개변수 자료형 구분
   • Array.isArray() 메소드를 활용하면 자료형이 배열인지 아닌지 확실하게 확인할 수 있습니다.
   • typeof 배열 을 실행할 경우 object 라는 결과가 나옵니다. 간단한 예제에서는 확인할 수 있지만, 확실하게 알려면 Array.isArray() 메소드를 써야 합니다.
2. 매개변수 자료형이 배열일 경우
   • 매개변수 first 만 존재합니다.
   • output을 first 배열의 첫번째 요소로 지정하고, 반복문을 실행합니다.
3. 매개변수 자료형이 숫자일 경우
   • 매개변수로 숫자 자료형 first와, 배열 rests가 존재합니다.
   • output을 first로 지정하고, 배열 rests의 요소들과 비교하는 반복문을 실행합니다.

 

전개 연산자

숫자로만 입력할 수 있는 함수에서, 배열의 요소들을 각각 입력하려면 전개 연산자를 활용하면 됩니다.

함수이름 (...배열)

function 함수 (a, b, c) {
  console.log(a);
  console.log(b);
  console.log(c);
}

const array = [1, 2, 3];

함수(array[0], array[1], array[2]);		// 1 2 3
함수(...array);		// 1 2 3

 

 

 

 

 

 

 

참고도서 : 혼자공부하는 자바스크립트 (https://www.hanbit.co.kr/store/books/look.php?p_code=B8393055290)

혼자 공부하는 자바스크립트

참고 : https://www.youtube.com/playlist?list=PLBXuLgInP-5kxpAKy2DNXoebCse2grHjl

혼자 공부하는 자바스크립트

참고 : https://garudanish.tistory.com/9

혼자 공부하는 자바스크립트 5장 - 함수