JavaScript(5)

✅함수 선언 형태

선언적 함수(옛날 사용 방식)

function f (매개변수, 매개변수) {
	return 리턴값
}

 

익명 함수

const f = function(매개변수, 매개변수) {
	return 리턴값
}

 

프로시저 형태의 함수

매개변수를 갖지않는 함수

const f = function() {
	consol.log('안녕하세요 + ${x}')
	consol.log('안녕하세요 + ${x}')
	consol.log('안녕하세요 + ${x}')
}

 

수학적 함수

매개변수가 있는 함수

const f = function(x) {
		return x + 5
}

 

✅API (Application Programming Interface)

애플리케이션 프로그램을 만들때의 약속

 

✅나머지 매개변수

• API 에 많이 사용되므로 형태를 알아두는것이 중요
• 매개변수에 ‘…매개변수’라고 입력
• … : 전개연산자
• 배열의 형태로 리턴됨

const 함수 = function(...매개변수) {
	consol.log(매개변수)
}

 

나머지 매개변수 기본형태

const 함수 = function(...매개변수) {
	consol.log(매개변수)
}
함수()        // []
함수(1)       // [1]
함수(1,2)     // (2) [1, 2]
함수(1,2,3)   // (3) [1, 2, 3]
함수(1,2,3,4) // (4) [1, 2, 3, 4]

 

일반적인 매개변수와 함께 사용되는 나머지 매개변수

• 일반 매개변수 + 나머지 매개변수 (O)
• 나머지 매개변수 + 일반 매개변수 (X)
• →남은매개변수들이 들어오는것이기 때문에 일반적인 매개변수를 뒤에 둘 수 없음

const 함수 = function(a,b,...매개변수) {
	consol.log(a,b,매개변수)
}
함수()        // undefined undefined > []
함수(1)       // 1 undefined > []
함수(1,2)     // 1 2 > []
함수(1,2,3)   // 1 2 > (1) [3]
함수(1,2,3,4) // 1 2 > (2) [3, 4]

 

✅전개 연산자

함수를 호출할 때 사용

const a = [1,2,3]
함수(a[0], a[1], a[2])
함수(...a) // 위의 문장과 같은 결과값 도출

사용 예 → 배열안의 숫자중 최소값 또는 최대값 찾기

 

✅화살표 함수

본문이 한줄 이상일 때

• 중괄호를 사용해야함
• 중괄호를 사용했다면 return이 필요한 함수의 경우 지시자를 사용해야함

let sum = (a, b) => {  // 중괄호는 본문 여러 줄로 구성되어 있음을 알려줍니다.
  let result = a + b;
  return result; // 중괄호를 사용했다면, return 지시자로 결괏값을 반환해주어야 합니다.
};

alert( sum(1, 2) ); // 3

 

본문이 한줄일 때

• 인수를 감싸는 괄호를 생략할 수 있음
• return이 필요한 함수의 경우에도 return 생략 가능

let func = (arg1, arg2, ...argN) => expression

 

✅콜백함수

매개변수로 전달하는 함수

const test = function (a) {
  console.log(a)
}

const hello = function () {
  console.log("안녕하세요")
)
test(hello)

[출력]
f () {
  console.log("안녕하세요")
}

const test = function (콜백함수) {
  콜백함수()
}

const hello = function () {
  console.log("안녕하세요")
)
test(hello) //콜백함수 -> hello()

[출력]
안녕하세요  // 매개변수로 함수가 들어갔기 때문에 출력됨

const test = function (배열, 콜백함수) {
  for (const 값 of 배열) {		
    콜백함수(값)
  }
}

const arr = [52, 273, 103, 32]
const hello = function (콜백함수의_매개변수) {
  console.log(`${콜백함수의_매개변수)번째 안녕하세요`)
}
test(arr, hello)

const test = function (배열, 콜백함수) {
  for (const 값 of 배열) {		
    콜백함수(값)
  }
}

test([52, 273, 103, 32], function (콜백함수의_매개변수) {
  console.log(`${콜백함수의_매개변수)번째 안녕하세요`)
})

 

✅콜백함수를 이용하는 메소드, 함수

forEach(콜백함수) 메소드

배열을 순회하면서 인자로 전달한 함수를 호출하는 반복문

