자바스크립트를 사용하다 보면 유사한 동작을 여러번 활용해야 할 경우가 있다.
그럴 경우 중복 없이 유사한 동작을 하는 코드를 여러 번 호출할 수 방법이 '함수 function' 이다.
함수 활용에서는 3가지 방법이 있다.
- 함수 선언식
- 함수 표현식
- 화살표 함수
함수 선언식
function show('매개변수') {
alert( '안녕하세요!' );
}
함수 표현식
let show = function('매개변수') {
alert( '안녕하세요!' );
}
화살표 함수
let show = ('매개변수') => alert( '안녕하세요!' );
셋 다 표현 방식은 다르지만, 출력하면 결과가 똑같이 나오게 된다.
상황에 따라 원하는 방식을 선택하여 활용을 하시면 좋다.
그러나 함수 선언문과 함수 표현식의 경우 변수 지정에 따라 달라지는 경우가 있다.
함수 선언식 vs 함수 표현식
함수 선언식은 함수 호이스팅에 영향을,
함수 표현식은 변수 호이스팅에에 영향을 받는다.
그럼 여기서 호이스팅이란??
Hoisting(호이스팅)은 코드에 선언된 변수 및 함수를 코드 상단으로 끌어올리는 것이다.
간단하게 코드를 구성하여 이 둘의 출력 간 차이가 있다는 것을 볼 수 있다.
함수 선언식의 경우 함수 선언 이전에 실행이 가능하며,
함수 표현식의 경우 함수 선언 이전에 실행이 불가능하다.
console.log(summer(10, 15))
function summer(x, y) {
return x + y;
}
// 25가 출력함수 선언문의 경우 함수가 선언되기 전 호출하여도 출력이 된다.
console.log(winter(10, 15))
let winter = function (x, y) {
return x + y;
} // VM851:1 Uncaught ReferenceError: winter is not defined at <anonymous>
반면 함수 표현식은 함수가 선언되 진 호출하여도 출력이 안된다.
이로 인해 함수를 선언 후 호출하는 방식이 해석하기 편한 관계로 함수 표현식처럼 표현하는 것이 좋다.
지역 변수와 외부 변수의 차이
let Name = 'Post malone'; // 외부 변수
function yourName() {
let message = 'Hello, ' + Name;
alert(message);
}
yourName();
함수 밖에서 선언된 변수를 외부 변수 라고 부른다.
function yourName() {
let Name = 'Post malone'; // 지역 변수
let message = 'Hello, ' + Name;
alert(message);
}
yourName();
함수 내부에서 선언된 변수를 지역 변수라고 부른다.
그렇다면 좀 더 응용하여 외부변수 알아보도록 하자.
let Name = 'Post malone'; // ### 외부 변수 ###
function yourName() {
Name = "Chris brown"; // ### 지역 변수 ###
let message = 'Hello, ' + Name; // "Hello Chris brown"
}
alert( Name ); // "Post malone"
yourName(); // 함수 실행 시 이름 변경
alert( Name ); // "Chris brown"
Name 이라는 변수를 할당과 재할당으로 두 번 선언 하였다.
여기서 알 수 있는건 호출 전과 호출 후의 Name이며, 해당 변수는 함수 호출에 영향을 받는다.
