chapter 5

함수

함수

• 코드의 집합을 나타내는 자료형
• 함수의 자료형은 function
• 함수 호출
  • 함수를 사용하는 것
• 매개변수
  • 함수를 호출할 때 괄호 내부에 여러가지 자료를 넣을 때, 이러한 자료
• 리턴값
  • 함수를 호출해서 최종적으로 나오는 결과

익명 함수

• 이름이 붙어있지 않는 함수

function () { }

함수를 사용하면 좋은 점

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

선언적 함수

• 이름이 있는 함수

function 함수() { 

}

let 함수 = function () {};

매개변수

• 외부의 정보를 입력받을 수 있습니다.
• 함수를 호출할 때 괄호 안에 적는 것
• prompt() 함수를 사용할 때 매개변수로 message를 넣어야 합니다.
• prompt() 함수의 최종 결과는 문자열로 나옵니다.

리턴값

• 함수의 최종 결과
• 리턴값은 함수 내부에 return 키워드를 입력하고 뒤에 값을 넣어서 생성합니다.

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

• input 이 매개변수이고, 결과로 나오는 output이 리턴값입니다.

가변 매개변수 함수

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

나머지 매개변수

• 가변 매개 함수를 구현할 때 사용하는 매개변수

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

}

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

• 나머지 매개변수는 이름 그대로 나머지입니다.
• 다음 패턴과 같이 일반적인 매개변수와 조합해서 사용할 수 있습니다.

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

}

typeof 연산자

• 매개변수로 들어온 자료형이 배열인지 숫자인지 확인할 수 있는 연산자
• 배열에 typeof 연산자를 사용하면 object(객체)라는 결과가 나옵니다.
• 정확하게 확인 할려면 Array,.isArray() 메소드를 활용해야 합니다.

전개 연산자

• 배열을 전개해서 함수의 매개변수로 전달해주는 연산자

함수이름(...배열)

기본 매개변수

• 매개변수에 기본값을 지정하는 것
• 값이라면 무엇이든지 넣을 수 있습니다.

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

함수 고급

콜백 함수

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

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

• 콜백 함수를 활용하는 가장 기본적인 함수
• 배열이 갖고 있는 함수(메소드)로써 단순하게 배열 내부의 요소를 사용해서 콜백 함수를 호출해줍니다.

function(value, index, array){ }

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

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

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

• 배열이 갖고 있는 함수입니다.
• 콜백 함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 만드는 함수입니다.

화살표 함수

• function 키워드 대신 화살표 ( ⇒ )를 사용한다.

(매개변수) => {

}

(매개변수) => 리턴값

타이머 함수

• 특정 시간마다 또는 특정 시간 이후에 콜백 함수를 호출할 수 있는 함수
• 이 함수들의 매개변수에는 타이머 ID라는 것을 넣는데, 타이머 ID는 setTimeout() 함수와 setInterval() 함수를 호출할 때 리턴값으로 나오는 숫자입니다.

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

즉시 호출 함수

• 변수의 이름 충돌을 막기 위해서 코드를 안전하게 사용하는 방법이다.
• 익명 함수를 생성하고 곧바로 실행하는 함수
• 블럭을 사용하여 즉시 호출 함수 문제를 해결 한다.

(function () { })()

스코프

• 변수가 존재하는 범위

섀도잉

• 블록이 다른 경우 내부 변수가 외부 변수를 가리는 현상

엄격모드

• ‘use strict’ 이라는 문자열을 읽어들인 순간부터 코드를 엄격하게 검사합니다.
• 자바스크립트는 오류를 어느 정도 무시하고 넘어가는 것들이 있습니다. 그래서 편하게 코딩할 수 있지만 실수로 이어지긷조 합니다. 일반적으로 엄격 모드를 사용하는 것이 좋습니다.

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

익명 함수의 사용

• 순차적인 코드 실행에서 코드가 해당 줄을 읽을 때 생성됩니다.

선언적 함수의 사용

• 순차적인 코드 실행이 일어나기 전에 생성됩니다.
• 따라서 선언적 함수는 같은 블록이 라면 어디에서 함수를 호출해도 상관없습니다.

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

• 선언적 함수는 먼저 생성되고, 이후에 순차적인 코드 진행을 시작하면서 익명 함수를 생성합니다.
• 익명 함수와 선언적 함수 중에 안전하게 사용할 수 있는 익명 함수를 더 선호한다.

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

• 선언적 함수는 어떤 코드 블록을 읽어들일 때 먼저 생성됩니다.
• 다른 프로그래밍 언어들은 선언적 함수 형태로 함ㄴ수를 많이 사용하지만, 자바스크립트는 블록이 예상하지 못하게 나뉘는 문제 등이 발생할 수 있어 안전을 위해 익명 함수를 더 많이 사용한다.