혼자 공부하는 자바스크립트 Chapter 05

✅혼자 공부하는 자바스크립트

#	진도	기본 미션	선택 미션
4주차(1/30 ~ 2/5)	Chapter 05	p.202 <윤년을 확인하는 함수 만들기> 예제를 실행하여 2022년이 윤년인지 확인하는 결과 인증하기	p.240 확인 문제 1번 풀고, 풀이 과정 설명하기

Chapter 05-1 함수

익명 함수는 이름이 없는 함수로 function () {} 형태로 만듭니다.

익명함수 선언하기

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

// 함수를 출력합니다.
함수()
함수()

// 출력합니다.
console.log(typeof 함수)
console.log(함수)
</script>

실행결과

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

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

선언적 함수는 이름이 있는 함수로 function 함수이름 () {} 형태로 만듭니다.

선언적 함수 선언하기

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

// 함수를 출력합니다.
함수()
함수()

// 출력합니다.
console.log(typeof 함수)
console.log(함수)
</script>

실행결과

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

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

앞에서 살펴보았던 익명함수와 큰 차이가 없는 것을 알 수 있다.
한 가지 차이는 함수를 출력했을 때 함수에 이름이 붙어있다는 것 뿐입니다.

매개변수
함수의 괄호 안에 넣는 변수를 매개변수라고 합니다.
매개변수를 통해 함수는 외부의 정보를 입력 받을 수 있습니다.

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

가변 매개변수 함수
가변 매개변수 함수 매개변수의 개수가 고정되어 있지 않은 함수를
의미합니다. 나머지 매개변수(...)를 활용해서 만듭니다.

Chapter 05-2 함수고급

콜백 함수
매개변수로 전달하는 함수를 의미합니다.

화살표 함수
익명 함수를 간단하게 사용하기 위한 목적으로 만들어진 함수 생성 문법입니다.
() => {} 형태로 함수를 만들고, 리턴값만을 가지는 함수라면 () => 값 형태로 사용할 수 있습니다.

즉시 호출 함수
변수의 이름을 충돌을 막기 위해서 코드를 안전하게 사용하는방법 입니다.

엄격 모드
자바스크립트의 문법 오류를 더 발생시키는 엄격모드는 실수를 줄일 수 있는 방법입니다. 'use stric'라는 문자열 블록 가장 위쪽에 배치해서 사용할 수 있습니다.

기본미션

▶ p.202 <윤년을 확인하는 함수 만들기> 예제를 실행하여 2022년이 윤년인지 확인하는 결과 인증하기

1) 윤년일 특징

(1) 4로 나누어 떨어지는 해는 윤년이다
(2) 하지만 100으로 나누어 떨어지는 해는 윤년이 아니다.
(3) 하지만 400으로 나누어 떨어지는 해는 윤년이다.

2) 조건부 연산자를 사용해서 간단하게 한줄로 isLeapYear()함수를 구현했다.

3) 결과값을 return 한다.

4) 윤년인지 확인하는 함수코드

<script>
	function isLeapYear(year){
    	return (year % 4 === 0) && (year % 100 !==0) || (year % 400 === 0)
    }
    
    console.log(`2022년은 윤년일까? === ${isLeapYear(2022)}`)
</script>

5) 실행결과

2022년은 윤년일까? === false

선택 미션

▶ p. 240 확인문제 1번 풀고, 풀이 과정 설명하기
문제 : filter 함수의 콜백 함수 부분을 채워서 (1) 홀수만 추출, (2) 100 이하의 수만 추출, (3) 5로 나눈 나머지가 0인 수만 추출해주세요. 그리고 코드의 실행 결과를 적어보세요.

2> 코드

<script>
//변수를 선언합니다.
let numbers=[273,25,75,52,103,32,57,24,76]

// 처리합니다.

//(1) 홀수만 추출
numbers=numbers.filter((x)=> x%2===1)

//(2) 100이하의 수만 추출
numbers=numbers.filter((x)=> x <=100)

//(3) 5로 나눈 나머지가 0인 수만 추출
numbers=numbers.filter((x)=> x%5===0)


// 출력합니다. 

console.log(numbers)
</script>

실행 결과
[25,75]