함수
익명 함수
•
함수는 코드의 집합을 나타내는 자료형
function(){}
JavaScript
복사
→ 함수를 변수처럼 다룰 수 있다 (First Class Function)
예시
<script>
// 변수를 생성합니다.
const 함수 = function() {
console.log('함수 내부의 코드입니다 ..1')
console.log('함수 내부의 코드입니다 ..1')
console.log('함수 내부의 코드입니다 ..1')
console.log('')
}
// 함수 호출
함수() -> 우리가 만든 함수도 기존의 alert(), prompt() 함수처럼 호출할 수 있다.
함수()
// 출력
console.log(typeof 함수) -> 함수의 자료형 확인
console.log(함수) -> 함수 자체도 단순한 자료이므로 출력 가능
</script>
JavaScript
복사
선언적 함수
•
선언적 함수는 이름을 붙여 생성
function 함수() {
}
JavaScript
복사
•
선언적 함수는 다음 코드와 같은 기능을 수행
let 함수 = function(){};
JavaScript
복사
•
선언적 함수 선언
<script>
// 변수를 생성합니다.
const 함수 = function() {
console.log('함수 내부의 코드입니다 ..1')
console.log('함수 내부의 코드입니다 ..1')
console.log('함수 내부의 코드입니다 ..1')
console.log('')
}
// 함수 호출
함수() -> 우리가 만든 함수도 기존의 alert(), prompt() 함수처럼 호출할 수 있다.
함수()
// 출력
console.log(typeof 함수) -> 함수의 자료형 확인
console.log(함수) -> 함수 자체도 단순한 자료이므로 출력 가능
</script>
JavaScript
복사
매개변수와 리턴값
•
prompt() 함수의 매개변수와 리턴값
function prompt(message?:string, _default?:string):string
//prompt()
JavaScript
복사
→ JS는 타입을 적지 않아도 동작 (장점이자 단점) → 그래서 요즘은 typeScript 사용
•
사용자 정의 함수의 매개변수와 리턴값
function 함수():void
// 함수()
JavaScript
복사
•
매개변수와 리턴값을 갖는 함수
function 함수 (매개변수, 매개변수, 매개변수) {
문장
문장
return 리턴값
}
JavaScript
복사
<script>
// 함수 선언
function f(x) {
return x * x
}
// 함수 호출
console.log(f(3))
</script>
JavaScript
복사
예제) 윤년인지 아닌지
<script>
function isLeapYear(year) {
return (year % 4 === 0) && (year % 100 !== 0) || (year % 400 === 0)
}
console.log('2020년은 윤년일까? === ${isLeapYear(2020)}')
console.log('2021년은 윤년일까? === ${isLeapYear(2021)}')
console.log('2022년은 윤년일까? === ${isLeapYear(2022)}')
</script>
JavaScript
복사
나머지 매개변수
•
가변 매개변수 함수
◦
호출할 때 매개변수의 개수가 고정적이지 않은 함수
◦
JS에서 이러한 함수를 구현할 때는 나머지 매개변수 (rest parameter) 라는 특이한 형태의 문법 사용
function 함수 이름(...나머지 매개변수) {}
JavaScript
복사
•
나머지 매개변수를 사용한 배열 만들기
<script>
function sample(...items) {
console.log(items)
}
sample(1, 2)
sample(1, 2, 3)
sample(1, 2, 3, 4)
</script>
JavaScript
복사
•
나머지 매개변수와 일반 매개변수 조합하기
function 함수 이름(매개변수, 매개변수, ...나머지 매개변수){}
JavaScript
복사
•
Array.isArray() 메소드
◦
매개변수로 들어온 자료형이 배열인지 숫자인지 확인
•
전개 연산자
◦
배열을 전개해서 함수의 매개변수로 전달
◦
배열의 값들을 하나하나씩 원소값들을 전개해서 들어온다
•
기본 매개변수
◦
여러 번 반복 입력되는 매개변수에 기본값을 지정하여 사용
▪
기본 매개변수는 오른쪽 매개변수에 사용
함수 이름(매개변수, 매개변수=기본값, 매개변수=기본값)
JavaScript
복사
•
가변 매개변수 함수
◦
arguments를 사용한 가변 매개변수 함수
콜백 함수
•
JS는 함수도 하나의 자료형이므로, 매개변수로 전달할 수 있는데, 이렇게 매개변수로 전달하는 콜백 함수
◦
매개변수로 전달한다는 것? → 함수가 함수 자체를 다른 함수에 넘겨서 내부에서 호출할 수 있게
<script>
function callThreeTimes(callback) {
for (let i = 0; i < 3; i++) {
callback(i) -> callback 이라는 매개변수는 함수이므로 호출할 수 있음
}
}
function print(i) {
console.log('${i}번째 함수호출')
}
// 함수 호출
callThreeTimes(print)
</script>
JavaScript
복사
•
익명함수
<script>
function callThreeTimes(callback) {
for (let i = 0; i < 3; i++) {
callback(i) -> callback 이라는 매개변수는 함수이므로 호출할 수 있음
}
}
// 함수 호출
callThreeTimes(function(i) {
console.log('${i}번째 함수호출') -> 익명 함수
})
</script>
JavaScript
복사
→ 콜백함수는 익명함수로 많이 사용
•
다른 곳에서도 사용 가능
•
forEach()
◦
배열이 갖고 있는 함수로써 단순하게 배열 내부의 요소를 사용해서 콜백 함수를 호출
function (value, index, array) {}
JavaScript
복사
<script>
const nums = [273, 53, 103, 32, 57]
//매개변수로 value, index, array를 갖는 콜백 함수 사용
nums.forEach(function (value, index, array) {
console.log('${index}번째 요소 : ${value}')
}
</script>
JavaScript
복사
•
map()
◦
콜백함수에서 리턴한 값들을 기반으로 새로운 배열을 만드는 함수
<script>
const nums = [273, 53, 103, 32, 57]
nums = nums.map(function (value, index, array) {
return value * value
})
nums.forEach(console.log)
-> 매개변수로 console.log 메소드 자체를 넘김
</script>
JavaScript
복사
•
filter()
◦
콜백함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 만드는 함수
<script>
const nums = [0,1,2,3,4,5]
const evenNums = nums.filter(function(value) {
return value % 2 === 0
})
console.log('원래배열 : ${numbs}')
console.log('짝수만 추출: ${evenNums}')
</script>
JavaScript
복사
•
화살표 함수
◦
function 키워드 대신 화살표(⇒)를 사용
◦
익명함수를 편하게 사용할 때 사용
(매개변수) => {
} 불 표현식 || 불 표현식이 거짓일 때 실행할 문장
JavaScript
복사
(매개변수) => 리턴값
JavaScript
복사
<script>
let nums = [273, 53, 103, 32, 57]
/* 배열의 메소드를 연속적으로 사용 */
nums
.filter((value) => value % 2 === 0)
.map((value) => value * value)
.forEach((value) => { -> 메소드 체이닝
console.log(value)
})
</script>
JavaScript
복사
•
타이밍 함수
◦
특정 시간마다 또는 특정 시간 이후에 콜백 함수를 호출할 수 있는 타이머 함수
▪
setTimeout (함수, 시간)
•
특정 시간 후에 함수를 한 번 호출
▪
setInterval (함수, 시간)
•
특정 시간마다 함수를 호출
▪
clearTimeout(타이머_ID)
•
seTImeout() 함수로 설정한 타이머를 제거
▪
clearInterval(타이머_ID)
•
setInterval() 함수로 설정한 타이머를 제거
•
즉시 호출 함수
◦
함수 즉시 호출하기
(function(){}) ()
JavaScript
복사
<!-- 다른 곳에서 가져온 JS 코드 -->
<script>
let pi = 3.14
console.log('파이값은 ${pi}입니다.')
</script>
<!-- 내가 만든 JS 코드 -->
<script>
let pi = 3.141592
console.log('파이값은 ${pi}입니다.')
</script>
JavaScript
복사
→ 이름 충돌 문제 발생
해결 방법
→ 함수 블록을 사용한 스코프 생성
<!-- 다른 곳에서 가져온 JS 코드 -->
<script>
let pi = 3.14
console.log('파이값은 ${pi}입니다.')
<!-- 블록을 사용한 스코프 생성 -->
{
let pi = 3.141592
console.log('파이값은 ${pi}입니다.')
}
console.log('파이값은 ${pi}입니다.')
// 함수 블록을 사용한 스코프 생성
function sample() {
let pi = 3.141592
console.log('파이값은 ${pi}입니다.')
}
sample()
console.log('파이값은 ${pi}입니다.')
</script>
JavaScript
복사
→ 블록과 함수 블록을 사용해 이름 충돌 문제 해결하기
•
블록을 사용하는 방법과 함수 블록을 사용해 변수 충돌을 막는 방법 모두 최신 JS를 지원하는 웹 브라우저를 사용할 수 있음
•
하지만 구 버전의 JS에서 변수를 선언할 때 사용하던 var 키워드는, 함수 블록을 사용하는 경우에만 변수 충돌을 막을 수 있다
<!-- 다른 곳에서 가져온 JS 코드 -->
<script>
let pi = 3.14
console.log('파이값은 ${pi}입니다.')
</script>
<!-- 내가 만든 JS 코드 -->
<script>
(function() {
let pi = 3.141592
console.log('파이값은 ${pi}입니다.')
})()
</script>
<!-- 즉시 호출 함수를 사용해 변수 이름 충돌 문제를 해결 -->
JavaScript
복사
•
엄격 모드
◦
‘use strict’ 라는 문자열
◦
엄격모드기능으로 JS는 이러한 문자열을 읽어들인 순간부터 코드를 엄격하게 검사
<script>
'use strict'
문장
문장
</script>
JavaScript
복사
◦
선언 없이 변수 사용
<script>
data = 10
console.log(data)
</script>
JavaScript
복사
◦
엄격모드에서는 이러한 코드 사용X
◦
변수를 let 키워드 등으로 선언하지 않았는데 사용했다고 곧바로 오류가 발생
◦
초기 JS는 간단하게 쓸 용도로 만들어짐 → 그러나 점점 다른 용도로 쓰이면서 코드 길어짐
▪
→ 디버깅 어려워짐(무분별하게 사용하는 코드)
<script>
(function() {
'use strict'
문장
문장
})()
</script>
JavaScript
복사
익명 함수와 선언적 함수의 차이
•
익명 함수의 사용
◦
익명 함수는 순차적인 코드 실행에서 코드가 해당 줄을 읽을 때 생성됨
•
익명 함수 호출
<scirpt>
let 익명함수
익명함수 = function() {
console.log('1st 익명함수')
}
익명함수 = funciton() {
console.log('2nd 익명함수')
}
익명함수()
</script>
// 출력 : 2nd 익명함수
JavaScript
복사
•
선언적 함수의 사용
◦
선언적 함수는 순차적인 코드 실행이 일어나기 전에 생성됨
<scirpt>
선언적 함수() -> 선언적 함수를 생성하는 코드 앞에 입력
function 선언적함수() {
console.log('1st 선언적 함수')
}
function 선언적함수() {
console.log('2nd 선언적 함수')
}
</script>
-> 쭉 다 살펴본다 (처음부터 끝까지)
// 출력 : 2nd 선언적 함수
JavaScript
복사
차이 : 생성하는 위치 다름
•
과거 JS는 var 라는 키워드 사용해서 변수 선언
•
현대의 JS는 let 키워드와 const 키워드를 사용해서 변수와 상수를 선언
•
이러한 키워드들은 위험을 원천적으로 차단하기 위해서 오류를 발생
•
선언적 함수와 익명 함수의 조합
◦
선언적 함수는 먼저 생성되고,
◦
이후에 순차적인 코드 진행을 시작하면서
◦
익명함수를 생성
<scirpt>
let 익명함수
익명함수 = function() {
console.log('익명함수')
}
function 선언적함수() {
console.log('선언적 함수')
}
함수()
</script>
// 출력 : 익명함수
JavaScript
복사
→ 따라서 코드의 순서와 관계없이 익명함수 출력
•
블록이 다른 경우에 선언적 함수의 사용
◦
선언적 함수는 어떤 코드 블록(script 태그 또는 함수 등으로 구분되는 공간) 읽어들일 때 먼저 생성
// 블록 1
<scirpt>
선언적 함수()
function 선언적함수() {
console.log('1st 선언적 함수')
}
</script>
// 블록 2
<scirpt>
function 선언적함수() {
console.log('2nd 선언적 함수')
}
</script>
// 블록 3
<scirpt>
선언적 함수()
</script>
JavaScript
복사
→ 보통 익명함수 많이 사용
정리
•
콜백 함수란 매개변수로 전달하는 함수
•
화살표 함수란 익명 함수를 간단하게 사용하기 위한 목적으로 만들어진 함수 생성 문법
◦
() ⇒ {} 형태로 함수 만들고, 리턴값만을 가지는 함수라면,
◦
() ⇒ 값 형태로 사용할 수 있음
•
즉시 호출 함수란 변수의 이름 충돌을 막기 위해서 코드를 안전하게 사용하는 방법
•
JS의 문법 오류를 더 발생시키는 엄격 모드는 실수를 줄일 수 있는 방법
◦
‘use strict’ 이라는 문자열을 블록 가장 위쪽에 배치하여 사용