혼자 공부하는 자바스크립트 5장 - 함수

1. 함수

- 함수 : 코드의 집합

- 함수 호출 : 함수를 사용한다.

- 매개변수 : 함수 호출시 괄호 내부에 넣는 여러가지 자료

- 리턴값 : 함수를 호출해서 최정적으로 나오는 결과

 

2. 함수를 사용하면 좋은 점

- 반복되는 코드를 한 번만 정의해놓고 사용이 가능 -> 반복 작업을 피함.

- 긴 프로그램을 기능별로 나눌수 있음 -> 전체 코드의 가독성이 높아짐.

- 기능별로 수정이 가능 -> 유지 보수가 쉬움

 

3. 익명 함수

fuction () {}

- 위와 같이 이름이 붙어있지 않은 함수를 익명 함수라고 표현한다.

 

<사용방법>

<script>
	const 함수 = function () {
    	console.log('함수 내부의 코드입니다 ... 1')
        console.log('함수 내부의 코드입니다 ... 2')
        console.log('')
    }
    
    함수()
    함수()
    
    console.log(typeof 함수)
    console.log(함수)
</script>

 

<실행결과>

'함수 내부의 코드입니다 ... 1'
'함수 내부의 코드입니다 ... 2'

'함수 내부의 코드입니다 ... 1'
'함수 내부의 코드입니다 ... 2'

function
f() {
	console.log('함수 내부의 코드입니다 ... 1')
    console.log('함수 내부의 코드입니다 ... 2')
    console.log('')
}

 

4. 선언적 함수

fuction 함수() {

}

- 위와 같이 이름이 붙어 생성한 함수를 선언적 함수라고 표현한다.

 

<사용방법>

<script>
	function 함수 () {
    	console.log('함수 내부의 코드입니다 ... 1')
        console.log('함수 내부의 코드입니다 ... 2')
        console.log('')
    }
    
    함수()
    함수()
    
    console.log(typeof 함수)
    console.log(함수)
</script>

<실행결과>

'함수 내부의 코드입니다 ... 1'
'함수 내부의 코드입니다 ... 2'

'함수 내부의 코드입니다 ... 1'
'함수 내부의 코드입니다 ... 2'

function
f 함수 () { 					//선언 함수에서는 함수 이름이 등장한다.
	console.log('함수 내부의 코드입니다 ... 1')
    console.log('함수 내부의 코드입니다 ... 2')
    console.log('')
}

 

5. 매개변수

- 가변 매개변수 함수 : 매개 변수의 개수가 고정적이지 않은 함수

- 나머지 매개변수 : 매개변수 앞에 마침표 3개를 입력해 매개변수들이 배열로 들어오도록 하는 것

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

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

- 전개 연산자 : 배열을 전개해서 함수의 매개변수로 전달

함수이름(...배열)

<사용방법>

<script>
	function sample (...items) {
    	console.log('items')
    }
    
    const array = [1,2,3,4]
    
    console.log('전개 연산자를 사용할 경우')
    sample(array) //[Array(4)]
    console.log('전개 연산자를 사용하지 않은 경우')
    sample(...array) //[1,2,3,4]
</script>

- 기본 매개변수 : 매개변수에 기본 값을 지정하는 것

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

 

6. 콜백 함수

- 함수를 매개변수로 전달하는 함수

 

<사용방법>

<script>
	function callThreetimes (callback) {
    	for (let i=0; i<3;i++){
        	callback(i)
        }
    }
    
    function print (i){
    	console.log('${i}번째 함수 호출')
    }
    
    callThreeTimes(print)
</script>

<실행결과>
0번째 함수 호출
1번째 함수 호출
2번째 함수 호출

- callThreeTimes 함수에서 callback으로 print 함수를 호출한다.

 

[콜백 함수를 활용하는 함수들]

 

1) forEach 함수

- 단순하게 배열 내부의 요소를 사용해서 콜백함수를 호출

 

<사용방법>

<script>
	const numbers = [2,3,4,5,6]
	
    numbers.forEach(function (value, index, array) {
    	console.log('${index}번째 요소 : ${value}')
    })
</script>

<실행결과>
0번째 요소 : 2
1번째 요소 : 3
2번째 요소 : 4
3번째 요소 : 5
4번째 요소 : 6

2) map 함수

- 콜백 함수에서 리턴한 값을 바탕으로 새로운 배열을 생성함.

 

<사용방법>

<script>
	let numbers = [2,3,4,5,6]
	
    numbers = numbers.map(function (value, index, array) {
    	return value*value
    })
    
    numbers.forEach(console.log)
</script>

<실행결과>
4 0 Array(5)
9 1 Array(5)
16 2 Array(5)
25 3 Array(5)
36 4 Array(5)

3) filter 함수

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

 

<사용방법>

<script>
	const numbers = [0,1,2,3,4,5,6]
	const evenNumbers = numbers.filter(function (value) {
    	return value % 2 == 0
    })
    
    console.log('원래 배열: ${numbers}')
    console.log('짝수만 배열: ${evenNumbers}')
</script>

<실행결과>
원래 배열 : 0,1,2,3,4,5
짝수만 배열 : 0,2,4

 

7. 화살표 함수

- 단순한 형태의 콜백함수를 넣고자 사용하는 방법

(매개변수) => {

}

(매개변수) => 리턴값

<사용방법>

const array = [0,1,2,3,4,5]
array.map((value) = >value * value)

<실행결과>
(6) [0,1,4,9,16,25]

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

<script>
	let numbers = [0,1,2,3,4,5,6]
	
    numbers
    	.filter((value) => value % 2 ==0)
        .map((value) => value * value)
        .forEach((value => {
        	console.log(value)
        })
</script>

<실행결과>
0
2
4

 

8. 타이머 함수

- 특정 시간 이후에 콜백함수를 호출하는 함수

setTimeout(함수, 시간)	특정 시간 후에 함수를 한번 호출
setInterval(함수, 시간)	특정 시간마다 함수를 호출
clearTimeout(타이머_ID)	setTimeout() 함수로 설정한 타이머 제거
claerInterval(타이머_ID)	setInterval() 함수로 설정한 타이머 제거

<사용방법>

<script>
	setTimeout(() => {
    	console.log('1초후에 실행됩니다.')
    }, 1*1000)
	
    let count = 0
    setInterval(() => {
    	console.log('1초마다 실행됩니다.(${count}번째)')
        count++
    }, 1*1000)
    
</script>

<실행결과>
1초후에 실행됩니다.
1초마다 실행됩니다.(0번째)
1초마다 실행됩니다.(1번째)
1초마다 실행됩니다.(2번째)
...

 

9. 즉시호출 함수

- 익명 함수를 호출하고 즉시 호출하는 패턴

(function () {} )()

- 스코프 : 변수가 존재하는 범위, 스코프는 같은 단계에 있을 경우 무조건 충돌이 일어난다.

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

- 엄격 모드 : 코드를 엄격하게 검사하는 것

 

<사용방법>

<script>
	'use strict'
    	문장
    	문장
</script>