[혼공스] 4주차 Chapter 05 함수

기본 미션

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

const isLeapYear = function (year) {
  return year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
};

선택미션

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

논리연산자 &&를 통해 3가지 조건에 일치하는 값을 필터링 하도록 했다.
filter 메서드는 비파괴적처리를 하기 때문에 result라는 새로운 변수에 필터링된 결과값을 할당했고,
console.log에는 결과값이 할당된 result 변수를 출력했다.

// 변수를 선언합니다.
let numbers = [273, 25, 75, 52, 103, 32, 57, 24, 76]

// 처리합니다.
let result = numbers.filter((el) => el % 2 === 1 && el <= 100 && el % 5 === 0);

// 출력합니다.
console.log(result)

---

학습 기록

함수

• 함수는 코드의 묶음이다.
• 반복되는 작업을 한 번만 정의하면 필요시 재사용할 수 있어서 효율적이다.
• 긴 프로그램을 기능별로 함수로 분리하면 모듈화되어 전체 코드의 가독성이 좋아진다.
• 기능별로 수정이 가능하므로 유지보수가 쉽다.

함수 선언 방법:

• 대괄호 안에 쉼표로 구분된 값들을 넣어 만든다.
• 배열 내부의 각 값을 요소(element)라고 부른다.

const 함수명 = function () {
  실행될 내용
}

함수 호출:

• 함수명과 () 괄호를 사용해서 호출한다.
• 함수 내부에서 외부 변수를 사용할 수 있다.
• 함수는 실행 시 점프와 리턴 과정이 발생한다.
  • 점프: 호출 위치에서 함수 본문으로 이동하는 것이다.
  • 리턴: 함수 본문에서 호출 위치로 나오는 것이다.

const 함수명 = function () {
  동작 실행
  return // 값을 가지고 원래 위치로 리턴한다.
}

함수명(); // 함수가 실행되면서 함수 내부로 점프한다.

교재 외 프로시저 함수:

• 전통적으로 매개변수가 없는 함수를 의미한다.
• 보통 return 문이 없거나 반환값이 없고, 출력(console.log), API요청, 데이터 저장, 파일 처리 등의 작업을 수행한다.
• 현대 프로그래밍에서는 매개변수 유무와 관계없이 동작을 중심으로 판단한다.
• 즉, 매개변수가 있더라도 반환값 없이 특정 동작을 수행하는 함수는 프로시저 함수라고 볼 수 있다.

const sayHello = function () {
  console.log("Hello, world!");
};
sayHello(); // 실행하지만 반환값이 없음

const sayHello2 = function (name) {
  console.log(`Hello, ${name}!`);
};
sayHello2("yoonTeacher"); // 실행하지만 반환값이 없음

수학적 함수:

• 매개변수를 받아 계산 후 결과를 리턴하는 방식이다.
• 함수 내부에 리턴 키워드를 사용한다.
• OO의 리턴값은 OO다 라고 표현한다.

const sum = function (a, b) {
  return a + b; // 값을 가지고 원래 위치로 리턴한다.
};
sum(1, 2); // 함수에서 각각의 위치 a와 b에 해당 값을 할당하면서 점프한다.

 

함수의 두 가지 표기 방법 - 익명 함수와 선언적 함수

• 익명 함수와 선언적 함수는 표기 방법만 다를 뿐 동작은 거의 같다.
• 초기에는 선언적 함수 형태를 많이 사용했지만, 현대 자바스크립트에서는 익명 함수 형태를 더 많이 사용한다.

선언적 함수(함수 선언식)

• function 키워드로 함수를 선언한다.
• 함수의 이름이 필수다.

function g() {
  return b;
}

교재 외 함수 표현식

함수 표현식

• 함수를 변수에 할당하는 방식이다.
• 함수 이름이 없어도 된다.

const f = function () {
  return a;
};

• 함수 표현식이지만 이름을 붙이는 경우 내부에서 재귀적으로 호출이 가능하다.

const factorial = function fact(n) {
  if (n <= 1) return 1;
  return n * fact(n - 1); // 내부에서 자신의 이름을 사용하여 재귀 호출
};

console.log(factorial(5)); // 5! = 5 * 4 * 3 * 2 * 1 = 120

• 즉, 모든 함수 표현식이 익명 함수는 아니지만, 익명 함수는 보통 함수 표현식에서 많이 사용된다.
• 아래와 같은 즉시 호출 함수는 변수에 할당하지 않는 익명함수를 만들 수 있다..

(function () {
  console.log("I am anonymous!");
})();

 

나머지 매개변수와 전개 연산자(함수 호출)

API(Application Programming Interface)란

