JavaScript (함수 고급)

20081 단어 JavaScriptcallback혼공스JavaScript

2021-05-26-Javascript

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

while 반복문과 for 반복문은 2가지 모두 많이 사용되지만, 사용하는 상황이 조금씩 다르다.

while 반복문은 조건을 중심으로 반복할 때, for 반복문은 횟수를 중심으로 또는 배열 등을 중심으로 반복할 때 사용한다.

그런데 익명 함수와 선언적 함수는 사용하는 상황이 비슷하다. 기본적으로는 혼자 개발할 때 내가 편하다고 생각하는 것을 사용하고, 다같이 개발할 때는 모두가 편하다고 생각하는 것을 사용하면 된다. 다만 요즘은 많은 개발자가 안전 등의 이유로 익명 함수를 선호하는 편이다. 왜 그런지 어떤 차이가 있기에 그러는지 간단하게 작성해 보려고 한다.

익명 함수의 사용

익명 함수는 순차적인 코드 실행에서 코드가 해당 줄을 읽을 때 생성

따라서 위에서 아래로 차례대로 코드가 실행되며 noName라는 변수에 '2번쨰 익명 함수입니다.' 를 호출하는 함수가 할당된다.

// 변수 선언
let noName;

// 익명 함수 선언
noName = () => console.log("1번째 익명 함수입니다.");
noName = () => console.log("2번째 익명 함수입니다.");

// 함수 호출
noName();

실행 결과

2번째 익명 함수입니다.

선언적 함수의 사용

선언적 함수는 순차적인 코드 실행이 일어나기 전에 생성

따라서 선언적 함수는 같은 블록이라면 어디에서 함수를 호출해도 상관 없다. 선언적 함수를 생성하기 전에 함수를 호출해도 함수가 이미 생성된 상태이므로 아무 문제 없이 실행된다.

// 선언적 함수를 호출
isName();

// 선언적 함수를 2번 생성
function isName() {
  console.log(`1번째 선언적 함수이다.`);
}

function isName() {
  console.log(`2번째 선언적 함수이다.`);
}

실행 결과

2번째 선언적 함수이다.

선언적 함수도 입력한 순서대로 생성되거 같은 이름이라면 덮어쓰므로 코드를 실행했을 때 위와 같은 결과를 볼 수 있다.

선언적 함수와 익명 함수의 조합

2가지 상황을 조합해서 코드를 작성해 보면 

// 익명 함수를 2번 생성

func = () => console.log("익명 함수입니다.");

function func() {
  console.log("선언적 함수입니다.");
}

// 함수 호출
func();

실행 결과

익명 함수입니다.

선언적 함수는 먼저 생성되고, 이후에 순차적인 코들르 진행 을 시작하면서 익명 함수를 생성한다. 위와 같은 코들르 작성하면 코드의 순서와는 관계 없이 '익명 함수입니다.'라는 글자를 출력한다.

※ 익명 함수는 코드를 읽을 때와 같은 순서로 함수가 선언되지만, 선언적 함수는 코드를 읽는 순서와 다른 순서로 함수가 선언된다. 함수를 같은 이름을 같은 이름으로 덮어쓰는 것은 굉장히 위험한 일이다. 그래서 안전하게 사용할 수 있는 익명 함수를 더 선호하는 것이다.

블록이 다른 경우에 선언적 함수의 사용

선언적 함수는 어떤 코드 블록(script 태그 또는 함수 등으로 구분되는 공간)을 읽어들이 때 먼저 생성된다. 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    func();

    function func() {
      console.log('1번째 선언적 함수입니다.');
    }
  </script>
</head>
<body>
  <script>
    function func() {
      console.log('2번째 선언적 함수입니다.');
    }
  </script>
</body>
<script>
  func();
</script>
</html>

실행 결과

1번째 선언적 함수입니다.
2번째 선언적 함수입니다.

이처럼 블록이 나뉘어진 경우에는 선언적 함수의 실행 흐름을 예측하는 것이 훨씬 힘들어진다.

예상하지 못하게 나뉘는 문제 등이 발생할 수 있어 안전을 휘해 익명 함수를 더 많이 사용하는 편이다.

핵심 포인트

  • 콜백 함수란 매개변수로 전달하는 함수를 의미

  • 화살표 함수란 익명 함수를 간단하게 사용하기 위한 목적으로 만들어진 함수 생성 문법

    () ⇒ {} 형태로 함수를 만들고, 리턴값만을 가지는 함수라면 () ⇒ 값 형태로 사용할 수 있음

  • 즉시 호출 함수란 변수의 이름 충돌을 막기 위해서 코드를 안전하게 사용하는 방법

  • 자바스크립트의 문법 요류를 더 발생시키는 엄격 모드는 실수를 줄일 수 있는 방법이다. 'use strict'라는 문자열을 블록 가장 위쪽에 배치해서 사용할 수 있음

확인 문제

  • filter 함수의 콜백 함수 부분을 채워서
    • 홀추만 추출
    • 100 이하의 수만 추출
    • 5로 나눈 나머지가 0인 수만 추출
let numbers = [273, 25, 75, 52, 103, 32, 57, 24, 76];
numbers = numbers  
  .filter((value) => value % 2 === 1)  
  .filter((value) => value < 100)  
  .filter((value) => value % 5 === 0);
console.log(numbers);

실행 결과

[ 25, 75 ]
  • 반복문 부분에서 살펴보았던 다음과 같은 코드를 배열의 forEach 메소드를 사용하는 형태로 변경해보기
const array = ['사과', '배', '귤', '바나나']
console.log('# for in 반복문')
for (const i in array) {	
  console.log(i)
}
console.log('# for of 반복문')
for (const i of array) {	
  console.log(i)
}

실행 결과

# for in 반복문
0
1
2
3
# for of 반복문
사과
배
귤
바나나
const array = ["사과", "배", "귤", "바나나"];

console.log("# for in 반복문");
array.forEach((arr, i) => console.log(i));

console.log("# for of 반복문");
array.forEach((arr, i) => console.log(arr));
spring boot 필터와 차단기 데모 구현
어떻게python 프로젝트를 완벽하게 구축합니까

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage