Java Script Java Script 함수 기본

[도서] 나혼자 공부하는 자바스크립트

핵심 키워드
#익명함수 #선억적함수 #매개변수 #리턴값 #가변 매개변수 함수 #전개 연산자 #기본 매개변수

함수 기본 용어

함수 호출 : 함수를 사용
매개변수 : 함수를 호출할 때 괄호 내부에 넣는 자료들
리턴값 : 최종적으로 나오는 결과
함수 = 코드의 집합을 나타내는 자료형
-> function () { } 형태
함수가 코드의 집합인 이유 -> 중괄호{…} 내부에 코드를 넣기 때문

함수의 장점

반복되는 코드를 한번만 정의 후 필요할 때마다 호출 -> 반복 작업 피할 수 있음
기능별로 나눠서 함수를 작성하면 -> 모듈화로 전체 코드의 가독성이 좋아짐
기능별(함수별)로 수정이 가능 -> 유지보수가 쉬움

익명함수

: 이름이 붙어있지 않은 함수

호이스팅이 불가능함(함수 선언보다 함수 호출이 윗줄에 있어도 실행되는 기능)
선언이 우선되어야 함수가 바르게 실행됨

  
let 함수 = function() {...}

선언적 함수

: 이름이 있는 함수

함수 선언 전에 호출해도 오류없이 실행됨

  
function 함수() {...}

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

: 선언적 함수보다는 익명함수를 주로 씀

==> HTML 코드 내부의 script 태그는 하나씩 전체가 실행되고 넘어가기 때문에 선언적 함수를 사용하면 코드흐름 예측이 어려움

매개변수와 리턴값(parameter & return)

매개변수 : 함수를 호출할 때 괄호 안에 적는 것
리턴값 : 함수의 최종 결과

  
function 함수(매개변수, 매개변수) {
  // 매개변수 == input
  문장;
  문장;
  return 리턴값; // 리턴값 == output
}

나머지 매개변수(rest parameter)

여러 개의 숫자를 매개변수로 넣어 실행하고 싶을 때 -> 호출할 때 매개변수의 개수가 고정적이지 않은 함수를 가변 매개변수 함수 라고 부름

  
function 함수(... 나머지 매개변수){ } // 매개변수 앞에 ... 입력하면 매개변수들이 배열로 들어감

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

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

매개변수 확인하기

typeof 연산자 : 변수의 데이터 타입을 반환함
- undefined
- object : 함수, 배열, null 등의 객체
- boolean : 참 거짓
- number
- string
- symbol
- function
Array.isArray() 함수 : 객체를 배열인지 여부 확인용으로 사용

전개 연산자(spread parameter)

: 배열을 전개해서 함수의 매개변수로 전달)

  
함수(...배열);

-> 예제 참고

기본 매개함수(default parameter)

: 매개변수에 기본값을 지정(for 같은 매개변수를 자주 사용할 때

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

예제

숫자를 계산해서 출력하는 경우

  
function 함수(매개변수) {
  let output = 초깃값;
  처리함;
  return output;
}

전개 연산자 활용

  
매개변수 모두 출력
function sample(...items){
  console.log(items)
}

const array = [1,2,3,4]

sample(array) // 전개연산자 사용 x [Array(4)]

sample(...array) // 전개연산자 사용 o [1,2,3,4]

함수 고급은 내일 정리

(잘못된 부분이 있다면 메일로 연락주세요.)

Java Script | Java Script 함수 기본