• 애플리케이션 프로그램을 만들 때 약속을 의미한다.
• API 설계자가 만든 약속을 API 사용자가 활용한다.
• 나머지 매개변수, 전개 연산자 등은 주로 API 설계자가 사용하는 기능이며, API 사용자도 이해하면 좋다.

나머지 매개변수(Rest Parameters):

• 함수를 정의할 때 매개변수 앞에 ...을 붙여서 만든다.
• 언제나 자료형은 배열이다.
• 나머지 매개변수는 일반 매개변수와 함께 사용할 수도 있지만, 항상 마지막에 위치해야 한다.

const arr = function (...list) {
console.log(list);
};

arr("apple", "banana", "mango"); // ['apple', 'banana', 'mango']

const arr2 = function (a, ...list) {
console.log(`${a}와 나머지 ${list}입니다.`);
};
arr2("apple", "banana", "mango"); // apple와 나머지 banana,mango입니다.

구버전 자바스크립트에서 가변 인자 함수 구현하기:

• 매개변수를 지정하지 않고 arguments 객체를 사용하여 나머지 매개변수처럼 구현하는 방법이 있었다.
• arguments는 함수 내에서만 사용할 수 있는 유사 배열 객체이다.
• 유사 배열 객체이기 때문에 배열 메서드를 사용할 수 없다.
• 현대에는 나머지 매개변수를 사용할 것을 권장한다.

const list = function () {
  let output = arguments;
  return output;
}

console.log(list(1, 2, 3, 4)); //  [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]

전개 연산자(Spread Operator):

• 함수를 호출할 때 배열 앞에 ...을 붙여서 사용한다.
• 이렇게 하면 배열의 요소들이 개별 인수로 전달된다.

const arr = function (a, b) {
  console.log(a, b);
};
let list = ["apple", "banana", "mango"];
arr(...list); // apple banana

구버전 자바스크립트에서 전개 연산자 구현하기:

• 과거에는 apply 메서드를 사용하여 전개 연산자를 구현했다.
• 배열 형태로 전달할 인자를 apply()에 포함하면 개별 인자로 변환된다.
• 현대에는 전개 연산자로 간단히 구현할 수 있다.

const list = function () {
  console.log.apply(null, arguments);
};
let input = [1, 2, 3, 4];
list.apply(null, input); // 1 2 3 4

 

기본 매개변수와 가독성

가독성의 중요성

• 프로그래밍에서는 성능보다 가독성이 점점 더 중요해지고 있다.
• 가독성이 좋다는 것은 코드를 쉽게 읽고 이해할 수 있으며, 안전하게 사용할 수 있다는 의미다.
• 가독성이 좋은 코드를 작성하면 다른 개발자들이 실수를 덜 하게 된다.
• 기본 매개변수, 게터/세터, 프라이빗 속성/메서드 등은 가독성을 높이기 위한 기능들이다.

과거 자바스크립트 버전의 기본 매개변수 처리

• 과거에는 기본 매개변수를 설정하기 위해 조건문이나 삼항 연산자 등을 사용했다.
• 파라미터가 undefined인 경우와 0인 경우를 구분해서 처리해야 하는 등 코드가 복잡해질 수 있었다.

const isLeapYear = function (year) {
  // year = typeof year === "undefined" ? new Date().getFullYear() : year;
  // year = year || new Date().getFullYear();

  return year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
};

console.log(isLeapYear());

기본 매개변수(default parameter)

 

• 최신 자바스크립트 버전에서는 함수 매개변수에 기본값을 설정할 수 있다.
• 이를 통해 매개변수를 입력하지 않아도 기본값이 들어가도록 할 수 있다.
• 예를 들어 윤년 계산기에서 연도 파라미터를 입력하지 않으면 현재 연도를 기본으로 계산하도록 설정 가능하다.

