변수의 이름은 명사
함수의 이름은 동사로 작명하는 것이 기본적이다
(ex. do-something)
자바스크립트에서 Function은 Object이다.
function printHello() {
console.log('hello');
}
printHello();
위와 같은 function을 작성하게 되면 아래와 같은 'hello'가 출력이 된다
> hello
하지만 위의 function은 매우 쓸 일이 없다 보통 아래와 같이 매개변수를 받아와서 function을 작성한다
function print(massage) {
console.log('massage');
}
print('hello');
위의 코드는 print라는 function을 호출하여 message를 매개변수로 받아 출력하는 것이다
자바스크립트에서는 C 나 Java처럼 데이터의 타입이 존재하지 않는다
그래서 매개변수로 숫자로 받을 경우에는 숫자를 문자형으로 변환하여 문자로 출력이 되는데
하지만 타입스크립트에서는 데이터의 타입을 지정해 주어야 한다
데이터 타입을 지정해주는 타입스크립트가 더 좋은 (?) 이유는 함수의 인터페이스만 봐도
무엇을 하는 함수인지 한 눈에 알 수 있기 때문인 듯하다
아직 타입스크립트를 배우지 않았기 때문에 데이터를 지정해 주지 않고 코딩을 해보도록 하자!
( C언어만 3년을 공부한 나로서는 너무 적응이 되지 않는다 ㅋㅋ )
ES6에서 새로 추가되어진 기능이며 매개변수의 기본값을 설정해주는 기능이다
function showMessage(message, from) {
console.log(`${message} by ${from}`);
}
showMessage('Hi!');
위와 같이 매개변수로 message의 값은 받았지만 from의 값은 받지 않았을 경우에
> Hi! by undefined
위와 같이 undefined 라는 값이 출력이 된다 하지만 매개변수의 값이 지정되지 않았을 경우 default 값을 지정해줄 수 있는데
function showMessage(message, from = 'unknown') {
console.log(`${message} by ${from}`);
}
showMessage('Hi!');
위와 같이 default 값을 지정해놓았을 경우 unknown 이라는 값이 출력이 된다!
function에서 매개변수를 배열로 받으려면
function printAll(...args) {
for (let i = 0; i < arg.length; i++) {
console.log(args[i]);
}
}
printAll('A', 'B', 'C');
위와 같이 매개변수의 이름앞에 ... 을 붙여야한다고 배웠다
또 for 반복문을 다르게도 쓸 수 있다
for (const arg of args) {
console.log('arg');
}
위와같이 이렇게 of를 쓰거나 더 간편한 방법은
args.forEach((arg) => console.log(arg));
위와같이 forEach라는 함수형 언어를 이용해도 된다
셋 다 같은 기능을 하는 것 같은데 아직까지는 정석대로 for문을 사용하는 것이 더 편해서 많이 공부해야 할 것 같다
현업에서 자주 쓰이는 형식으로 코드의 가독성을 높이고 코드를 더욱 적게 쓰기 위해 쓰는 방식이다
function upgradeUser(user) {
if(user.point > 10) {
elseif ... else
}
}
위와 같은 형식으로 작성할 경우 매개변수의 값이 if문의 10 보다 클 경우에 조건문을 실행하는 방식이고 아닐 경우
elseif .. else 까지 이어져서 로직이 길어지게 되는데 이렇게 하기보다는
function upgradeUser(user) {
if (user.point <= 10) {
return;
}
// long upgrade logic ...
}
위의 코드처럼 조건문을 만족하지 못할 경우 빨리 리턴을 하고 아닌 경우에만 조건문에서 벗어나
long upgrade logic 에서 조건이 실행이 되는 형식이다
위에서 function을 선언한 것과 다르게 아래와 같이 선언을 할 수도 있다.
const print = function () {
console.log('print');
};
print();
위와 같이 function 을 선언함과 동시에 print라는 변수에 할당을 하게 되면 print라는 이름으로 function을 호출할 수 있게 된다
위와 같이 function의 이름 없이 선언하는 것을 anonymous function 이라고하고 이름을 지정해서 선언하는 것을 named function 이라고 한다
또 print라는 변수를 다른 변수에 할당할 수도 있다
const printAgain = print;
printAgain();
이렇게 print 변수를 printAgain에 할당하게 되면 printAgain 변수가 ' print '를 출력하게 된다
(이해할 수 없는 이상한 자바스크립트 .... )
Callback 함수의 예
function randomQuiz(answer, printYes, printNo) {
if (answer === 'love you') {
printYes();
} else {
printNo();
}
}
위와 같이 answer의 값을 받아서 'love you' 와 같다면 printYes를 , 다르면 printNo 라는 콜백 함수를 호출한다
randomQuiz 함수를 호출할 때 answer와 printYes, printNo 라는 콜백함수를 변수로 전달해야 하기 때문에 expression 두 개를 전달해야 한다
const printYes = function () {
console.log('yes!');
};
const printNo = function print() {
console.log('no!');
};
randomQuiz('wrong', printYes, printNo);
randomQuiz('love you', printYes, printNo);
위의 코드처럼 printYes, printNo를 expression 으로 선언하여 randomQuiz 함수를 호출할 때 매개변수로서 호출이 된다
printYes는 anonymous function이고 이고
printNo는 named function인데 printNo는 print라고 함수의 이름이 있는 것을 확인할 수 있다
이것은 디버깅을 할 때 stack trace에 함수의 이름이 나오기 위함이라고 한다.
또는 재귀 함수로 호출할 때에 필요하다!
Arrow function은 항상 이름이 없는 anonymous function이다.
function expression을 간편하게 해주는 아이라고 알고 있으면 될 것 같다..!
이해가 쉽도록 위에서 선언했던 function expression을 가져와서 예시를 작성해보자
const printYes = function () {
console.log('yes!');
};
이렇게 작성되어있던 function expression을 아래와 같이 Arrow function으로 쉽게 작성할 수 있다.
const printYes = () => console.log('yes!');
짜잔...!
return을 해줘야 하는 function expression을 Arrow function으로 바꿔보는 코드도 작성해보자
const add = function (a, b) {
return a + b;
};
위의 코드는 add라는 이름의 function expression이며 매개변수로 a와 b를 받아 더해서 return 하는 것이다
이를 Arrow function으로 바꿔보자
const add = (a, b) => a + b;
쨔잔....!
함수 안에서 다른 일들이 필요해서 블록 이 필요하다면
const simpleMultiply = (a, b) => {
// do something more
return a * b;
};
위와 같이 블록을 넣어서 처리할 수 있지만 대신 블럭을 사용하게 되면 return을 이용해서 값을 return 해줘야 한다!
이렇게 JavaScript의 함수의 선언과 표현을 알아보았는데 손에 익을 때까지 공부를 해야겠다