[JS] 함수

 

목차

1. 함수의 정의
2. 선언식과 표현식
3. Arrow Function
4. 생성자 함수

---

1. 함수의 정의

 

개요

• 참조 타입 중 하나로써 function 타입에 속함
• JavaScript에서 함수를 정의하는 방법은 주로 2가지
  1. 함수 선언식 (function declaration)
  2. 함수 표현식 (function expression)

 

함수 선언식 (Function declaration)

 

• 일반적인 프로그래밍 언어의 함수 정의 방식

 

 

함수 표현식 (Function expression)

 

• 표현식 내에서 함수를 정의하는 방식
• 함수 표현식은 함수의 이름을 생략한 익명 함수로 정의 가능

 

• 표현식에서 함수 읾을 명시하는 것도 가능
• 다만 이 경우 함수 이름은 호출에 사용 되지 못하고 디버깅 용도로 사용됨

 

기본 인자(Default arguments)

• 인자 작성시 '=' 문자 뒤 기본 인자 선언 가능

 

매개 변수와 인자의 개수 불일치 허용

 

• 매개변수보다 인자의 개수가 많을 경우

 

• 매개변수보다 인자의 개수가 적을 경우

 

Spread syntax ( ... )

 

• "전개 구문"
• 전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 객체를 배열의 경우는 요소, 함수의 경우는 인자로 확장할 수 있음
  1. 배열과의 사용
  2. 함수와의 사용 (Rest parameters)
     • The rest parameter syntax를 사용하여 정해지지 않은 수의 매개변수를 배열로 받을 수 있음

 

---

2. 선언식과 표현식

 

함수의 타입

• 선언식 함수와 표현식 함수 모두 타입은 function으로 동일

 

호이스팅 - 선언식

• 함수 선언식으로 정의한 함수는 var로 정의한 변수처럼 호이스팅이 발생
• 즉, 함수 호출 이후에 선언해도 동작

 

호이스팅 - 표현식

• 반면 함수 표현식으로 선언한 함수는 함수 정의 전에 호출 시 에러 발생
• 함수 표현식으로 정의된 함수는 변수로 평가되어 변수의 scope 규칙을 따름

 

---

3. Arrow Function

 

화살표 함수 (Arrow Function)

• "함수를 비교적 간결하게 정의할 수 있는 문법"
• function 키워드와 중괄호를 이용한 구문을 짧게 사용하기 위해 탄생
  1. function 키워드 생략가능
  2. 함수의 매개변수가 하나뿐이라면 '( )'도 생략 가능
  3. 함수의 내용이 한 줄이라면 '{ }'와 'return'도 생략 가능
• 화살표 함수는 항상 익명 함수
  • == 함수 표현식에서만 사용 가능

예시

응용

 

즉시 실행 함수 (IIFE, Immediately Invoked Function Expression)

• 선언과 동시에 실행되는 함수
• 함수의 선언 끝에 '( )'를 추가하여 선언되자 마자 실행하는 형태
• '( )' 에 값을 넣어 인자로 넘겨줄 수 있음
• 즉시 실행 함수는 선언과 동시에 실행되기 때문에 같은 함수를 다시 호출할 수 없음
• 이러한 특징을 살려 초기화 부분에 많이 사용
• 일회성 함수이므로 익명함수로 사용하는 것이 일반적

---

4. 생성자 함수

 

생성자 함수

• 어떤 함수라도 new를 붙여서 생성하면 위 함수의 알고리즘을 따라간다.
• 따라서 생성자 함수는 첫 글자 대문자!!
• sayName 함수 내부의 this는 user5를 가리킨다. ->  객체와 메서드 이해하기!

 

• 아래와 같은 생성자 함수를 만들어 주었을 때, new로 호출하면 위의 title과 price는 자동 반환해준다.
• new를 붙이지 않은 경우?
  • 단순히 함수를 실행시키고 반환되는 것이 없기 때문에
  •  undefined 반환