const isLeapYear = function (year = new Date().getFullYear()) {
  return year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
console.log(isLeapYear());

 

콜백함수

• 자바스크립트에서 함수는 하나의 값이 될 수 있다.
• 따라서 함수를 함수의 매개변수로 전달할 수 있다.
• 이 때 전달된 함수를 콜백함수라고 부른다.

const test = function (callback) {
  callback();
};

const call = function () {
  console.log("안녕하세요");
};

test(call); // 안녕하세요

배열 메서드

 

• 배열의 forEach, filter, map 메서드들은 모두 콜백함수를 매개변수로 받는다.
• 이를 통해 배열의 요소를 다양하게 처리할 수 있다.

forEach

• 매개변수로 값, 인덱스, 기준 배열을 가진다.
• 배열의 요소를 콜백함수로 전달해서 반복하는 메서드다.

const arr = ["apple", "banana", "mango", "grape"];

arr.forEach(function (value, index, array) {
  console.log(value, index, array);
});

/*
apple 0 ['apple', 'banana', 'mango', 'grape']
banana 1 ['apple', 'banana', 'mango', 'grape']
mango 2 ['apple', 'banana', 'mango', 'grape']
grape 3 ['apple', 'banana', 'mango', 'grape']
*/

filter

• 매개변수로 값, 인덱스, 기준 배열을 가진다.
• 최종 출력은 필터링된 배열이고, 필터를 통과한 요소가 없으면 빈 배열이 반환된다.
• 단, 비파괴적 처리를 하기 때문에 필터링된 배열을 사용하려면 새로운 변수에 할당하거나 기존 변수에 재할당 해야한다.

let arr = [123, 345, 234, 456];
arr = arr.filter(function (value, index, array) {
  return value % 2 === 0;
});
console.log(arr); // (2) [234, 456]

map

 

• 매개변수로 값, 인덱스, 기준 배열을 가진다.
• 기존의 배열 요소를 기반으로 새로운 배열을 만들어서 리턴하는 함수다.
• filter와 마찬가지로 비파괴적 처리로 변수 할당이 필요하다.

let arr = [123, 345, 234, 456];
arr = arr.map(function (value, index, array) {
  return value * 2;
});
console.log(arr); // [246, 690, 468, 912]

콜백함수의 장점

• 코드를 간결하게 작성할 수 있어 효율적이다.(익명함수, 화살표 함수 활용)
• 필요에 따라 매개변수의 함수를 통해 다른 결과를 만들 수 있다.

 

타이머 함수, 즉시 호출 함수(IIFE), 엄격 모드

타이머 함수

setTimeout / clearTimout함수:

• 특정 시간 후 한 번 실행되는 콜백 함수이다.
• clearTimeout를 통해 설정한 타이머를 해제할 수 있다.

const timeout = setTimeout(function () {
  console.log("setTimeout이 실행되었습니다.");
}, 2000);

clearTimeout(timeout);

setInterval / clearInterval함수:

• 특정 시간 간격으로 반복 실행되는 콜백 함수이다.
• clearInterval를 통해 설정한 타이머를 해제할 수 있다.

const intervalTime = setInterval(function () {
  console.log("setInterval이 실행되었습니다.");
}, 2000);

clearInterval(intervalTime);

• clear처리하는 함수들은 매개변수로 숫자를 넣도록 되어 있는데 이 숫자는 setTimeout과 setInterval의 리턴값이다.

즉시 호출 함수 (IIFE, Immediately Invoked Function Expression):

• 함수를 정의하자마자 바로 실행하는 방법이다.
• 변수/함수 이름 충돌을 방지할 수 있다.
• ()를 통해 각각의 스코프가 달라지기 때문에 충돌이 발생하지 않는다.

(function func() {
  console.log("I am anonymous!");
})();
(function func() {
  console.log("I am anonymous!");
})();

/* I am anonymous
I am anonymous
*/

엄격 모드(Strict Mode): 

• 자바스크립트 코드를 보다 엄격하게 검사하는 모드이다.
• 브라우저 콘솔에 입력시 변수나 상수를 선언하지 않았는데도
• 브라우저 임의로 a,b 변수를 생성해 값을 할당한다.

a = 100;
b = 200;

console.log(a + b);

• 이런 부분을 엄격하게 검사해 막아주는 기능이다.
• <script>태그를 시작할 때 코드의 첫 부분에 'use strict'를 선언하면 활성화된다.

  <script>
  "use strict"
  a = 100; b = 200; console.log(a + b);
  </script>

 IIFE 내부에서 엄격 모드를 적용하는 것이 일반적이다.

<script>
(function() {
  "use strict"
  a = 100;
  b = 200;
 console.log(a + b);
})()
</script>

 

선언적 함수와 익명 함수의 차이, 확인 문제

함수를 만드는 2가지 방법 - 선언적 함수와 익명 함수

선언적 함수:

• 전체 코드가 실행되기 전에 미리 만들어진다.

익명 함수(함수 표현식):

• 코드를 실행하면서 만들어진다.

선언적 함수와 익명적 함수의 차이

• 익명 함수는 코드 순서대로 실행되지만 선언적 함수는 코드 순서와 상관없이 실행된다.
• 이로 인해 두 함수를 섞어 사용하면 실행 순서 예측이 어려지고 여러개의 파일이 import되면 더 어려워진다.
• 따라서 일반적으로 선언적 함수는 잘 사용하지 않는다.

함수 ()

함수 = function () {
  console.log("익명함수")
}

function 함수() {
  console.log("선언적 함수")
}

함수()

> 선언적 함수
> 익명함수