목차
함수 🌊
- 자바스크립트에서 함수를 정의하는 방법은 몇가지가 있나요?
함수 선언문, 함수 표현식, Function 생성자 함수, 화살표 함수 4가지가 있다.- 함수 선언문과 함수 표현식은 어떤 차이가 있나요?
함수 선언문은 function을 통해 함수를 선언하고 함수 표현식은 function을 별도의 변수에 할당하여 사용한다. 함수 선언문은 호이스팅이 되고 함수 표현식은 호이스팅이 발생하지 않는다.- 즉시 실행 함수(IIFE)에 대해 알고 있나요? 알고 있다면 아는 내용에 대해 말해보세요
즉시 실행 함수는 말 그대로 선언과 동시에 출력되는 형태를 지니고 있으며 재호출은 불가능하다. 보통 익명함수의 형태를 띄고 있고, 필요없는 전역 변수의 생성을 줄이거나 라이브러리들의 변수명이 충돌하는 경우 많이 사용된다.
함수
자바스크립트에서 함수를 정의하는 방법은 몇가지가 있나요?
함수 선언문- 선언을 둘러싼 함수의 최상부 혹은 전역범위로 호이스팅
- 선언부 이전에서도 호출 가능
함수 표현식- 함수의 정의가 호이스팅 되지 않음
- 선언부 이전에서도 호출 불가능(callback으로 전달은 가능)
- 이름을 생략하여 익명함수로 만들 수 있음
- IIFE(즉시 실행 함수)로 사용될 수 있음
Function 생성자 함수- 함수를 생성할 때 구문 분석을 수행하기 때문에 비효율적임(함수 표현,선언식은 호출할 때 나머지 코드와 함께 구문분석)
- 자신만의 메소드, 프로퍼티가 없음
화살표 함수(ES6)- this 바인딩이 없음(스코프 지정시 사용하는 메소드를 이용할 수 없음 - 사용시 인자만 전달)
- 메소드로 사용 불가능
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
case 1 :함수 선언문 function add(x,y){ return x+y; } case 2: 함수 표현식 var add = function(x,y){ return x + y; } case 3: Function 생성자 함수 var add = new Function('x','y', 'return x+y'); case 4: 화살표 함수(ES6) var add = (x,y) => x+y;
함수 선언문과 함수 표현식은 어떤 차이가 있나요?
함수 선언식: function으로 시작되는 함수 선언1 2 3 4 5
function foo() { return "이것은 함수입니다."; } foo(); // "이것은 함수입니다."
- 나중 사용을 위해 저장되며 호출될 때 실행됨
- 함수 전체를 호이스팅 (정의된 범위의 맨 위로 호이스팅되서 함수 선언 전에 함수를 사용할 수 있음)
함수 표현식: 표현식을 사용하여 정의1 2 3
var x = function (a, b) { return a * b; };
- 정의한 function을 별도의 변수에 할당하는 것
- 변수 이름을 통하여 호출
- 호이스팅이 되지 않음
즉시 실행 함수(IIFE)에 대해 알고 있나요? 알고 있다면 아는 내용에 대해 말해보세요
즉시실행함수 (IIFE, Immediately Invoked Function Expression) : 정의되자마자 즉시 실행되는 함수(선언과 동시에 출력)
1 2 3 4 5 6 7 8
(function () { console.log("IIFE"); })(); // 화살표 함수로도 사용 가능하다 (() => { console.log("IIFE"); })();
- 선언과 동시에 호출되어 반환되어 재사용 할 수 없기 때문에 이름을 지어주는 것이 의미가 없음(익명함수)
즉시실행함수의 사용 이유
- 필요없는 전역 변수의 생성을 줄일 수 있음(코드의 충돌 ↓)
- 사용하는 라이브러리들의 변수명이 충돌되는 것을 막을 수 있다(ex. jQuery & Cash)
출처