함수선언문
function sayHello(){
console.log('Hello')
}함수 표현식
let sayHello = function(){
console.log('Hello')
}함수 선언문 과 함수 표현식 둘다 실행하는 방법은 같다.
sayHello();
차이점
함수선언문 : 어디서든 호출 가능
함수 호출을 함수보다 위에서 해도 자바스크립트는 hoisting( 초기화 단계에서 함수의 위치를 미리 파악해 사용가능범위가 넓어짐) 이 가능하기 때문에
함수 호출이 가능 범위가 넓어져 호출이 어디서든 가능하다.
함수 표현식 : 코드에 도달하면 생성
함수 표현식은 자바스크립트가 한줄씩 읽어가며 실행하고 해당코드에 도달해야 비로소
생성된다. 그렇기 때문에 실행문을 그 이후에 사용이 가능하다.
화살표 함수( arrow function)
led add = fuction(num1, num2){
return num1 + num2 ;
}위의 함수를 아래 코드와 같이 화살표 함수를 사용하여 바꿀 수 있다.
function 단어를 생략하고 화살표를 추가한다.
let add = (num1,num2) =>{
return num1 + num2;
또한 return 문 이거나 한줄코드는 중괄호가 아닌 일반 괄호로 바꿀 수 있다.
let add = (num1,num2) => (
num1 + num2;
)
return 문이 한줄이라면 괄호도 생략이 가능하다.
let add = (num1,num2) => num1 + num2;
인수가 1개일 경우에도 괄호 생략이 가능하다.
let sayHello = name => `Hello,${name}`;만약 인수가 아예 없는경우에는 괄호 생략이 불가능하다.
let showError = () => {
alert(`error!`);
}
또한 return 문이 있다해도 그전에 여러 줄의 코드가 있다면 일반괄호를 () 사용할수 없다.
let add = function(num1,num2){
const result = num1 + num2;
return result;
}
화살표함수 예제
1.
function showError(){
console.log("error")
};
를 화살표 함수로 변경하게 되면
let showHellow = () => {
console.log("error");
};2.
const sayHello = function (name) {
const msg = `Hello, ${name}` ;
console.log(msg);
};
를 화살표 함수로 변경
const sayHello = (name) => {
const msg = `Hello, ${name}` ;
console.log(msg);
};3.
const add = function (num1, num2) {
const result = num1 + num2;
return result;
}
를 화살표 함수로 변경
const add = (num1,num2) => num1 + num2 ;
함수 표현식 보다는 함수 선언문이 더 자유로우며
화살표 함수는 ES6 이후로 활발하게 사용되므로
필수항목이다.