const arr = [10, 20, 30, 40, 50]
const test = function(value, index, array) {
		console.log(value, index, array)
}
arr.forEach(test)

[결과]
10 0 (5)[10, 20, 30, 40, 50]
20 1 (5)[10, 20, 30, 40, 50]
30 2 (5)[10, 20, 30, 40, 50]
40 3 (5)[10, 20, 30, 40, 50]
50 4 (5)[10, 20, 30, 40, 50]

arr.forEach(function(value, index, array) {
		console.log(value, index, array)
})

arr.forEach((value, index, array) => {
		consol.log(value, index, array)
})

 

filter(콜백함수) 메소드

기존에서 특정 조건을 만족하는 값을 추출하여 새로운 배열을 만들때 사용

boolean타입 리턴 함수를 콜백함수로 받음

true로 판단되는 요소들만 모아서 배열로 리턴

let arr = [12, 13, 14, 15, 16]
let test = function(value, index, array) {
		console.log(`배열 ${array}에서 ${index}번째 요소 ${value}를 추출`) 
		return true
}
arr.filter(test)

[결과]
배열 12,13,14,15,16에서 0번째 요소 12를 추출
배열 12,13,14,15,16에서 1번째 요소 13를 추출
배열 12,13,14,15,16에서 2번째 요소 14를 추출
배열 12,13,14,15,16에서 3번째 요소 15를 추출
배열 12,13,14,15,16에서 4번째 요소 16를 추출

//-----------------------------------------------------------

test = function(value) { //index, array 생략
		return false
}
arr.filter(test)

[결과]
[]

arr.filter(function(value) {
		return value % 2 ===0
})

[결과]
(3) [12, 14, 16]

arr.filter((value) => {
		return value % 2 ===0
})

arr.filter((value) => value % 2 ===0 )  // 위, 아래 같은문장

 

map(콜백함수) 메소드

기존 함수의 요소값을 변경하여 새로운 함수를 만들때 사용

let arr = [12, 13, 14, 15, 16]
let test = function(value) { // index, array 생략
		return value * 10
}
arr.map(test)

 

setTimeout(콜백함수, 밀리초단위) 함수

특정한 시간(밀리초) 후에 한번 출력

setTimeout(function () {
		console.log("setTimeout 함수입니다!"
}, 1000)

 

setInterval(콜백함수, 밀리초단위) 함수

특정한 시간마다 반복출력

setInerval(function () {
		console.log("setTimeout 함수입니다!"
}, 1000)

 

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

실행 흐름이 복잡해 질 수있으므로 선언적 함수보단 익명함수를 사용해야함

 

익명 함수

실행될 때 의미를 갖는 함수?

위에서 아래로 차례대로 실행됨

익명 함수를 먼저 작성 후 함수 호출을 해야 실행됨 (작성 순서가 바뀌면 호출되지 않음)

실행되면 메모리에 올라간다? 객체??

let f = function() {
		console.log('A 함수 입니다.')
}
f = function() {
		console.log('B 함수 입니다.')
}
f = function() {
		console.log('C 함수 입니다.')
}

f()
[출력]
> C 함수 입니다.

 

선언적 함수

선언적 함수를 사용하면 함수 호출이 먼저와도 실행 가능 (작성 순서 상관없이 호출 가능)

메모리에 먼저 올린 후 실행된다? static??

f()

function f () {
		console.log('A 함수 입니다.')
}
function f () {
		console.log('B 함수 입니다.')
}
function f () {
		console.log('C 함수 입니다.')
}

[출력]
C 함수 입니다.

 

호출 순서

f() // 1

f = function() { // 4
		console.log('익명 함수 입니다.')
}

function f () { // 2
		console.log('선언적 함수 입니다.')
}

f() // 3

<script>
f() // 1 오류
f = function() {
		console.log('익명 함수 입니다.')
}
</script>

<script>
function f () { // 2 선언됨
		console.log('선언적 함수 입니다.')
}
f() // 3 선언적 함수 실행됨
</script>

<script>
f() // 2 선언적 함수 실행됨
function f () // 1 선언됨
		console.log('선언적 함수 입니다.')
}
</script>

<script>
f() // 3 선언적 함수 실행됨
f = function() {
		console.log('익명 함수 입니다.')
}
</script>