[언어공부] (혼자 공부하는 자바스크립트) Chapter 5-2 함수 고급

Chapter 5 함수

Chapter 5-2 함수고급

콜백함수

자바스크립트에서 함수도 하나의 자료형이므로 매개변수로 전달할 수 있습니다.

이처럼 매개변수로 전달하는 함수를 callback 함수라고 합니다.

 

콜백함수의 예시와 그 출력입니다.

 

같은 식이지만 다른 표현의 예시입니다.

 

콜백 함수를 활용하는 함수 : forEach()

콜백함수를 활용하는 기본적인 함수는 forEach()메소드 입니다.

forEach() 메소드는 배열이 갖고 있는 함수로써 단순하게 배열 내부의 요소를 사용해서 콜백 함수를 호출합니다.

 

예시를 보겠습니다.

 

콜백 함수를 활용하는 함수 : filter()

filter()메소드도 배열이 갖고 있는 함수입니다.filter()메소드는 콜백 함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 생성하는 함수입니다.

 

예시와 그 출력을 보겠습니다.

이번엔 value 뿐만아니라 index와 array 까지 콘솔에 찍어보겠습니다.

 

콜백 함수를 활용하는 함수 : map()

map()메소드도 배열이 갖고 있는 함수입니다. map()메소드는 콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만드는 함수입니다.

 

예시를 보겠습니다.

위 두 출력값을 보면 filer와 map의 차이점을 쉽게 확인 할 수 있습니다!

 

화살표 함수

map(), filter()함수처럼 단순한 형태의 콜백 함수를 쉽게 입력하고자 화살표 함수라는

함수 생성 방법이 있습니다. 화살표 함수는 function 키워드 대신 ⇒ 화살표를 사용합니다.

위 예시를 통해 쉽게 차이를 이해 할 수 있을 것이라 생각합니다.

 

 

 

타이머 함수

특정 시간마다 혹은 특정 시간 이후에 콜백 함수를 호출할 수 있는 함수로, 시간과 관련된 처리를 할 수 있습니다.

setTimeout(함수, 시간)은 특정 시간 이후에 함수를 한 번 호출하며, setInterval(함수, 시간)은 특정 시간마다 함수를 호출합니다.

종료하고 싶을 땐 clearTimeout(타이머ID)로 setTimeout()을, clearInterval(타이머ID)로 setInterval()을 제거할 수 있습니다. 타이머 ID는 setTimeout()과 setInterval() 함수를 호출할 때 사용했던 식별자입니다.

 

 

 

함수 즉시 호출하기

신형 브라우저의 경우, 블록 혹은 함수 블록을 통한 스코프를 생성해서 변수의 충돌을 막을 수 있습니다. 하지만 인터넷 익스플로러같은 구형 브라우저에서 쓰는 var 키워드는 블록을 통해서는 불가능하고, 함수 블록을 통해서만 변수의 충돌을 막을 수 있습니다.

변수의 충돌을 막기 위해 함수를 만들자마자 즉시 호출할 수 있도록 다음과 같은 형태로 작성합니다.

 

 

엄격 모드

자바스크립트는 오류를 어느 정도 무시하고 넘어가기 때문에, 기본값을 느슨한 모드(sloppy mode)라고 부르기도 합니다. 이는 코딩하기엔 쉽지만 실수를 하기도 쉽습니다. 따라서 자바스크립트의 문법오류를 더 발생시키는 엄격모드는 실수를 줄일 수 있는 방법입니다. 간단하게 'use strict' 라는 문자열을 블록 가장 위쪽에 배치해서 사용할수 있습니다.

느슨한 모드에선 let 키워드를 사용하지 않고 변수를 선언해도 에러가 발생하지 않습니다. 이러면 오타 하나 때문에 의도에서 엇나가게 됩니다. 엄격 모드에선 선언 없이 변수 사용하는 등의 실수에 에러를 띄웁니다.

일반적으로는 엄격 모드를 사용하는 것이 좋습니다. 엄격 모드는 문서 전체에 적용할 수도 있지만, 코드 블록에만 적용할 수도 있습니다. 이를 이용해 즉시 호출 함수를 만들고, 해당 함수 블록의 가장 위쪽에서 엄격 모드를 적용하는 경우가 많습니다. 이러면 해당 함수 내부에만 엄격 모드가 적용됩니다.

엄격함의 기준은 시간에 따라 달라지므로, MDN의 Strict mode를 참고하시면 됩니다.

 

 

익명함수 VS 선언적 함수

익명 함수와 선언적 함수는 사용하는 상황이 비슷해서, 개인 혹은 팀의 선호에 맞게 사용하면 된다고 합니다. 하지만 최근에는 안전 등의 이유로 익명 함수 사용을 선호하는 추세라고 합니다.

익명 함수는 우리가 읽는 것처럼 위에서 아래의 방향으로 차례대로 코드가 실행됩니다. 반면 선언적 함수는 코드 블록을 읽어들일 때, 함수를 먼저 생성하고 이후에 코드가 실행됩니다. 즉, 코드 내에서 함수 호출을 먼저하고 그 뒤에 생성을 하더라도 프로그램은 문제 없이 실행됩니다.

코드가 실행되기 전에 선언적 함수가 먼저 생성되고, 그 다음에 익명 함수 생성이 실행되며 덮어 씁니다. 코드를 작성한 순서와 무관하게 익명 함수가 출력됩니다. 의도치 않게 덮어 쓰는 것은 매우 위험하므로, 코드의 순서대로 함수를 생성하고 실행할 수 있는 익명 함수가 선호됩니다.

같은 이름의 선언적 함수를 여러 블록에서 사용할 경우에도 문제가 된다. 블록이 나뉘어진 경우 선언적 함수의 실행 흐름을 예측하는 것이 힘들어집니다.

선언적 함수와 마찬가지로, 과거 자바스크립트의 키워드인 var는 덮어 쓰는 문제가 발생하는데 이를 방지하기 위해서 let과 const 키워드를 사용하고 있습니다.

 

 

 

 

 

 

 

 

참고도서 : 혼자공부하는 자바스크립트 (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장 - 함수