혼공단

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

Hocube 2024. 7. 28. 13:19
반응형

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

 

보통 2월은 28일까지 있지만 몇년에 한 번 29일까지 있기도 하다.

이런 해를 윤년이라고 부르고 다음과 같은 특징이 있다.

 

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

 

 

vs code

 

콘솔창

 

 

 

 

[선택 미션] p. 240 확인 문제 1번 풀고, 풀이 과정 설명하기

 

filter 함수란?

자바 스크립트의 배열 메서드 중 하나로, 
주어진 조건을 만족하는 배열의 요소들만을 포함하는 새로운 배열을 생성한다.
이 메서드는 콜백 함수와 함께 사용되며, 콜백 함수는 배열의 각 요소에 대해 호출되어 조건을 검사한다.

 

 

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

    // 1. 홀수 확인 함수
    function isOdd(number) {
        return number % 2 !== 0;
    }

    // 2. 100 이하 확인 함수
    function isLessThanHundred(number) {
        return number <= 100;
    }

    // 3. 5로 나누어 떨어지는지 확인하는 함수
    function isDivisibleByFive(number) {
        return number % 5 === 0;
    }

    // 필터링 처리
    let oddNumbers = numbers.filter(isOdd);
    let lessThanHundred = numbers.filter(isLessThanHundred);
    let divisibleByFive = numbers.filter(isDivisibleByFive);
    
    // 출력
    console.log("홀수만 추출: ", oddNumbers);
    console.log("100 이하의 수 추출: ", lessThanHundred);
    console.log("5로 나눈 나머지가 0인 수만 추출: ", divisibleByFive);
    console.log("원래 배열: ", numbers);
</script>

 

 

결과

 

 

 

 

+

[선택 미션]을 풀 때 나는 '함수 분리 사용 패턴'을 사용했다. 

자바스크립트에서는 다양한 함수 패턴 작성 법이 있다. 

위에서 사용한 코드를 다른 패턴으로 작성해보면 아래와 같다.

 

 

익명 함수(Anonymous Function) 사용 패턴

 

  • filter 메서드 내에 익명 함수를 직접 작성하여 사용.
  • 함수가 특정한 이름 없이 작성되며, 해당 함수는 filter 메서드 호출 시에만 사용됨.
<script>
    // 변수 선언
    let numbers = [273, 25, 75, 52, 103, 32, 57, 24, 76]

    // 1. 홀수만 추출
    let oddNumbers = numbers.filter(function(number) {
        return number % 2 !== 0;
    });
    console.log("홀수만 추출:", oddNumbers);

    // 2. 100 이하의 수만 추출
    let lessThanHundred = numbers.filter(function(number) {
        return number <= 100;
    });
    console.log("100 이하의 수만 추출:", lessThanHundred);

    // 3. 5로 나눈 나머지가 0인 수만 추출
    let divisibleByFive = numbers.filter(function(number) {
        return number % 5 === 0;
    });
    console.log("5로 나눈 나머지가 0인 수만 추출:", divisibleByFive);

    // 원래 배열 출력
    console.log("원래 배열:", numbers);
</script>

 

 

 

화살표 함수 사용 패턴

  • 화살표 함수를 사용하여 콜백 함수를 더 간결하게 작성
  • 익명 함수와 유사하지만, function 키워드 대신 => 연산자를 사용
<script>
    // 변수 선언
    let numbers = [273, 25, 75, 52, 103, 32, 57, 24, 76]

    // 1. 홀수만 추출
    let oddNumbers = numbers.filter(number => number % 2 !== 0);
    console.log("홀수만 추출:", oddNumbers);

    // 2. 100 이하의 수만 추출
    let lessThanHundred = numbers.filter(number => number <= 100);
    console.log("100 이하의 수만 추출:", lessThanHundred);

    // 3. 5로 나눈 나머지가 0인 수만 추출
    let divisibleByFive = numbers.filter(number => number % 5 === 0);
    console.log("5로 나눈 나머지가 0인 수만 추출:", divisibleByFive);

    // 원래 배열 출력
    console.log("원래 배열:", numbers);
</script>
반응형