함수부분은 보면 볼 수록 새로워서 여러번 공부한다.... ㅠㅠ
함수의 기본용어
함수를 호출하다
함수를 사용하는 것과 같은 의미
함수를 호출할 때 넣는 자료 : 매개자료
함수를 호출해서 최종적으로 나오는 결과 : 리턴값
함수
중괄호를 사용해서 코드의 집합을 나타내는 자료형
반복되는 코드를 한번 정의하고 필요할 때마다 호출해서 작업할 수 있다
긴 프로그램을 기능별로 여러 함수로 나눠서 모듈화로 작성한다
- 전체 코드의 가독성이 좋아진다
- 기능별(함수별)로 수정이 가능해서 유지보수가 쉽다
함수의 자료형 function
익명함수 : 이름이 붙여있지 않은 함수
let 함수 = function() { };선언적 함수 : 이름이 붙여진 함수
prompt() 함수를 호출할 때에는 매개변수로 message를 넣어야 하고
리턴값으로는 string이 나온다
모든 함수에 매개변수와 리턴값을 사용하는 것이 아니라 필요할 때만 사용한다
function 함수명() {
실행할 코드
실행할 코드
return 리턴값
}true, false로 리턴되는 함수이름을 지을 때에는 isOO로 한다
a부터 b까지의 범위를 지정하면 범위 안에 있는 숫자를 모두 더한다
function sumAll(a, b) {
let output = 0 // 초깃값 설정
for (let i = a; i <= b; i++) {
output += i // output = output + i
}
return output // return값
}최솟값을 구하는 함수
function min(array) {
let output = array[0] // 변수 output을 배열의 첫번째 요소로 초깃값 설정
for (const item of array) { // 배열 전체의 아이템을 반복
if (output > item) { // if문 전체 : output보다 작은 값이 있는지 확인하고
output = item // 만약 작다면 작은값을 output으로 변경한다
}
}
return output
}처음에는 당연히 어려운게 맞는거고
이러한 자바스크립트 문제를 외운다는 생각으로 반복하자!!
가변 매개변수 함수
함수를 호출할 때 매개변수의 개수가 고정적이지 않은 함수
매개변수 앞에 마침효 3개를 입력하면 매개변수가 배열로 들어온다
function 함수명(...가변 매개변수) { }사용예시
function min(...items) {
// 매개변수 item은 배열처럼 사용한다
let output = items[0] // 초깃값 먼저 설정
for (const item of items) {// 배열 전체 요소 반복
if (output > item) {
output = item
}
}
return output
}가변 매개변수와 일반 매개변수 조합하기
function 함수명(매개변수, 매개변수, ...가변매개변수) { }전개연산자
배열을 전개해서 함수의 배개변수로 전달한다
배열앞에 마침표 3개를 붙이는 형태를 사용한다
함수를 호출할 때 매개변수로 전개 연산자를 사용한다
함수명(...배열)전개 연산자를 사용해서 매개변수를 전달하고,
전달받은 매개변수를 단순하게 가변 매개변수로 출력한다면
전개연산자를 사용하지 않으면 배열이 매개변수로 들어오고
전개연산자를 사용하면 숫자 하나하나가 전개되어 매개변수로 들어왔다
전개 : 열리어 나타난다, 시작하여 벌인다
// 단순하게 매개변수를 모두 출력하는 함수
function sample(...items) {
console.log(items)
}// 전개 연산자의 사용여부 확인하기
const array = [1, 2, 3, 4]
console.log('==전개 연산자 사용하지 않은경우==')
sample(array) // Array(4) : 4개의 요소가 있는 배열이 들어왔다
console.log('==전개 연산자 사용한 경우==')
sample(...array) // [1, 2, 3, 4] : 요소 하나하나가 숫자로 들어온다기본 매개변수 212p
함수의 매개변수로 항상 비슷한 값을 입력하는 경우
매개변수에 기본값을 지정하는 기본 매개변수를 사용한다
이때 기본 매개변수는 오른쪽 매개변수에 사용한다
함수 이름(매개변수, 매개변수=기본값, 매개변수=기본값)콜백함수
자바스크립트에서 함수도 하나의 자료형이라서 매개변수로 전달할 수 있다
이러한 배개변수로 전달되는 함수를 콜백함수라고 한다
function callThreeTimes (callback) {
for (let i = 0; i < 3; i++) {
callback(i)
}
}
function print(i) {
console.log(`${i}번째 함수 호출`)
}
// 함수호출
callThreeTimes(print)callThreeTimes() 함수는 함수를 매개변수로 받아 해당 함수를 3번 호출한다
callThreeTimes() 함수의 callback 매개변수에 print() 함수를 전달했다
callThreeTimes() 함수 내부에서는 callback(i) 형태로 함수를 호출한다
따라서 매개변수로 전달했던 print() 함수가 print(0) print(1) print(2) 로 차례대로 호출되어 실행결과와 같은 결과를 낸다
매개변수를 통해 함수를 받고 그 함수를 통해 결과값을 호출한다
// 콜백함수 : 익명함수 사용하기
function claaThreeTimes(callback) {
for (let i = 0; i < 3;i++) {
callback(i)
}
}
callThreeTimes(function(i) {
console.log(`${i}번째 함수 호출`)
})자바스크립트가 기본적으로 제공하는 함수 중에서도 콜백 함수를 활용하는 함수가 많다
콜백함수를 활용하는 함수 forEach()
콜백함수를 활용하는 가장 기본적인 함수인데
함수가 하나의 데이터로 사용되는거라 함수라 안하고 메소드 라 부르게 된다
forEach() 메소드는 배열이 갖고 있는 메소드로써
단순하게 배열 내부의 요소를 사용해서 콜백함수를 호출한다
배열이 갖고있는 메소드 중에서 콜백함수를 활용하는 메소드는
다음과 같은 형태의 콜백함수를 사용한다
function(value, index, array) { }보통은 value만 활용하므로 value만 매개변수로 넣는다
화살표함수 225p
타이머함수 226p
