JS = procedural language 절차적인 언어 (함수가 굉장히 중요)
function = sub-program라고 불릴 정도로 프로그래밍에 있어 중요
주로 input 을 받아 처리 후 output을 제공하는 것을 함수라고 합니다.
function log(message){
console.log(message)
}
primitive type → value전달
object type → ref 전달
function changeName(obj){
obj.name='coder';
}
const ellie = {name:'ellie'}
changeName(ellie)
함수 안에서 오브젝트의 값을 변경하면 변경된 사항이 그대로 전달
function showMessage(message, from = 'unknown'){
console.log(`${message} by ${from}`)
}
showMessage('Hi')
정의되지 않은 파라미터의 값을 if문이 아닌 ='' 로 축약해서 쓸 수 있음
function printAll(...arg){
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))
}
printAll('dream','coding','ellie')
...으로 배열로 전달
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'
}
}
밖에서는 안이 보이지 않고 안에서는 밖을 볼 수 있다.
function sum (a,b){
return a+b
}
const result = sum(1,2)
console.log(`sum:${sum(1,2)}`)
return 이 없는 함수는 return undefined 가 있는 거나 다름없다.
** bad
function upgradeUser(user){
if(user.point > 10){
// long upgrade logic
}
}
** good
function upgradeUser(user){
if(user.point ≤ 10) return;
// long upgrade logic
}
first-class function
const print = function(){ // anonymous function
console.log('print')
}
print();
const printAgain = print
다른변수에 할당해도 호출이 됨.
💡 function declaration 과 function expression의 차이점은function expression 은 변수 선언 전에는 호출이 안됨.
function declaration 은 호이스팅이 되어 어디서든 호출이됨
function randomQuiz(answer,printYes,printNo){
if(answer === 'love you'){
printYes()
}else{
printNo()
}
}
// anonymous function
const printYes=function(){
console.log('yes!')
}
// named function ⇒ 디버깅이나 리컬젼(함수 안에서 함수를 부를때) 사용
const printNo = function print(){
console.log('no!')
}
randomQuiz('wrong',printYes,printNo)
randomQuiz('I love you',printYes,printNo)
// always anonymous
const simplePrint = ()⇒ console.log('simplePrint!')
const add = (a,b) ⇒ a+b
const simpleMultiply = (a,b)⇒{
//do something more
return a*b
}