일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- 연산자재정의
- 웹개발
- C++
- C언어
- freiend클래스
- 함수중복
- this객체
- JS
- HTML
- 프로그래밍
- 자바스크립트
- 객체지향프로그래밍
- SQL
- react
- time()
- call by referance
- 코딩
- 친구함수
- 제네릭 함수
- 함수표현식
- 멤버접근허용
- 랜덤출력
- 생성자호출
- jQuery
- freiend선언
- 테이블
- 데이터베이스
- 자바스크립트라이브러리
- friend함수
- new연산자
- Today
- Total
Programming Storytelling
함수표현식과 함수선언문의 차이점 본문
함수란?
"하나의 단위로 실행되는 문의 집합"
아래의 코드는 함수 선언의 한 예입니다.
function sayHello() {
//함수 버디는 여는 중괄호로 시작합니다.
console.log("Hello world!");
//닫는 중괄호로 끝납니다.
}
우리는 위 코드와 같은 함수 선언의 방식 말고도 다른 대안인 함수표현식을 쓸수가 있는데
이런
함수표현식과 익명함수란 과연 무엇일까요?
함수를 선언하면 함수에 바디와 식별자가 모두 주어집니다.
자바스크립트는 익명함수도 지원하고는 하죠.익명 함수에는 이름답게 함수에 식별자가 주어지지 않습니다.
함수에 식별자가 없다는 말을 보고 어리둥절했을 수도 있습니다.식별자가 없다면,도대체 어떻게 호출해야 할까요?
답은 함수 표현식에 있습니다.우리는 표현식이 값이 되고,함수 역시 값이 된다는 것을 알고 있습니다. 함수표현식은 식별자에 할당할 수도 있고 즉시 호출 할 수도 있습니다.
함수표현식은 함수 이름을 생랼할 수 있다는 점을 제외하면 함수 선언과 문법적으로 완전히 같습니다.
이러한 익명 함수의 특징은 첫번째는 다른 함수나 메서드의 매개변수로 넘길 수도 있다는 것이고, 둘째는 객체의 프로퍼티가 될 수도 있다는 것입니다.
함수 선언과 함수 표현식의 차이점을 구별하기 가장 좋은 답은 컨텍스트에 있습니다.
함수 선언이 표현식으로 사용됐다면 그건 함수 표현식입니다. 표현식으로 사용되지 않았다면 함수 선언입니다.
이 차이는 다분히 이론적이며,일반적으로는 이 차이에 대해 생각할 필요가 없습니다.나중에 호출할 생각으로 함수를 만든다면 함수선언을 사용하면 되고, 다른 곳에 할당하거나 다른 함수에 넘길 목적으로 함수를 만든다면 함수 표현식을 사용하면 됩니다.
그리고 함수표현식과 함수선언식의 가장 대표적인 차이점은 호이스팅 입니다.
함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않습니다.
함수 선언식은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다.
함수표현식의 장점은 호이스팅에 영향을 받지 않는다는 것인데요.호출된 후 선언이 이루어지기때문에 함수가 변수 취급이 됩니다. 이외에도 함수 선언식보다 유용하게 쓰이는 경우는 다음과 같다.
- 클로져로 사용
- 콜백으로 사용 (다른 함수의 인자로 넘길 수 있음)
다른 포스팅에서 클로저와 콜백에 대한 내용을 올리기로 기약하며 이번 포스팅은 여기서 마치도록 하겠습니다.
'HTML & CSS & JS' 카테고리의 다른 글
html 공부하기 (0) | 2019.06.03 |
---|---|
변수 선언 방법 var,let,const 차이점과 특징 (0) | 2019.04.20 |
html table태그와 form태그에 대하여 (0) | 2019.04.15 |
html/css/js로 설문조사지를 구현하기위한 배경지식 (0) | 2019.04.15 |
html/css로 스도쿠 구현하기 (0) | 2019.04.15 |