주요 코드 흐름 중간에 독립적인 구문 형태로 존재한다.
실제 실행 흐름이 해당 함수에 도달했을 때 함수 실행이 가능하다.
함수 선언은 정의되기 전에도 호출이 가능하다.(호이스팅 가능)
functionDeclaration(); // 호이스팅
function functionDeclaration() {
console.log('함수 선언(Fuction Declaration)');
};
console.log(functionDeclaration); // 함수의 코드가 보이게 된다.
// 코드블록 내에 위치하면 해당 함수는 블록 내 어디서든 접근이 가능하지만
// 밖에서는 접근하지 못한다.
const age = 16;
if (age < 18) {
welcome();
function welcome() {
console.log('안뇽');
}
welcome();
} else {
function welcome() {
console.log('안녕하세욤');
}
}
welcome(); // 중괄호 안에서 호출한 함수는 중괄호 안에서만 호출이 가능하다.
// error 발생!
// 이를 호출해 주려면 함수 표현식을 사용하여 변수에 함수를 담아주면 된다.
const age2 = 16;
let welcome;
if (age2 < 18) {
welcome = function() {
console.log('안뇽');
}
} else {
welcome = function() {
console.log('안녕하세욤');
}
}
welcome(); // 호출 가능!
표현식이나 구문 구성 내부에 생성, "=" 같은 할당 표현식을 사용한다.
함수 선언 전에는 접근이 불가능하다(호이스팅 불가).
const functionExpression = function() {
console.log('함수 표현(Function Expression)');
};
functionExpression();
함수를 변수에 할당하여 복사를 하는 방식이다.
function functionCopy() { // 1. 함수 생성
console.log('함수 복사(functionCopy)');
}
const copy = functionCopy; // 2. 함수 복사
copy(); // 3. 복사한 함수 실행 : 함수 복사(functionCopy)
functionCopy(); // 본래 함수 실행 : 함수 복사(functionCopy)
함수를 함수의 인자로 전달하고, 필요하다면 인수로 전달한 그 함수를 나중에 호출(callback)하는 것이다.
아래의 예시에서는 ask함수를 실행 시켰다.
이후 ask에 있는 인자 '동의 하십니까?', ok, no를 매개변수(parameter)에 넣어 함수 안의 코드를 동작시킨것이다.
function ask(question, yes, no){
if (confirm(question)) yes();
else no();
}
function ok() {
console.log('동의했습니다.')
}
function no() {
console.log('취소를 눌렀습니다.')
}
ask('동의 하십니까?', ok, no);
// 위의 코드를 간략화 시키기
function ask(question, yes, no){
if (confirm(question)) yes();
else no();
}
ask('동의 하십니까?',
function() {console.log('동의했습니다.')},
function() {console.log('취소를 눌렀습니다.')}
);
함수 표현식보다 단순하고 간결하게 만드는 방법이다.
아래 코드는 기존 표현 방식과 화살표 표현 방식을 비교한 코드이다.
// 기존 표현 방식
let func = function(arg1, arg2, ...argN){
return expression;
}
// 화살표 함수 표현 방식
func = (arg1, arg2, ...argN) => expression;
구체적인 예시를 통하여 화살표 함수의 사용법을 자세히 알아보자.
// 구체적 예시
let sum = (a, b) => a + b;
sum = function(a, b) {
return a + b;
}
console.log(sum(1,2)) // 3
인수를 감싸는 괄호는 생략이 가능하다.
let double = n => n * 2;
console.log(double(3)); // 6
괄호를 비워놓고 작성하면 된다. 괄호는 생략이 불가능 하다.
//
let sayHi = () => console.log('안녕하세용');
sayHi();
중괄호를 사용해주면 되며 중괄호 사용 시 본문이 여러 줄로 구성되어 있음을 알려준다.
또한 중괄호 사용 시 return 지시자로 결과 값을 반환해 줘야 한다!
let sum = (a,b) => { // 중괄호 사용 시 본문이 여러 줄로 구성되어 있음을 암시
let result = a + b;
return result; // 중괄호 사용 시 reutn지시자로 결과값을 반환해 줘야 한다.
}
alert(sum(1,2)) // 3