혼자 공부하는 자바스크립트_4주차 정리 및 미션

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

※ 순서

Chp 5. 정리

미션

(+한탄)

 

Chp 5. 함수

■ 함수의 기본 형태

-함수 호출: 함수를 사용하는 것

-매개변수: 함수 호출 시 괄호 내부에 넣는 자료

-리턴값: 함수를 호출해서 최종적으로 나오는 결과

• 함수: 코드의 집합을 나타내는 자료형
  • 장점
    1. 반복 작업을 피할 수 O
    2. 모듈화로 전체 코드 가독성 ↑
    3. 기능별(함수별) 수정 가능 → 유지 보수 ↑
• 익명 함수: 이름이 없는 함수

function () {}

• 선언적 함수: 이름이 있는 함수

function 함수() {}

//다음 코드와 같은 기능 수행
let 함수 = function () {};

• 매개변수: 함수의 괄호 안에 넣는 변수(input)
  • 매개변수를 통해 함수가 외부의 정보를 입력 받을 수 O
• 리턴값: 함수의 최종적인 결과(output)
  • 함수 내부에 return 키워드를 입력하고 뒤에 값을 넣어 생성

function 함수(매개변수, 매개변수, 매개변수) {
	문장
 	문장
    return 리턴값
}

• 가변 매개변수 함수: 호출 시 매개변수의 개수가 고정적이지 않은 함수
  • 나머지 매개변수(...) 활용해서 만듦
  • 함수의 매개변수 앞에 마침표 3개(...) 입력 시 매개변수들이 배열로 들어옴

function 함수 이름(...나머지 매개변수) {}

• 나머지 매개변수와 일반 매개변수 조합하기

function 함수 이름(매개변수, 매개변수, ...나머지 매개변수) {}

• 전개 연산자: 배열을 함수의 매개변수로써 전개하고 싶을 때 사용
  • 배열 앞에 마침표 3개(...) 붙이는 형태로 사용

함수 이름(...배열)

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

함수 이름(매개변수, 매개변수 = 기본값, 매개변수 = 기본값)

 

■ 함수 고급

• 콜백 함수: 매개변수로 전달하는 함수
  • 매개변수를 통해 함수를 받고, 그 함수를 통해 결과값을 호출
• 화살표 함수: 익명 함수를 간단하게 사용하기 위한 목적으로 만들어진 함수 생성 문법
  • 함수: (매개변수) => {}
  • 리턴값만 가지는 함수: (매개변수) => 리턴값
• 타이머 함수: 특정 시간마다 또는 특정 시간 이후에 콜백 함수를 호출할 수 있는 함수
  • 시간과 관련된 처리 가능
  • setTimeout(함수, 시간): 특정 시간 후에 함수를 한번 호출 ↔ clearTimeout(타이머_ID): 설정한 타이머 제거
  • setInterval(함수, 시간): 특정 시간마다 함수 호출 ↔ clearInterval(타이머_ID): 설정한 타이머 제거
    • 타이머 ID: 함수 호출 시 리턴값으로 나오는 숫자
• 즉시 호출 함수: 변수의 이름 충돌을 막기 위해 코드를 안전하게 사용하는 방법
  • 함수 즉시 호출하기: (function () {})()
  • 스코프: 변수가 존재하는 범위
  • 섀도잉: 블록이 다른 경우 내부 변수가 외부 변수를 가리는 현상
• 엄격 모드: 문법 오류를 더 발생시키지만 실수를 줄일 수 있는 방법
  • 'use strict' 문자열을 블록 가장 위쪽에 배치하여 사용
    • 문자열 읽어들인 순간부터 코드 엄격하게 검사

<script>
	'use strict'
    문장
    문장
</script>

• 익명 함수와 선언적 함수의 차이: (최근에는 안전 등의 이유로 익명 함수를 선호하는 편)
  • 익명 함수: 순차적인 코드 실행에서 코드가 해당 줄을 읽을 때 생성
  • 선언적 함수: 순차적인 코드 실행이 일어나기 전에 생성
  • 선언적 함수와 익명 함수의 조합: 선언적 함수 먼저 생성되고, 이후 순차적인 코드 진행 시작하며 익명 함수 생성
  • 익명 함수 선호 이유: 익명 함수는 우리가 코드를 읽을 때와 같은 순서로 함수 선언, 선언적 함수는 다른 순서로 함수 선언 → 함수를 같은 이름으로 덮어쓰는 것은 위험함

 

 

▶ 4주차 미션

    ▷ 기본 미션

<p.202 윤년을 확인하는 함수 만들기_코드>

<p.202 윤년을 확인하는 함수 만들기_결과>

 

    ▷ 선택 미션

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

<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)  //100 이하의 수
    numbers = numbers.filter((x) => x % 5 === 0)  //5로 나눈 나머지가 0인 수
    
    //출력
    console.log(numbers)
</script>

<p.240 확인 문제 1번_결과>

→ 풀이: .filter()를 통해 배열의 각 요소를 순회하며 주어진 조건에 따라 요소를 필터링하여 새로운 배열을 생성한다.

1. 홀수만 추출: 초기 numbers 배열에서 짝수인 '52, 32, 24, 76'을 제외한 '273, 25, 75, 103, 57'만이 남는다.
2. 100 이하의 수만 추출: 변경된 배열인 [273, 25, 75, 103, 57]에서 100 초과인 '273, 103'을 제외한 '25, 75, 57'만이 남는다.
3. 5로 나눈 나머지가 0인 수만 추출: 변경된 배열인 [25, 75, 57]에서 5로 나누어 떨어지지 않는 '57'을 제외한 '25, 75'만이 남는다.

따라서 numbers = [25, 75]가 되므로 코드 실행 결과로 [25, 75]가 나오게 된다.

 

 

 

+정리 다했는데 글이 날아갔다. 분명 임시저장도 했는데...

울고 싶다.. 업로드하고 빨리 밥먹으려고 열심히 적었는데ㅠ

일단 미션이라도 먼저 업로드하고 차차 다시 정리를 해보겠다..!