1차 공부/TIL

221111 함수 (5장)

공대탈출 2022. 11. 11. 22:30

0123456789101112

시작은 쉬웠다. 웹종에서 이해못한 함수와는 달리 아주 기초부터 알려주기 때문에 양만많지 할만하네 라는 생각이었다.

하지만 점점 페이지가 넘어가고 예제를 살짝 비틀어 내가 원하는 대로 함수를 사용해서 최댓값을 표시하라는 문제가 있었는데,
거기서 꽤 오래 애를 먹었다.

어찌저찌 '이게 문젠가? 이건가?' 하며 console.log도 찍어보고, 코드도 변경하며 문제점을 찾았다.

자세한건 후에 틀렸던 문제에 기술하도록 하겠다.

 

어쨋든 꽤나 어려웠다. 꽤 긴 시간동안 책을 바라봐야했고 손으로 써가며 공부하다보니 손이 아플때까지 필기를 했다.

이해하기 어려워서 예제 설명을 10분을 쳐다보기도, 어떤건 바로 이해가 되기도 하였다.

뭐든 이 챕터의 공통점은 '아 이거 중요한 거 같다'라는 생각이 계속 들었던 것이다.

 

뭐 메소드가 매개변수로 함수를 뭐시기뭐시기 결과값으로 매개변수를 뱉는데 그게 배열로 뱉어져서 연쇄메소드 형태로 ~~

머리 진짜 터질 뻔 했다.

 

오늘은 정리 해야 할 양이 너무 많은 관계로 대부분은 맨 위의 종이필기로 대체하고,

내가 직접 짠 코드와 기억에 남아야 할 것들 그리고 틀린 문제에 관한 고찰만 남기려 한다.

연산곱,합 연산자 : &&의 우선순위가 ||보다 높다.

--------------

if문을 ||나 &&로 대체하지 말아야 한다.

&&의 코드가 더 짧긴하지만, if문의 가독성이 더 좋기 때문에 if문을 사용하는게 낫다.

--------------

Array.isArray(배열)  결과 : true

Array.isArray(배열이 아닌 값)  결과 : false

typeof(~) - 문자인지 숫자인지 구분 할 때 씀

윤년을 확인하는 함수 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        // 프롬프트 창으로부터 원하는 년도를 입력받는다
        let year = Number(prompt('년도를 입력하시오',''))
        // 결과를 선언한다
        let result
        // year에 관한 윤년인지 아닌지 구분하는 함수
        function isLeapYear(year) {
            // year값이 4로 나누어 떨어지는 것들에서 100의 배수는 제외한 뒤, 400의 배수만 다시 넣는다
            return (year%4===0)&&(year%100 !==0)||(year%400===0)
        }
        if (isLeapYear(year)===true){
            result = '윤년입니다.'
        } else {
            result = '윤년이 아닙니다.'
        }
        // 윤년유무 출력
        alert(`${year}년은 ${result}`)
    </script>
</head>
<body>
    
</body>
</html>

 

a로부터 b까지의 곱한 값 구하기

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        // 곱하고자 하는 범위의 양 끝 값을 입력시킨다.
        let a =Number(prompt('a를 입력하시오',''))
        let b =Number(prompt('b를 입력하시오',''))
        // output이 0부터 시작하면 언제나 0만 출력되므로 1로부터 시작하도록 한다
        let output = 1
        // a와b사이에 0이 있지못하도록 하는 함수이다. a*b는 항상 양수이며, b는 a보다 항상 크거나 같아야 한다.
        isPositive = function(a,b) {
            return a*b > 0 && a <= b
        }
        // 만약 위 함수에 충족하는 값이 입력되었다면 a로부터 b까지 모든 수를 곱한다.
        if (isPositive(a,b) === true) {
            for (let i =a; i <= b; i++){
                output *= i
            }
            // 충족 시 결과 출력
            alert(`${a}부터 ${b}까지 곱한 값은 ${output}입니다.`)
        }
        // 미충족시 출력되는 문구
        else {
            alert('a가 b보다 크거나, 결과값이 0입니다.')
        }
    </script>
</head>
<body>
    
</body>
</html>

틀렸던 문제

 

제일 처음 작성한 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        alert('숫자 입력은 띄어쓰기로 각 숫자들을 구분해주세요.\nex)1 2 14 18')
        const testArray = prompt('띄어쓰기로 숫자 구분','').split(' ')
        console.log(testArray)
        function max(array){
            let output = array[0]
            for (const item of array) {
                if (output < item){
                    console.log(output)
                    output = item
                }
            }
            return output
        }
        alert(`입력하신 숫자 중 가장 큰 수는 ${max(testArray)}입니다.`)
    </script>
