[혼공스] 4주차

 

05. 함수

5-1 함수의 기본 형태

함수 호출 형태의 이점

1. 반복 작업 방지 – 동일한 코드의 반복을 줄일 수 있음.
2. 가독성 향상 – 코드의 구조가 명확해짐.
3. 유지보수 용이 – 변경이 필요한 경우 함수만 수정하면 됨.

익명 함수

• 기본 형태:{} 내부에 코드 작성.
• function() { }
• 특징:
  • 함수의 자료형은 function.
  • 함수를 출력하면 f() { } 형식으로 나타남.
  • 별도의 이름이 없으면 익명 함수.

예시 (이름 있는 함수)

console.log(alert);

출력:

f alert() { [native code] }

 

선언적 함수

• 이름이 있는 함수를 선언하는 방식.

예시

function 함수() { }
let 함수 = function () { };

출력:

f 함수() { }

이름이 명확하게 표시됨.

매개변수와 리턴값

• 매개변수 (Input): 함수가 호출될 때 전달받는 값.
• 리턴값 (Output): 함수가 실행된 후 반환하는 결과값.

모든 함수가 매개변수와 리턴값을 필요로 하지는 않음. 필요할 때만 사용.

 

기본 형태의 함수 예제

1) 제곱값 반환 함수

<script>
  function f(x) {
    return x * x;
  }
  console.log(f(3));  // 출력: 9
</script>

2) 배열에서 최솟값 찾기

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

  const testArray = [52, 273, 32, 103, 275, 24, 57];
  console.log(`${testArray} 중에서`);
  console.log(`최솟값 = ${min(testArray)}`);
</script>

출력:

52,273,32,103,275,24,57 중에서
최솟값 = 24

 

나머지 매개변수 (Rest Parameters)

• 가변 매개변수 함수: 호출할 때 매개변수 개수가 고정되지 않은 함수.
• 나머지 매개변수를 사용하여 구현.

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

• ...을 사용하면 매개변수들이 배열로 들어옴.

예제) 나머지 매개변수 사용

<script>
  function sample(...items) {
    console.log(items);
  }
  sample(1, 2);         // [1, 2]
  sample(1, 2, 3);      // [1, 2, 3]
  sample(1, 2, 3, 4);   // [1, 2, 3, 4]
</script>

• 일반 매개변수와 함께 사용할 수도 있음.

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

 

전개 연산자 (Spread Operator)

• 배열을 펼쳐서 함수의 매개변수로 전달.
• 배열 앞에 ...을 붙여 사용.

function 함수이름(...배열) { }

 

기본 매개변수 (Default Parameters)

• 매개변수에 기본값을 설정할 수 있음.

function 함수이름(매개변수1, 매개변수2 = 기본값) { }

주의: 기본 매개변수는 오른쪽에서부터 지정하는 것이 좋음.

function sample(a = 기본값, b) { }

• 위와 같이 작성하면 b에 값을 전달하려면 a도 입력해야 하기 때문에 의미가 없음.

 

 

05-2 함수 고급

콜백 함수 (Callback Function)

콜백 함수란 다른 함수의 매개변수로 전달되어 실행되는 함수를 의미한다.

콜백 함수의 특징

1. 함수를 인자로 전달하여 특정 시점에 실행할 수 있다.
2. 비동기 처리(예: setTimeout, 이벤트 처리)에서 자주 사용된다.
3. 함수의 재사용성과 확장성을 높일 수 있다.

콜백 함수를 활용하는 함수

1. forEach()
   • 배열의 각 요소를 순회하며 콜백 함수를 실행하지만, 새로운 배열을 반환하지 않는다.
2. map()
   • 배열의 각 요소를 변환하여 새로운 배열을 반환한다.
3. filter()
   • 조건을 만족하는 요소만 걸러서 새로운 배열을 반환한다.

화살표 함수 (Arrow Function)

화살표 함수는 익명 함수를 간단하게 표현하기 위한 문법이다.

• 기본 형태:

  const 함수이름 = () => { 실행할 코드 };
  

• 리턴값만 있는 경우:

  const 함수이름 = () => 값;
  

즉시 실행 함수 (Immediately Invoked Function Expression, IIFE)

즉시 실행 함수란 변수의 이름 충돌을 방지하고 코드를 안전하게 실행하기 위한 방법이다.

(function() {
  console.log("즉시 실행 함수 실행!");
})();

 

엄격 모드 (Strict Mode)

"use strict";를 선언하면 JavaScript가 보다 엄격하게 코드를 검사하여 실수를 방지할 수 있다.

"use strict";
x = 10; // 오류 발생 (변수를 선언하지 않으면 엄격 모드에서 허용되지 않음)

엄격 모드는 안정적인 코드 작성을 위해 권장된다.

 

 

 

 

<기본숙제> 

p.202 <윤년을 확인하는 함수 만들기> 예제를 실행하여 2022년이 윤년인지 확인하는 결과 인증하기 

  <script>

    function isLeapYear(year){
      return (year%4===0) && (year%100!==0) || (year%400===0)
    }
  </script>

직접 콘솔창에서 함수 호출하여 확인해보았다. 

 

 

<추가숙제>

p.240 확인 문제 1번 풀고, 풀이과정 설명하기 

  <script>

   //변수 선언 
   let numbers=[273,25,75,103,32,24,76]

   //(1) 홀수만 추출 
   numbers=numbers.filter((x) => x%2===1)
   //(2) 100 이하의 수만 추출 
   numbers=numbers.filter((x)=> x<=100)
   //(3) 5로 나눈 나머지가 0인 수 
   numbers=numbers.filter((x)=> x%5===0)

  //출력 
  console.log(numbers)
  


  </script>

 

1. 홀수만 추출 

x%2===1인 경우 홀수  

제거된 값:  32,24,76 

 

2. 100이하의 수만 추출 

x<=100 

제거된 값: 273, 103(100초과) 

 

3. 5로 나눈 나머지가 0인 수만 추출 

x%5===0 

제거된 값: 57

 

최종 결과값 : 25, 75