함수 : 하나의 로직을 재실행 할 수 있도록 하는 것. 코드의 재사용성을 높여줌
greetWorld(); // Output: Hello, World!
function greetWorld() {
console.log('Hello, World!');
}🔍 TIP
위와 같이 작성하면 계속 'Hello, World!' 밖에 출력되지 않기 때문에, 아래와 같이 parameter로 메세지를 전달하면, log 함수를 호출하면서 원하는 메세지를 유동적으로 전달할 수 있음
function hello(message) {
console.log(message);
}
hello ('Hi, there!'); // 값을 유동적으로 넣을 수 있음
Parameters(매개변수)
- 함수가 입력을 받아들이고, 입력을 통하여 작업을 수행할 수 있음. 즉 '입력값'을 이야기 함
매개변수는 괄호 사이에 높이와 너비로 지정되며, 함수 본문 내에서 일반 변수처럼 작동함.
함수가 호출될때 함수에 전달되는 값은 '인수'라고 함.
위의 함수 호출에서 숫자 10은 너비로, 6은 높이로 인수가 지정되었음.
function sayThanks(name) {
console.log('Thank you for your purchase '+ name +'! We appreciate your business.');
}
sayThanks('Cole');
// Thank you for your purchase Cole! We appreciate your business.
default parameters (기본 매개변수)
- ES6에 추가된 기능으로 함수에 전달된 인수가 없거나 호출 시 인수가 정의되지 않은 경우 매개 변수가 미리 결정된 값을 가지도록 함
function greeting (name = 'stranger') {
console.log(`Hello, ${name}!`)
}
greeting('Nick') // Output: Hello, Nick!
greeting() // Output: Hello, stranger!위의 예에서 = 연산자를 사용하여 매개변수 이름에 default 값으로 'stranger'를 할당함
Rest parameters
ES6에 추가된 기능으로 ...을 작성하게 되면 배열 형태로 전달됨
function printAll(...args) {
for (let i = 0; i < args.length; i++) {
console.log(args[i]);
}
}
printAll('hello', 'coding', 'world');
//output : hello coding world📌 <참고>
1) 배열을 출력할 때 for loop 대신 for of 문법으로 간단히 출력할 수 있음for (const arg of args) { console.log(arg); } // arg에 있는 값들을 차례로 하나씩 지정되면서 출력하게 됨2) 더 간단히 하고 싶다면
.forEach()를 활용하여 출력할 수 있음args.forEach((arg) => console.log(arg));
Return
- 함수를 종료시킴 + 출력 키워드.
function monitorCount(rows, columns){
return rows * columns;
};
const numOfMonitors = monitorCount(5, 4);
console.log(numOfMonitors); // 출력값 : 20📌 Early return, early exit
function upgradeUser(user) {
if (user.point > 10) {
// long upgrade logic...
}
}upgradeUser이라는 함수 안에서 user의 point가 10이상일 때만 업그레이드를 진행하는 로직이 있다면, if와 else를 번갈아 쓰기보다는 (가독성이 떨어짐) 아래와 같이 빨리 return을 해서 함수를 종료하고, 조건이 맞을 때만 필요한 로직들이 실행될 수 있도록 하는 것이 바람직함
function upgradeUser(user) {
if (user.point <= 10) {
return;
}
// long upgrade logic...
}
Function Expressions
- 변수 = 함수( ) { };
- 표현식 안에 함수를 정의하여 function 키워드 사용
- 이때 함수 이름은 일반적으로 생략되며 이를 익명함수라고 함.
- 변수 이름이 함수의 이름 또는 식별자가 되도록 변수를 선언할 때 es6 이후엔 주로 const를 사용
- 함수를 호출할 땐 함수가 저장된 변수 이름을 작성하고 그 뒤에 함수에 전달되는 인수를 묶는 괄호 작성
- 함수 표현식은 hoisting 되지 않으므로 정의되기 전엔 호출할 수 없음
variableName(argument1, argument2)아래에서 처럼 함수를 선언함과 동시에 바로 print라는 변수에 할당함
이처럼 function에 아무 이름이 없고 function이라는 키워드를 이용해서 parameter와 block을 이용한 것은 익명함수(anonymous function)이라고 함.
다시 다른 변수에 재할당하게 되면 printagain은 첫 줄의 함수를 가르키고 있기 때문에 print가 출력되는 것을 볼 수 있음
const print = function() {
console.log('print');
};
print();
const printagain = print;
printagain();📌 function declaration과 function expression의 가장 큰 차이점은
function expression은 할당된 다음부터 호출이 가능함. 즉, print()를 선언하기 전에 호출하면 에러가 남
하지만 function declaration은 hoisting이 됨. 함수가 선언되기 전에 호출해도 됨.
Arrow Functions (매개변수) => { }
- ( ) = > 를 사용하여 함수를 작성하는 Arrow Function이 ES6에 도입됨
- Arrow Function은 함수를 생성할 때 function을 붙이지 않아도 됨
- 대신 괄호 안에 매개 변수를 입력한 후 => { }로 실행하면 됨
const rectangleArea = (width, height) => {
let area = width * height;
return area;
};
Concise Body Arrrow
- 단일 매개변수만 사용하는 경우 ( )를 사용하지 않아도 됨
- 다만 함수가 0개 또는 여러 개의 매개변 수를 사용하는 경우 괄호가 필요함
- 한줄 블록으로 구성된 함수 본문에는 {중괄호}를 사용하지 않아도 되며 return도 생략가능함
예를 들어
const squareNum = (num) => {
return num * num;
};위를 리팩토링하면
const squareNum = num => num * num; - 단일매개변수이므로 괄호 생략
- 함수가 한줄 블록이므로 중괄호 생략
- 한줄 블록이므로 return 생략
const plantNeedsWater = (day) => {
if (day === 'Wednesday') {
return true;
} else {
return false;
}
}; 리팩토링하면
const plantNeedsWater = day => day === 'Wednesday' ? True : false;
Callback function (using function expression)
함수를 전달해서 상황에 맞을 때 전달된 함수를 부르는 것을 말함
즉 아래를 보면 printyes와 printno 두 가지의 callback 함수가 parameter로 전달되어서 정답이 love you인 경우 printyes()라는 callback 함수를 호출하게 되고, 아니면 printno()라는 callback 함수를 호출하게 됨
function randomquiz(answer, printyes, printno) {
if(answer === 'love you') {
printyes();
} else {
printno();
}
}
const printyes = function() {
console.log('yes');
}
const printno = function print() {
console.log('no');
};
randomquiz('worng', printyes, printno); // output : no
randomquiz('love you', printyes, printno); // output : yes
IIFE (Immediately Invoked Function Expression)
함수를 선언함과 동시에 호출하는 것으로 함수의 선언을 ()로 묶은 다음에 함수를 호출하듯이 ()를 넣어줌
(function hello() {
console.log('IIFE');
})();
📚 추가적인 이야기!
JS는 타입이 없기 때문에, 아쉽게도 함수 자체의 인터페이스를 봤을 때 문자열을 전달하는지, 숫자를 전달하는지 명확하지가 않음.
만약 type이 중요한 경우 JS에서는 난해할 수 있기에 Typescript를 이용하면 좋음
(*이미지 출처: 드림코딩 유튜브 캡쳐)