</head>
<body>
    <!-- 2 14 7 32 30 87 72 108 -->
</body>
</html>

만들고자 했던 코드

1) 사이트 접속 시 입력 방식 안내 후 prompt를 사용한 입력창이 뜬다.

2) 특정 문구로 구분된 숫자들이 하나의 문자식으로 들어오고, 문자식을 split을 이용하여 배열로 저장한다.

3) 배열을 함수에 매개변수로 넣고 매개변수를 특정 변수와 비교하며 가장 큰 값을 변수에 입력시킨다.

4) 가장 큰 값이 무엇인지 변수를 활용하여 문구를 띄운다.

5) 변수 입력값은 '2 14 7 32 30 87 72 108'

6) 예상 결과출력 : 108

7) 실제 결과출력 : 87

결과가 반복해서 87로 나오자 어떻게든 문제점을 찾으려하였다.

console.log를 이용하여 배열의 값을 나타내기도하였고, output의 값을 나타내기도하였다.

여러번 시도하다가 함수가 잘못된 줄 알고 전개연산자를  사용하고자 다음과 같이 코드를 변경하였다.

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        function max(...array){
            let output = array[0]
            for (const item of array) {
                if (output < item){
                    console.log(output)
                    output = item
                }
            }
            return output
        }
        alert('숫자 입력은 띄어쓰기로 각 숫자들을 구분해주세요.\nex)1 2 14 18')
        const testArray = prompt('띄어쓰기로 숫자 구분','').split(' ').join(', ')
        console.log(testArray)
        alert(`입력하신 숫자 중 가장 큰 수는 ${max(testArray)}입니다.`)
    </script>
</head>
<body>
    <!-- 2 14 7 32 30 87 72 108 / 2,14,7,32,30,87,72,108 -->
</body>
</html>

일단 testArray의 배열에 쉼표가 없나? 그게 문젠가? 하여 구글링을 통해 .join을 알아내 쉼표로 나누었다.

결과는 아래와 같이 한개의 숫자로 인식된건지....

쓰레기같은 결과가 나왔다.

참담한 결과

두번째에 실패 한 후 좌절감을 느끼며 다시 첫 코드로 돌아왔다.

분명 엊그제인가 어제인가 배열 문자 이런걸로 틀렸었는데.... 하는 찰나

숫자여서 배열에 사용되는 식이 안됐던 기억이 떠올랐다.

그렇다면 내가 지금 문자형 인덱스를 숫자와 비교하려고 하여 더 큰값을 비교하지 못하는 것이 아닐까 싶었다.

 

결국 .split은 특정 문자로 분리 후 문자열로 배열형식에 저장한다. 라는 것을 알게 되었다.

그래서 배열 속 문자열을 숫자로 변경하는 방법이 없나 싶어 검색을 하였고, .map(number)을 찾아 냈다.

정확히 내가 원하는 걸 해주는 코드였는데 작동방식은 아직 이해를 못해 적지는 못한다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        alert('숫자 입력은 띄어쓰기로 각 숫자들을 구분해주세요.\nex)1 2 14 18')
        const testArray = prompt('띄어쓰기로 숫자 구분','').split(' ').map(Number)
        console.log(testArray)
        function max(array){
            let output = array[0]
            for (const item of array) {
                if (output < item){
                    console.log(output)
                    output = item
                }
            }
            return output
        }
        alert(`입력하신 숫자 중 가장 큰 수는 ${max(testArray)}입니다.`)
    </script>
</head>
<body>
    <!-- 2 14 7 32 30 87 72 108 -->
</body>
</html>

마지막으로 코드를 작성하고 똑같은 값을 집어넣어 최댓값을 출력하도록 하였다.

결과는 성공!

 

다시한번 저번에 틀린 문제와 비슷하게 틀렸지만, 스스로 고친것에 만족하고 다시 생각하기로 하였다.

 

끝.

'1차 공부 > TIL' 카테고리의 다른 글

221118 til  (0) 2022.11.18
221112 객체(6장)  (0) 2022.11.12
221110 반복문(4장)  (0) 2022.11.10
221108 조건문(3장)  (0) 2022.11.08
221107 자바스크립트 개요 및 자료와 변수(1~2장)  (0) 2022.11.07

'1차 공부/TIL'의 다른글

  • 현재글221111 함수 (5장)

관련글

댓글

티스토리툴바