기본 function 함수와 화살표 함수의 차이를 알고있나요?
자바스크립트에서 함수를 정의하는 방법은 몇가지가 있나요?
함수 선언문과 함수 표현식은 어떤 차이가 있나요?
즉시 실행 함수(IIFE)에 대해 알고 있나요? 알고 있다면 아는 내용에 대해 말해보세요
함수
수학에서의 함수는 입력을 받아 출력을 내보내는 일련의 과정을 정의한 것.
프로그래밍 언어의 함수는
일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것.
프로그래밍 언어의 함수도 입력을 받아서 출력을 내보낸다.
함수 내부로 입력을 전달받는 변수를 매개변수
입력을 인수
출력을 반환값이라 한다.
함수는 함수 정의를 통해 생성한다.
기본 함수
//함수 정의
function add(x,y){
return x+y;
}
//함수 호출
add(1,2); //3화살표 함수
- ES6부터 도입
- function 키워드 대신 화살표를 사용해 좀 더 간략한 방법으로 선언
- 화살표 함수는 익명함수로 정의
- 화살표 함수는 생성자 함수로 사용할 수 없음
- 기존함수와 this, 바인딩 방식이 다름
- prototype 프로퍼티가 없음
- arguments 객체를 생성하지 않음.
const add = (x,y) => x+y;
console.log(add(2,3)); //5화살표 함수와 기본 함수의 차이
1. 화살표 함수는 인스턴스를 생성할 수 없는 non-constructor
화살표 함수는 인스턴스를 생성할 수 없어서 prototype 프로퍼티가 없고 프로토타입도 생성하지 않는다.
const Foo = () => {};
// 화살표 함수는 생성자 함수로서 호출 할 수 없다.
new Foo() //TypeError : Foo is not a constructor2. 중복된 매개변수 이름을 선언 할 수 없다.
일반 함수는 중복된 매개변수 이름을 선언해도 에러가 발생하지 않는다.
단, strict mode에서 중복된 매개변수 이름을 선언하면 에러가 발생한다.
화살표 함수에서도 중복된 매개변수 이름을 선언하면 에러가 발생한다.
3. 화살표 함수는 함수 자체의 this,arguments,super,new,target 바인딩을 갖지 않는다.
화살표 함수는 this,arguments,super,new,target 참조하면, 스코프 체인을 통해 상위 스코프의 this,arguments,super,new,target 를 참조한다.
함수를 정의하는 방법
- 함수 선언문
function add(x,y){
return x+y;
}- 함수 표현식
var add = function(x,y){
return x+y;
}- 생성자 함수
var add = new Function('x','y', 'returnx+y');- 화살표 함수
var add = (x,y) => x+y;💡 변수 선언과 함수 정의
변수는 선언한다. 함수는 정의한다로 표현한다.
함수 선언문이 평가되면 식별자가 암묵적으로 생성되고 함수 객체가 할당된다.
함수 선언문
함수 선언문은 표현식이 아닌 문이다.
function add(x,y){
return x+y;
}
//undefined그래서 함수 선언문을 실행하면 완료 값 undefined가 출력된다.
만약 표현식인 문이라면 완료 값 undefined 대신 표현식이 평가되어 생성된 함수가 출력되어야된다.
표현식이 아닌 문은 변수에 할당 할 수 없다.
함수 선언문도 표현식이 아닌 문이라 변수에 할당 할 수 없다.
함수 표현식
자바스크립트는 함수의 객체 타입의 값이다.
자바스크립트의 함수는 값처럼 변수에 할당 할 수도 있고, 프로퍼티 값이 될 수도 있고, 배열의 요소가 될 수도 있다.
이처럼 값의 성질을 갖는 객체를 일급 객체라고 한다.
자바스크립트 함수는 일급 객체이다.
함수가 일급 객체라는 건, 함수를 값처럼 자유롭게 사용할 수 있다는 의미이다.
함수는 일급객체이므로 함수 리터럴로 생성한 함수 객체를 변수에 할당할 수 있다.
함수 정의 방식을 함수 표현식이라고 한다.
함수 표현식과 함수 선언문의 차이
호이스팅
함수 선언식은 함수 전체를 호이스팅한다.
정의된 범위의 맨 위로 호이스팅이 되서 함수 선언전에 함수를 사용할 수 있다.
함수 표현식은 별도의 변수에 할당한다.
변수는 선언부와 할당부를 나누어 호이스팅한다.
//함수 선언문
hoisted(); // 동작
function hoisted() {
console.log("호이스팅됨");
}
// 함수 표현식
notHoisted(); // 에러: 함수가 아직 정의되지 않았습니다.
var notHoisted = function () {
console.log("호이스팅되지 않음");
};변수 할당
함수 선언문에서는 함수 이름이 변수에 자동으로 할당된다.
함수 표현식에서는 함수를 변수에 할당하는 것이 명시적으로 이루어진다.
// 함수 선언문
declaration(); // 동작
function declaration() {
console.log("함수 선언문");
}
// 함수 표현식
expression(); // 에러: 함수가 아직 정의되지 않았습니다.
var expression = function () {
console.log("함수 표현식");
};익명 함수
함수 선언문은 함수 이름을 생략할 수 없다.
함수 표현식은 함수를 익명으로 만들 수 있다.
// 함수 선언문
function named() {
console.log("이름 있는 함수");
}
// 함수 표현식
var anonymous = function () {
console.log("익명 함수");
};즉시 실행 함수 (IIFE)
정의되자마자 즉시 실행되는 함수
function () {
console.log("IIFE");
})();
// 화살표 함수로도 사용 가능하다
(() => {
console.log("IIFE");
})();왜 사용할까?
- 필요없는 전역 변수의 생성을 줄일 수 있다.
함수를 생성하면 그 함수는 전역 변수로써 남아있게 되고, 많은 변수의 생성은 전역 스코프를 오염시킬 수 있다.
즉시실행함수를 선언하면 내부 변수가 전역으로 저장되지 않기 때문에 전역 스코프의 오염을 줄일 수 있다.
- private한 변수를 만들 수 있다.
즉시실행함수는 외부에서 접근 할 수 없는 자체적인 스코프를 가지게된다. 이는 클로저의 사용 목적과도 비슷하며 내부 변수를 외부로부터 private하게 보호 할 수 있다는 장점이 있다.
어떻게 사용할까?
- 단 한 번의 사용이 필요한 함수
즉시실행함수는 한 번의 실행 이후 없어지기 때문에 단 한번의 사용한 필요한 함수에 사용된다. - 자바스크립트 모듈
자바스크립트 모듈을 만들때에도 즉시실행함수가 많이 활용된다.
