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

CHAPTER 05

MISU 미수 2024. 1. 22. 16:15

🩷 05-1 함수의 기본 형태

🩵 익명 함수

함수 : 코드의 집합을 나타내는 자료형

function () { }

 

함수 사용의 장점

  • 반복되는 코드를 한 번만 정의해놓고 필요할 때마다 호출하므로 반복 작업 피할 수 있음
  • 긴 프로그램을 기능별로 나눠 여러 함수로 나누어 작성하면 모듈화로 전체 코드의 가독성 좋아짐
  • 기능별 (함수별) 로 수정이 가능하므로 유지보수가 쉬움

function : 함수의 자료형

 

익명 함수 (anonymous function) : 이름이 붙어있지 않은 함수

 

🩵 선언적 함수

선언적 함수 : 이름이 있는 함수

let 함수 = function() { };

 

  • 함수를 출력했을 때 함수의 이름이 붙어 있음!!

 

🩵 매개변수와 리턴값

매개변수 : 함수를 호출할 때 괄호 안에 적는 것

리턴값 : 함수의 최종 결과

 

  • 필요한 경우에만 매개변수와 리턴값을 사용함!!

 

function 함수 (매개변수, 매개변수, 매개변수) {
  문장
  문장
  return 리턴값
}

 

 

 

🩵 나머지 매개변수

가변 매개변수 함수 : 호출할 때 매개변수의 개수가 고정적이지 않은 함수

나머지 매개변수 (rest parameter) : 가변 매개변수 함수를 구현할 때 사용하는 특이한 형태의 문법

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

 

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

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

 

🤍 전개 연산자

전개 연산자 (spread operator) : 배열을 전개해서 함수의 매개변수로 전달해 줌

함수 이름(...배열)

 

🩵 기본 매개변수

기본 매개변수 : 매개변수에 기본값을 지정할 때 사용하는 매개변수

함수 이름(매개변수, 매개변수=기본값, 매개변수=기본값)

 

 

 

🩷 05-2 함수 고급

🩵 콜백 함수

콜백 (callback) 함수 : 매개변수로 전달하는 함수

 

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

forEach( ) : 콜백 함수를 활용하는 가장 기본적인 함수

function (value, index, array) { }

 

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

map( ) : 콜백 함수에서 리턴한 값들을 기반으로 새로운 배열은 만드는 함수

 

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

filter( ) : 콜백 함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 만드는 함수

 

🩵 화살표 함수

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

function 키워드 대신 화살표 (=>) 를 사용

(매개변수) => {

}
(매개변수) => 리턴값

 

메소드 체이닝 (method chaining) : 어떤 메소드가 리턴하는 값을 기반으로 해서 함수를 줄줄이 사용하는 것

 

🩵 타이머 함수

타이머 (timer) 함수 : 특정 시간마다 또는 특정 시간 이후에 콜백 함수를 호출할 수 있는 함수

 

시간 관련된 처리할 때 사용하는 함수

함수이름 설명
setTimeout (함수, 시간) 특정 시간 후에 함수를 한 번 호출
setInterval (함수, 시간) 특정 시간마다 함수를 호출 

 

타이머를 종료하고 싶을 때 사용하는 함수

함수이름 설명
clearTimeout (타이머_ID) setTimeout( ) 함수로 설정한 타이머를 제거
clearInterval (타이머_ID) setInterval( ) 함수로 설정한 타이머를 제거

 

 

🩷 좀 더 알아보기

🩵 스코프

스코프 (scope) : 변수가 존재하는 범위

  • 전역 스코프 : 코드 어디에서든지 참조 가능
  • 지역 스코프 : 범위 내 자신과 하위 함수에서만 참조 가능

🩵 섀도잉

섀도잉 (shadowing) : 블록이 다른 경우 내부 변수가 외부 변수를 가리는 현상 

 

🩵 즉시 호출 함수

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

(function () { }) ( )

 

🩵 엄격 모드

엄격 모드 (strict mode) : 자바스크립트는 문자열을 읽어들인 순간부터 코드를 엄격하게 검사

'use strict' 라는 문자열을 블록 맨 위쪽에 배치하여 사용

<script>
  (function () {
  'use strict'
  문장
  문장
  })()
</script>

 

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

while 반복문 : 조건을 중심으로 반복할 때

for 반복문 : 횟수를 중심으로 또는 배열 등을 중심으로 반복할 때

 

  • 익명 함수의 사용
    • 순차적인 코드 실행에서 코드가 해당 줄을 읽을 때 생성됨
  • 선언적 함수의 사용
    • 순차적인 코드 실행이 일어나기 전에 생성됨
    • 같은 블록이라면 어디에서 함수를 호출해도 상관없음
  • 선언적 함수와 익명 함수의 조합
    • 선언적 함수가 먼저 생성되고, 순차적인 코드 진행을 시작하면서 익명 함수 생성함
  • 블록이 다른 경우에 선언적 함수의 사용
    • 어떤 코드 블록 (script 태그 또는 함수 등으로 구분되는 공간) 을 읽어들일 때 먼저 생성됨 

⭐ 한 가지로 통일해서 사용하는 것이 오류의 위험을 줄일 수 있고, 통일한다면 익명 함수로 통일해서 사용하는 것이 안전을 위해서 더 편한 선택임

저작자표시 비영리 변경금지