[혼공단] 혼자 공부하는 자바스크립트, 4주차 미션

혼공JS 4주차 미션 : 202쪽의 <윤년을 확인하는 함수 만들기> 예제를 실행하여 2022년이 윤년인지 확인하는 결과 인증샷

절반이 넘었는데도 꾸준히 하고 있는 나.. 완전 칭찬해 ~ヾ(＾∇＾)b 항상 뭘 하든 작심삼일이었는데 혼공단은 매주 게시글을 공유하고, 댓글로 응원까지 얻으니 재밌어서 계속 하게 되는 것 같다 ㅎㅁㅎ

기본 미션

4주차의 기본 미션은 202쪽의 <윤년을 확인하는 함수 만들기> 예제를 실행하여 2022년이 윤년인지 확인하는 결과 인증샷 찍기이다.

먼저! 윤년이란, 보통 2월은 28일까지만 있는데 몇년에 한 번 29일까지 있는 년이 있다. 그 해를 윤년이라고 한다. 이 윤년은 특별한 주기를 가지고 돌아옹ㄴ다.

• 윤년은 4로 나누어 떨어진다.
• 하지만 그 중에서도 100으로 나누어 떨어지는 해는 윤년이 아니다.
• 하지만.. 400으로 나누어 떨어지는 해는 또 윤년이다.

이게 몇번이나 통수를 치는 건지,, 분명 4로는 나누어 떨어지지만 100은 또 안되고 근데 또 400으로는 나누어 떨어진다니 (ԾεԾ|||) 아무튼 이러한 윤년의 특징을 함수 isLeapYear()로 나타내어 윤년을 확인해보자!!

먼저 교과서 없이 스스로 코드를 짜보았는데..

<script>
    function isLeapYear(year){ //year => 윤년인지 확인할 해
        if(year % 4 == 0){ // year을 4로 나눴을 때 0이면
            if(year % 100 == 0){ // 그 중 100으로 나누어 떨어지면
                if(year % 400 == 0){ // 그 중 400으로 나누어 떨어지면
                    return true // 윤년이므로 true
                }else{
                  return false //아니면 false
                }
            }else{ // 100으로 나누어 떨어지지 않으면
                return true //true
            }
            return false // 4로 나누어 떨어지지 않으면 false
        }
    }

    console.log(isLeapYear(2020)) // true
    console.log(isLeapYear(2010)) // false
    console.log(isLeapYear(2000)) // true
    console.log(isLeapYear(1900)) // false
    
</script>

그렇다 매우 복잡해졌다. (っ ͡ ͡º - ͡ ͡º ς) 코드를 쓰기 전에 알고리즘을 좀 생각을 해보고 짰어야 했는데 그냥 냅다 머릿속에 있는걸 적다보니 이렇게 나왔다.

그래서 좀 더 간단하게 만들기 위해 특징을 한마디로 정리해보면
윤년은 4로 나누어 떨어지고, 100으로 나누어 떨어지지 않거나, 400으로 나누어 떨어진다.
이걸 조건부 연산자를 이용하여 표현하면

<script>
    function isLeapYear(year){
        return (year % 4 === 0) && (year % 100 != 0) || (year % 400 == 0)
    }

    console.log(isLeapYear(2020)) // true
    console.log(isLeapYear(2010)) // false
    console.log(isLeapYear(2000)) // true
    console.log(isLeapYear(1900)) // false
    
</script>

이렇듯 아주 간단한 한 줄짜리 함수가 완성이 된다..^-^

선택 미션

4주차의 선택 미션은 p.240 확인 문제 1번 풀고, 풀이 과정 설명하기이다.

아래 코드의 '// 처리합니다' 부분을 구현하는 문제이고, 조건은
filter함수를 통하여
1. 홀수만 추출
2. 100 이하의 수만 추출
3. 5로 나눈 나머지가 0인 수만 추출
이 세가지를 추출하는 것이다.

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

	// 처리합니다.


	// 출력합니다.
	console.log(numbers)
</script>

코드를 작성하기 전에 filter()에 대해 알아보잣
filter() 메소드는 배열이 가지고 있는 함수인데, 콜백 함수에서 리턴하는 값이 true인 것들을 모아 새로운 배열로 리턴하는 함수이다. 여기서 콜백 함수란 매개변수로 전달하는 함수를 말한다.

filter() 메소드의 예제를 먼저 살펴보며 filter에 대해 이해를 해보자 ( • ̀ω•́ )✧
다음은 numbers 배열에서 filter()를 이용해 짝수만 추출하여 새로운 배열로 리턴하는 예제이다.

<script>
  	const numbers[0, 1, 2, 3, 4, 5]
	const evenNumbers = numbers.filter(function (value) {
      return value % 2 === 0 // 짝수만 추출하여 새로운 배열을 리턴
    })
    
    console.log(`원래 배열: ${numbers}`) // 원래 배열: 0, 1, 2, 3, 4, 5
	console.log(`짝수만 추출: ${evenNumbers}`) // 짝수만 추출: 0, 2, 4
</script>

가만히 보니 분명 간단한 로직인데 코드가 조금 긴 것 같지 않나..?🤔 싶은데 이런 상황에서 쓸 수 있는 화살표 함수라는 간단한 함수 생성 방법이 있다. 화살표 함수를 사용하면 단순한 형태의 콜백 함수를 쉽게 입력할 수 있다.

화살표 함수의 형태는

(매개변수) => {
	실행문
}

이러한데 여기서 리턴값만 필요하다면

(매개변수) => 리턴값

이렇게 초간단으로 줄일 수 있다!
이 화살표 함수를 위의 filter() 메소드 예제에 적용해보면

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

짠, 이렇게 훨씬 간단하게 짤 수 있다. (๑^ں^๑)

이제 화살표 함수와 filter()에 대해 어느정도 알게 되었으니 확인 문제를 풀어보자

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

	// 처리합니다.
	numbers = numbers.filter((x) => (x % 2 === 1) && (x <= 100) && (x % 5 === 0))

	// 출력합니다.
	console.log(numbers)
</script>

이번엔 좀 생각을 해보며 조건을 정리해보았다..ㅎㅎ
한마디로 정리하면 홀수이면서, 100이하이고, 5로 나누어 떨어지는 수를 추출하는 것이므로 && 연산자를 사용하여 한줄로 코드를 짰다. ¡¡¡( •̀ ᴗ •́ )و!!!

마무리

4주차도 이렇게 끝이 났다. 학교 수업에서도 코드가 복잡하다고 몇 번 지적을 받았었는데 기본 미션을 풀어보며 냅다 코드만 치지 않고 생각을 해보고 쳐야겠다는 생각이 더더욱 들었다. 저렇게 한 줄에 쓸 수 있는 것을... 그래서 선택 미션은 천천히 생각을 해보며 코드를 깔끔하게 짤 수 있었다. (n˘v˘•)¬