프로그램 안에서도 저마다의 기능을 수행하는 함수 있음
절차적인 언어의 경우 함수가 프로그램에서 굉장히 중요한 기능을 담당함.
JS는 class가 추가되어서 object 오리엔티드 프로그래밍 언어가 아닌가요?
ㄴ 추가된 클래스도 프로토 타입을 베이스로한 가짜의 오브젝 오리엔티드임.
때문에 자바스크립트도 절차적인 언어 중 하나라고 할 수 있음.
function
- sub-program : 프로그램 안에서 각각의 작은 기능들을 수행하기 때문!
- 프로그램을 구성하는 기본적인 빌딩 블럭
- 서브 프로그램이라고도 불리며 여러번 재사용이 가능함.
- 한가지의 task나 어떠한 값을 계산하기 위해 사용됨.
1. function declaration (함수 정의)
function name(param1, param2){body... return;}
//함수 이름 지정 (파라미터 나열){함수의 기본적인 비즈니스 로직 작성, 리턴;}하나의 함수는 한가지 일만 하도록 만들어야 함.
함수 이름 지정할 땐 동사 형태로 지정 (변수는 명사로)
js에서 펑션은 오브젝트임 , 오브젝트로 간주되기때문에 펑션을 변수에 할당하거나 파라미터 전달되고 함수를 리턴할 수도 있음 .
function printHello(){
console.log('Hello');
}
printHello();js에는 타입이 없음 때문에 함수 자체 인터페이스만 보았을 때
string 전달해야하는지, 숫자도 전달해야하는지 알 수 없음
2. parameters
premitive 파라미터 : 메모리에 벨류가 저장되어 있기 때문에 벨류 전달
object 파라미터 : 메모리에 레퍼런스가 저장되어 있기 때문에 레퍼런스 전달
function changeName(obj){
obj.name = 'coder';
// 전달된 이름을 코더로 무조건 변경하는 함수
}
const ellie= {name:'ellie'};
changeName(ellie);
console.log(ellie);
출력
{name: "coder"}
// 오브젝트는 레퍼런스로 전달되기때문에 함수 안에서 오브젝트 값을 변경하게 되면 변경된 사항이 그대로 메모리에 적용되기 때문에 나중에 변경된 사항들을 확인할 수 있음. 3. default parameters
function showMessage(message, from='unknown'){
// 파라미터 옆에다가 원하는 디폴트 값 지정해놓으면 사용자가 파라미터 전달하지 않을 때 대체되어 나옴!
console.log(`${message} by ${from}`);
}
showMessage('Hi!');
출력
Hi! by undefined
-> Hi! by unknown
4. Rest parameters ...
... 배열 형태로 전달
function printAll(...args){
for(let i=0; i<args.length; i++){
//처음부터 args 갯수만큼 빙글빙글 돌면서 출력
console.log(args[i]);
}
// 간단하게 작성하는 방법 ㄱ
for (const arg of args){
console.log(arg);
}
args.forEach((arg)=> console.log(arg));
}
printAll('dream', 'coding', 'ellie');
dream, coding, ellie라는 세개의 값이 담겨져 있는 배열
5. Local scope
밖에서는 안이 보이지 않고, 안에서만 밖을 볼 수 있다 (선팅 잘된듯..)
let globalMessage = 'global'; // global variable
function printMessage(){
let message = 'hello'; // 블럭안에서 변수 선언하게 되면 지역변수 ! - 안에서만 접근 가능
console.log(message); // local variable
console.log(globalMessage);
function printAnother(){
console.log(message);
let childMessage = 'Hello';
}
console.log(childMessage);
}
printMessage();
//중첩된 함수에서 자식의 함수가 부모 함수에 정의된 변수에 접근 가능한 것이 바로 closer6. return a value
function sum(a,b){
return a+b;
}
const result = sum(1,2); //3
console.log(`sum: ${sum(1,2)}`);
리턴 타입이 없는 함수들은 return undefined; 이 들어간 것과 같음
이것은 생략 가능
7. early return, early exit 해라?
//bad
function upgradeUser(user){
if (user.point > 10) {
//long upgrade logic...
//유저의 포인트가 10 이상일 경우에만 무언가를 진행하는 로직이 있다면
//블럭 안에서 로직을 많이 작성하면 가독성이 떨어짐
}
}
//good
function upgradeUser(user){
if (user.point <= 10){
return;
}
//long upgrade logic...
// 조건이 맞지 않을 때는 리턴해서 빨리 함수를 종료하고
// 조건이 맞을때만 필요한 로직을 실행
}
- function expression
const print = function() {
//함수를 선언함과 동시에 바로 print라는 변수에 할당
//이렇게 함수에 이름이 없는 것을 unonymous function 이라고 함
console.log('print');
};
print();
const printAgain = print;
printAgain();
const sumAgain = sum;
console.log(sumAgain(1,3));function declaration 과 function expression의 차이점
function expression은 할당된 다음부터 호출이 가능한 반면
function declaration은 hoist가 가능 (함수가 선언되기 이전에 호출하는 것이 가능)
first-class function
펑션은 다른 변수와 마찬가지로 변수에 할당이 되고 펑션에 파라미터로 전달이 되며 리턴값으로도 리턴이 된다 . 그것을 가능하게 한 것이 function expression. 함수를 선언함과 동시에 프린트라는 변수에 할당하는 것을
- callback function
function randomQuiz (answer, printYes, printNo){
// 상황에 맞게 함수를 호출하는 것
if (answer === 'love you'){
printYes();
} else {
printNo();
}
}
// 정답이 love you인 경우에만 printYes라는 콜백함수 호출
// 정답이 아니면 printNo라는 콜백함수 호출 - arrow function
const simplePrint=function(){
console.log('simplePrint');
};
//arrow function으로 바꾸기
const simplePrint = () => console.log('simplePrimt');
const add = (a+b) => a+b;
//항상 이름이 없는 함수 - IIFE : Immediately Invoked Function Expression
function hello(){
console.log('IIFE');
}
hello();
함수를 선언함과 동시에 호출하는 방법
(function hello(){
console.log('IIFE');
})();