[혼공학습단 10기 - 자바스크립트] 4주차 / Chapter 05. 함수

윤인성 저자님 혼공JS 강의 듣고 1차 정리 후, 교재 참고하여 2차 정리한 글입니다

자바스크립트에서 함수는 아래와 같은 형태로 만든다

 ☑️ const f = function () {}

함수() → 함수를 호출하다

=== 함수의 본문을 실행하다

점프 : 호출 위치에서 함수 본문으로 이동하는 것

리턴 : 함수 본문에서 호출 위치로 나오는 것

 

☑️ 프로시저 형태의 함수

☑️ 수학적 함수

f(x) = x + 5
f(1) = 1 + 5 = 6
f(2) = 2 + 5 = 7

• 함수의 괄호 안에 오는 것: 매개변수
• 함수의 최종적으로 리턴되는 값 : 리턴값
  • ex ) f(1) 의 리턴값은 6이다, f(2) 의 리턴값은 7이다

함수의 장점 → 코드의 재사용 가능! 효율적

---

함수 선언 방법 in javascript (2가지)

→ 익명함수

const f = function(매개변수1, 매개변수2){
  return 리턴값
}

초기에는 아래 형태를 많이 사용하였으나, 현대 자바스크립트는 위의 것을 더 많이 사용함

→ 선언적 함수

function f(매개변수1, 매개변수2){
  return 리턴값
}

함수 예제

1. 윤년 확인하는 함수 만들기

-> 실행결과

2, a부터 b까지 더하는 함수 만들기

3. 최솟값 구하는 함수 만들기

---

API

→ Application Programming Interface (약속)

→ 애플리케이션 프로그램을 만들 때의 약속

(ex)

alert(’message’) 
console.log('message')

나머지 매개변수(rest parameter)

• 가변 매개변수 함수 : 매개변수의 개수가 고정적이지 않은 함수 → 나머지 매개변수 사용!
• 매개변수 앞에 마침표 … 3개 입력! → 매개변수가 배열로 입력됨

• 나머지 매개변수 (…매개변수)의 자료형은 무조건 배열

나머지 매개변수 + 일반 매개변수의 조합

• 이렇게 사용은 가능한데,

• 매개변수 사용의 잘못된 예시, 나머지 매개변수는 항상 마지막에 와야한다!

전개 연산자 : 함수 호출

• 전개 연산자 : 배열을 전개해서 함수의 매개변수로 전달해줌, 배열 이름 앞에 마침표 3개 붙이는 형태

☑️ 함수(a[0], a[1], a[2]) 는 함수(…a) 와 같은 역할!

☑️ 나머지 매개변수는 function(…매개변수) { } ← …매개변수는 배열임
전개 연산자는 함수(…배열)

 

개발의 기본적인 관점

가독성 : 코드를 쉽게 읽고 이해하고, 안전하게 쓸 수 있는 속성

• 가독성이 중요한 이유→ 프로그램이 너무 복잡해져서
  • 지원 도구의 활용
  • 기업 입장의 비용 절감

기본 매개변수

→ 매개변수에 기본값 지정

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

매개변수에 아무것도 넣지 않았을 때 (기본 매개변수 ❌)

 

1. 요즘 처리방식

2. 예전 처리방식 (1)

3. 예전 처리방식 (2)

4. 예전 처리방식 (3) : 부정 연산자 사용

5. 

기본 매개변수 활용

---

확인문제 1

확인문제2 - 1

확인문제 2 - 2

확인문제 2 - 3

05-2 함수 고급

• 자바스크립트의 모든 함수는 매개변수를 가질 수 있다.
• 자바스크립트는 함수의 매개변수가 어떤 자료형으로 들어올지 거르는 문법이 없음.

→ 매개변수에 아무거나 다 전달할 수 있음

→ 위의 사진과 같이 함수의 매개변수로 함수를 전달할 수 있음

• a is not a function : a는 함수가 아닌데 왜 호출하려고 하나?
• a로 분명히 함수가 들어와야 하는 것!

⇒ 이러한 함수를 콜백함수라고 함!!

매개변수로 전달하는 함수 : 콜백함수

콜백함수에 매개변수 전달하기

함수를 곧바로 전달하기

배열이 갖고 있는 메소드 중, 콜백 함수 활용하는 메소드의 콜백 함수는 다음과 같은 형태

☑️ function (value, index, array) { }

1. forEach() : 배열 내부 요소 사용 → 콜백 함수 호출해줌

• array : 반복을 돌고 있는 배열을 나타냄. 생략 가능!

2. map() : 콜백 함수에서 리턴값(열요소) 기반으로 새로운 배열 생성→ 리턴 하는 함수

3. filter() : 콜백 함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열 생성

→ filter 함수는 비파괴적 함수임

화살표 함수 (간단히 하기 위해서 등장)

function이라는 긴 키워드 대신에 ⇒ 으로 대신

(매개변수) => { 
	
}

내부 실행문이 return 키워드 하나라면 다 줄여서 아래와 같이 작성도 가능하다

(매개변수) => 리턴값

(ex)

배열 = 배열.filter((value, index) => value % 2 === 0) 

• 메소드 체이닝 : 어떤 메소드가 리턴하는 값을 기반으로 함수를 줄줄이 사용하는 것

타이머 함수

☑️ 크게 setTimeout() 함수와 setInterval() 함수로 나뉜다

setTimeout() : 특정한 시간 후에 한 번 무언가를 할 때

setInterval() : 특정한 시간 마다 무언가를 할 때

타이머 제거 함수

둘 다 () 안에 제거하고 싶은 타이머ID 넣어주기.

clearTimeout() : setTimeout() 함수로 설정한 타이머 제거

clearInterval() : setInterval() 함수로 설정한 타이머 제거

☑️ clearTimeout() 함수와 clearInterval() 함수로 나뉨

즉시 호출 함수 : 함수를 만들고 즉시 호출하는 함수

이렇게 코드를 작성하면 오류가 생김. 이런 오류를 피하기위해 즉시 호출 함수가 나타났다

변수가 존재하는 범위 : 스코프(scope)

엄격 모드(strict mode)

자바스크립트는 변수 선언 시 let이나 const 의 언급 없이도 변수 선언이 가능할 수 있음. 그러나 이렇게 사용할 경우 지나친 유연성 때문에 문제가 발생할 수 있음

a = 10
b = 20

⏩ 엄격 모드 사용!

☑️ 'use strict'

 

보통은

(function(){
	'use strict'
	//실행
})()

와 같은 형태로 사용

☑️ 보통 즉시 호출 함수 블록의 가장 위쪽에 엄격 모드 적용하는 경우가 많음 ← 그 블록 내부에만 엄격 모드 적용

선언적 함수와 익명 함수의 차이

• 최근에는 안전 등 이유로 익명 함수 선호
• 익명 함수는 코드 순서대로 선언됨
• 선언적 함수는 다른 순서로 선언됨.

---

확인문제1(여러 방법으로 풀어봤음)

확인문제2

---

이번 내용은 특히 생소한 내용이 많아서 이해하는 데 일주일이 걸렸을 정도다.. 하하.. ㅠㅠ 

그래도 끝났으니 다음 내용도 열심히 해서 얼른 React 공부하고싶다!