본문 바로가기
혼공학습단 11기(完)

[혼공스] 4주차 미션

by jaeheon0520 2024. 1. 22.

 

어느새 반환점을 돌아 4주차를 마무리하는 시점이 되었다.

 

이번주차에는 익명 함수, 화살표 함수, 고차 함수 등 중요한 내용이 많이 등장했는데 미션을 진행하면서 잘 소화해보자.

 

(공부한 내용 정리는 '혼공학습단' 카테고리를 확인하시면 되겠습니다.)

 

기본 미션

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

 

<내가 작성한 코드>

논리 연산자 사용이 익숙하지 않아 if 조건문을 사용했다. 코드가 지저분하다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script>
        function isLeapYear(year) {
            if (year % 4 === 0) {
                if (year % 100 === 0) {
                    if (year % 400 === 0)
                        return true
                    else
                        return false
                }
                else
                    return true
            }
            else
                return false
        }

        console.log(`2022년은 윤년일까? === ${isLeapYear(2022)}`)
    </script>
</head>
<body>
</body>
</html>

 

<교재에 소개된 코드>

논리 연산자를 사용해서 깔끔하고 가독성 좋은 코드가 되었다.

 

윤년이 되는 조건은 두 가지이다.

 

  • 4로 나누어 떨어지면서 100으로 나누어 떨어지지 않음
year % 4 === 0 && year % 100 !== 0
  • 4로 나누어 떨어지면서 400으로 나누어 떨어짐
year % 4 === 0 && year % 400 === 0

 

두 가지 조건 중 하나만 충족해도 윤년이므로 || 로 연결한다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script>
        function isLeapYear(year) {
            return (year % 4 === 0) && (year % 100 !== 0) || (year % 400 === 0)
        }

        console.log(`2022년은 윤년일까? === ${isLeapYear(2022)}`)
    </script>
</head>
<body>
</body>
</html>
   

 

결과인증

 

 

선택 미션

p.240 확인 문제 1번 풀고, 풀이 과정 설명하기

 

문제: filter 함수의 콜백 함수 부분을 채워서 ① 홀수만 추출, ② 100 이하의 수만 추출, ③ 5로 나눈 나머지가 0인 수만 추출해주세요. 그리고 코드의 실행 결과를 적어보세요.

 

<내가 작성한 코드>

원본을 훼손하지 않기 위해 output_numbers 배열에 numbers 배열을 복사해 주었다. p.226에 등장하는 메소드 체이닝 방법을 적용해서 풀이하였는데 메소드 체이닝은 자주 사용되는 기술이므로 기회가 생기면 바로 적용해보자.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script>
        let numbers = [273, 25, 75, 52, 103, 32, 57, 24, 76]

        let output_numbers = numbers
            .filter((value) => value % 2 === 1)
            .filter((value) => value <= 100)
            .filter((value) => value % 5 === 0);

        console.log(output_numbers)
    </script>
</head>
<body>
   
</body>
</html>

 

결과인증

 

 

마무리

이번 주는 프로그래밍의 꽃 '함수'에 대해서 공부했다.

 

지난 학기 자바스크립트를 처음 배울 때 익명 함수, 화살표 함수, 고차 함수 등의 개념이 너무너무 어려워서 절망했었는데

 

혼공스 교재에 해당 개념들이 이해하기 쉽게 잘 설명되어 있어서 조금이나마 감을 잡을 수 있었다.

 

이번 주에 이어 다음 주에도 어렵고 중요한 내용이 등장한다! 정신 바짝 차리자.

 

오늘 하루도 쌓였다.