Function(함수)
- 프로그램을 구성하는 기본적인 빌딩 블록
- subprogram이라 불리며, 여러번 재사용이 가능하다.
- 대체로 한가지의 일이나 어떠한 값을 계산하기 위해 쓰인다.
parameter 같은 input을 받아 처리해서 output을 만들어낸다.
function의 이름을 짓는 것도 중요하다.
1. function declaration (함수 선언)
기초 문법
function name(param1, param2) {
body...
return;
}- 하나의 함수는 한가지의 일만 하도록 만들어야 한다.
- 변수이름을 지정할땐 명사로 지정했지만, 함수는 동사로 지정한다.
- 함수이름은 camelCase로 지어야한다.
- createCardAndPoint -> createCard, createPoint
- 함수는 자바스크립트에서 object이다.
아래 함수는 쓸모가 없다.
function printHello() {
console.log('hello');
}
printHello(); // hello 함수 호출message라는 parameter를 지정해줌.
log('hello')안에 hello라는 문자열이 함수선언 부분에서 message라는 parameter로 전달이 되고 함수 내부에서는 message가 hello라는 값을 가진 변수처럼 활용이 되서 hello라는 값이 출력이 되는 것
function log(message) { //message->parameter
console.log(message);
}
log('hello'); // hello 함수 호출2. parameters (매개변수) & argument(인자)
parameter
- primitive parameters: passed by value / 메모리에 value가 저장되어 있음.
- obejct parameters: passed by reference / 메모리에 reference가 저장되어 있음.
function changeName(obj) {
obj.name = 'coder'
}
const julie = { name: 'julie' };
changeName(julie);
console.log(julie);// name: 'juie'지금 changeName이라는 함수는 전달된 obj(parameter)의 이름을 무조건 'coder'로 변환하는 함수이다.
julie라는 const를 정의한 다음 julie라는 object를 만들어서 할당해주면 메모리에는 이 object가 만들어진 reference가 메모리에 들어가게 되고 이 reference는 이 object를 메모리 어딘가 가르키고 있다.
argument
function changeName(username) {
return `${username}님`
}
console.log(changeName('julie')) //julie님위에 'julie'와 같이 실직적으로 들어가는 값을 argument(인자)라고 한다.
3. Default parameters
from이 정의되어 있지 않음.
function showMessage(message, from) {
console.log(`${message} by ${from}`);
}
showMessage('HI!') // HI! by undefined / from이 정의되어 있지 않음.'unknown'이라는 default 값을 지정해줬다.
from에 값을 지정해주지 않았지만 unknown이라고 출력되는걸 볼 수 있다.
function showMessage(message, from = 'unknown') { // default 지정
console.log(`${message} by ${from}`);
}
showMessage('HI!') // HI! by unknown 4. Rest parameters
parameter앞에 ...을 붙이면 rest parameter이다.
이것은 바로 배열 형태로 전달이 된다.
function printAll(...args) {
for (let i = 0; i < args.length; i++) {
console.log(args[i]);
}
for (const arg of args) {
console.log(arg);
}
args.forEach((arg) => console.log(arg));
}
// 3가지 동일하지만 간단하게 표현 할 수 있음.
printAll('a', 'b', 'c'); // a, b, c5. Local scope(지역변수)
밖에서는 안이 보이지 않고 안에서만 밖을 볼 수 있다.
블럭({}) 안에서 변수를 선언하는것이 지역변수이다.
지역변수를 블록 밖에서 호출하면 에러가 발생한다.
let globalMessage = 'global'; //global variable
function printMessage() {
let message = 'hello' // local variable
console.log(message); // hello
console.log(globalMessage); // global
}
printMessage();6. Return
함수에서는 parameter들을 전달받아서 계산된 값을 return할 수 있다.
return이 없는 함수들은 return undefined;와 같다. return은 생략 가능하다.
return이 실행된 뒤에는 그 지점에서함수가 종료된다.
return을 사용하고 함수를 호출하기만 하면 return값으로 parameter가 대체되기만 하지 아무값도 출력되지 않는다.
function sum(a, b) {
return a + b;
}
const result = sum(1, 2); // 3
console.log(`sum: ${sum(1, 2)}`);Function expression (함수 표현식)
- 함수는 다른 변수와 같은 취급을 받는다.
- 변수에 할당이 가능하다.
- 함수의 parameter로 전달이 된다.
- return값으로 return이 된다.
1. Function expression (함수 표현식)
function declaration과function expression의 가장 큰 차이점은 hoist다.
function declaration은 hoisting이 된다.
함수가 선언되기 이전에 호출해도 출력이된다.
const print = function () { // anonymous function
console.log('print');
};
print();
const printAgiain = print;
printAgiain();
const sumAgain = sum;
console.log(sumAgain(1, 3));2. callback function using function expression
randomQuiz라는 함수를 보면 answer와 정답이 맞으면 부르게 될 함수printYes와 정답이 틀리면 부르게 될 함수printNo printYes,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('wrong', printYes, printNo); // no!
randomQuiz('love you', printYes, printNo); // yes!3. Arrow Function
항상 이름이 없는 anonymous function이다.
const simplePrint = function () {
console.log('simplePrint!')
};
const simplePrint = () => console.log('simplePrint!');
// 위와 아래는 동일하다.
----------------------------------------------------------------
const add = (a, b) => a + b;
const add = function (a, b) {
return a + b;
};
// 위와 아래는 동일하다.
----------------------------------------------------------------
const simpleMultiply = (a, b) => {
//do something more
return a * b;
}; // 함수안에서 좀 더 다양한 일을 하기 위해 블록이 필요하다면 블록을 넣을 수 있다.
// 그러나 블록을 사용한다면 return을 사용해야한다!!!IIFE
Immediately Invoked Function Expression
함수를 선언함과 동시에 호출하는 법 !
(Function hello() {
console.log('IIFE');
})();