Arrow Function은 무엇인가? 함수의 선언과 표현
function이란?
가장 기본적인 building 블럭
서브 프로그램이라 불리고 여러번 재사용이 가능하다.
값을 개선하거나 임무를 수행하기 위해 사용된다.
function의 선언
function name(param1, param2) { body ... return; }
함수의 이름을 정하고 함수로 전달되는 매개변수의 이름을 정한 후 body의 내용을 작성한다.
주의점!
1. 하나의 함수는 하나의 기능을 하게 만들어야 한다.
2. 여러가지의 기능을 하나의 함수에 넣으면 안된다.
3. 함수의 이름을 정할때 그 함수가 동작하고자 하는 의미를 동사의 형태로 적어야 되기 때문이다.
Parameters(매개변수)
함수를 사용하기 위해서 사용되는 변수를 매개변수(parameters)라고 한다. 매개변수는 기본적으로 undefined가 기본이다. 하지만 일부 상황에서는 다른 기본 값을 설정하는 것이 유용할 수 있다.
function changeName(obj) { obj.name = 'coder'; } const ellie = {name: 'ellie'}; changeName(ellie);
Default Parameters(디폴트 매개변수)
함수를 선언할 때 매개변수의 값을 기본적으로 정해 놓은 것을 말한다.
기본 값을 정해두지만 함수 호출시 값을 전달한다면 그 값으로 대치된다.
function showMessage(message, form) { console.log(`${message} by ${form}`); } showMessage('Hi!'); // Hi! by undifined
위의 코드에서 두 개의 매개변수를 주고 출력을 할 대 하나의 값만 주게 되면 값이 없는 form은 매개변수의 기본값인 undefined가 나오게 된다.
parameter값이 전달 되지 않는 것을 방지하기 위해서는
function showMessage(message, form = 'unlnown') { console.log(`${message} by ${form}`); } showMessage('Hi!');
매개변수에 원하는 defalt값을 지정해 놓으면 사용자가 parameter를 정의하지 않았을 때 form의 값으로 대체된다.
Rest Parameter(나머지 매개변수)
매개변수의 개수를 정확히 알 수 없는 경우 사용한다.
매개변수 앞에 '...를 붙여서 선언한다.
function parinAll(...args) { for(let i = 0; i<args.length; i++) { console.log(args[i]); } } printAll('dream', 'coding', 'ellie');
printAll의 값들이 배열형태로 args에 전달이 되고 배열의 길이 만큼 i의 값을 출력한다.
물론 위처럼 for로도 할 수 있지만 더 간단하게 하기위해서
for (const arg of args) { console.log(arg); }
for(...of...)를 사용하면 간단하게 할수 있다.
args의 값들이 하나하나 arg에 할당이 되고 출력한다.
Local Scope(지역 변위)
함수 블록안에서 선언된 변수는 그 안에서만 사용이 가능하지만 함수가 2중 이상으로 되어 있다면 부모함수에 선언된 변수는 자녀함수에서 사용이 가능하다.
단! 자녀함수에서 선언된 변수는 부모함수에서 사용이 불가능하다.
let globalMessage = 'global';
function printMessage() {
let message = 'hello';
console.log(message);
console.log(globalMessage);
function printAnother() {
console.log(message); // 부모함수에서 선언된 변수는 출력가능
let childMessage = 'hello';
}
console.log(childMessage); //에러가 발생한다.
}
printMessage();
위에서 에러가 난 이유는 자식함수에서 선언된 변수 childMessage를 부모함수에서 사용하려고 했기 때문이다.
Return
함수 실행을 종료하고 주어진 값을 함수 호출지점으로 반환한다.
return[expression]
expression은 반환할 값으로 생략할 경우 undefined로 반환한다.
Early Return(현업에서 쓰이는 팁)
function upgradeUser(user) {
if(user.point > 10) {
}else if{
}else if{
}
}else{
}위에서처럼 조건문을 사용할때 조건이 많을 경우 {}안이 복잡하고 가독성이 좋지 않기 때문에
function upgradeUser(user){
if(user.point <=10) {
return;
}
}조건이 맞지 않은 경우 빠르게 return하고 조건이 맞을때만 필요한 로직들을 실행 하게하는 것이 더 효율적이다.
Function expression(함수 표현식)
변수값에 함수 표현을 담아 놓은 형태
유연한 자바스크립트 언어의 특징을 활용한 선언 방식
const print = function(){ //이름이 없는 함수를 anonymous function이라한다
console.log('print');
};
print();
const printAgain = print;
printAgain();
함수 표현식은 함수의 이름이 없는 익명함수를 변수에 할당하는 방식이다.
함수 표현식은 함수가 할당된 다음부터 호출이 가능하고
print()를 선언하기 전인 가장 상위에서 실행하게 하면(호이스팅) error가 발생한다.
Callback function
콜백함수는 다른 함수의 매개변수로 함수를 전달하고, 어떠한 이벤트가 발생한 후 매개변수로 전달한 함수가 다시 호출되는 것을 의미한다.
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('love you', printYes, printNo);printYes와 printNo 이 두 매개변수는 answer의 값이 조건에 맞거나 틀릴때 호출되는 함수를 얘기한다.
조건이 맞게되면 printYes함수를 실행하게 되고 틀리면 printNo함수를 실행하게 된다.
Arrow Function
일반 함수 표현식 보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법이다.
괄호를 사용해서 조금 더 많은 기능을 사용하게 하려면
return을 사용해서 값을 return해줘야 한다.
//매개변수가 없는 경우
const simplePrint = () =>console.log('Simple');
//매개변수가 하나인경우
const simple = a => a;
simple('123'); //'123'
//매개변수가 여러개인 경우
const simpleMulti = (a , b) => {
return a * b;
};
simpleMulti(3,8); // 24
const simple = (a, b) => { // 여러줄 썼을 때
let c = 3;
return a + b + c;
}
simple(1, 2, 3) // 6
/*
"{}"를 사용하면 값을 반환할 때 return을 사용해야합니다.
"{}"를 사용하지 않으면 undefied를 반환합니다.
"{}"을 사용할 때는 여러줄을 썼을 때 사용합니다.
*/