본문 바로가기

개발 공부

혼공스 Chapter.5

익명 함수 : 이름이 없는 함수 function () {} 형태

선언적 함수 : 이름이 있는 함수 function 함수 이름 () {}

매개변수 : 함수의 괄호 안에 넣는 변수. 매개변수를 통해 함수는 외부의 정보를 입력받을 수 있음.

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

가변 매개변수 함수 : 매개변수의 개수가 고정되어 있지 않은 함수. 나머지 매개변수(...)를 활용해서 만듦.

전개 연산자 : 배열을 함수의 매개변수로써 전개하고 싶을 때 사용.

기본 매개변수 : 매개변수에 기본값이 들어가게 하고 싶을 때 사용하는 매개변수.

 

확인 문제

1. A부터 B까지 범위를 지정했을 때 범위 안의 숫자를 모두 곱하는 함수를 만들어라.

<script>
    const multiplyAll = function (a, b) {
    let output = 0
    for (let i = 1; i <= 100; i++) {
    output += i
    }
    return output
    }
    console.log(multiplyAll(1, 2)) 
    console.log(multiplyAll(1, 3))
   </script>
   
   2
   6

2. 다음 과정에 따라 최대값을 찾는 max() 함수를 만들어라.

  • 매개변수 max([1, 2, 3, 4])와 같은 배열을 받는 max() 함수를 만들어라.
<script>
    const max = function (array) {
    let output = array[0] 
    for (const data of array) {
    if (output < data) {
    output = data
    }
    } 
    return output 
    } 
    console.log(max([1, 2, 3, 4]))
   </script>
  • 매개변수 max(1, 2, 3, 4)와 같이 숫자를 받는 max() 함수를 만들어라.
<script>
    const max = function (...array) {
    let output = array[0] 
    for (const data of array) {
    if (output < data) {
    output = data
    }
    } 
    return output 
    } 
    console.log(max(1, 2, 3, 4))
   </script>
  • max([1, 2, 3, 4]) 형태와 max(1, 2, 3, 4) 형태를 모두 입력할 수 있는 max() 함수를 만들어라.
<script>
    const max = function (first, ...rests) {
    let output
    let items
    if (Array.isArray(first)) {
    output = first[0] 
    items = first
    } else if (typeof(first) === 'number') {
    output = first 
    items = rests 
    } 
    for (const data of items) {
    if (output < data) {
    output = data
    }
    } 
    return output 
    } 
    console.log(`max(배열): ${max([1,2,3,4])}`)
    console.log(`max(숫자, ...): ${max(1,2,3,4)}`)
   </script>

 

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

화살표 함수 : 익명 함수를 간단하게 사용하기 위한 목적으로 만들어진 함수 생성 문법.

                          () => {} 형태로 함수를 만들고, 리턴값만을 가지는 함수라면 () => 값 형태로 사용.

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

엄격모드 : 자바스크립트의 문법 오류를 더 발생시킴 why? 실수를 줄일 수 있는 방법. 'ustrict'라는 문자열을 블록 가장 위쪽에 배치해서 사용함.

 

확인 문제

1. filter 함수의 콜백 함수 부분을 채워서 1) 홀수만 추출, 2) 100이하의 수만 추출, 3) 5로 나눈 나머지가 0인 수만 추출하라.

<script>

    let numbers = [273, 25, 75, 52, 103, 32, 57, 24, 76]

    numbers = numbers.filter((x) => x % 2 === 1) 
    numbers = numbers.filter((x) => x <= 100) 
    numbers = numbers.filter((x) => x % 5 === 0)

    console.log(numbers)
   </script>

2. 다음과 같은 코드를 배열의 foreach 메소드를 사용하는 형태로 변경하라.

<script>
    const array = ['사과', '배', '귤', '바나나']

    console.log('# for in 반복문')
    for (const i in array) {
        console.log(i)
    }
    
    console.log('# for of 반복문')
    for (const i of array) {
        console.log(i)
    }
   </script>

<script>
    const array = ['사과', '배', '귤', '바나나']
    console.log('# for in 반복문')
    array.forEach((item, i) => {
    console.log(i)
    })
    console.log('# for of 반복문')
    array.forEach((item, i) => {
    console.log(item)
    })
   </script>
   
   # for in 반복문
   0
   1
   2
   3
   # for of 반복문
   사과
   배
   귤
   바나나

 

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

오늘은 울 뻔 했다. 아니 진짜 조금 울었을지도...?

웹개발 종합반 강의를 들었을 때에는 바로 실전(?)에서 쓰이는 걸 연습하다가 함수의 개념적인 부분을 배우니 상당히 추상적이라는 느낌을 받았다. 뭐랄까, 무언가의 일부를 보다가 짜잔~ 사실은 산만큼 넓었습니다~! 하는 느낌이어서 슬펐다.

나한테 왜이래....................오늘은 아마도 늦게 잘 것 같다...하..하하......하.....😢

'개발 공부' 카테고리의 다른 글

웹 퍼블리싱 1주차  (0) 2023.03.20
혼공스 Chapter.6  (0) 2023.03.11
혼공스 Chapter.4  (0) 2023.03.08
혼공스 Chapter.3  (0) 2023.03.07
혼공스 Chapter.2  (0) 2023.03.06