JavaScript : Function이란?

Function

- 여러번 재사용이 가능한 함수

- 어떠한 값을 계산하기 위해 사용

- 하나의 함수는 한 가지의 일만 할 수 있음!

'use strict';
//Function
//hi를 불러오는 함수를 만들어 보겠습니다.
function printHi(){
    console.log('Hi');
}
printHi(); // 이렇게 하면 Hi만 나오기 때문에 쓸모가 없음..
// 그래서 파라미터를 받아서 찍어줘야 한다.

function log(message){
    console.log(message);
}
//자바스크립트에서는 타입이 없기 때문에 명확하지가 않다.. string인지.. num인지
log('hihi');
log(1234);

타입이 없으므로 큰 프로젝트에서는 타입이 중요하므로 TypeScript를 사용해주는 것이 좋다.

 

https://www.typescriptlang.org/play?#code/GYVwdgxgLglg9mABAGzgcwBQFsCmBnPAQzR0QC5E8oAnGMNASjLBCwCMdqBvAKEX8QQEeOMhwA6VJlwFiOBgG4+A6jighqSAAxKAvkA 

TS Playground - An online editor for exploring TypeScript and JavaScript

 

해당 링크로 이동하면 Plyground로 가보면 TypeScript를 이용해서 코드를 작성하면 JavaScript로 어떻게 나타내는지 알려 준다.

TypeScript는 String을 받아서 : number을 이용해서 num타입 형태로 내보낼 수 있음.

---

Parameters(파라미터)

// Parameters 매개변수
// 오브젝트는 레퍼런스로 전달 됨.
function changeName(obj){
    obj.name = 'coder';
}
const kaki = { name: 'kaki'};
changeName(kaki);
console.log(kaki);

오브젝트가 만들어진 레퍼런스가 메모리에 들어감 

changeName을 사용하게 되면 kaki가 가리키고있는 레퍼런스의 name값을 coder로 변경하는 코드.

---

Default Parameters

// Default paramters
function showMessage(message, from){
    console.log(`${message} by ${from}`);
}
showMessage('Hi!');

showMessage를 통해서 message, from 두개의 파라미터를 보내야 하는데

Hi!인 하나의 파라미터 값만 보내면 console에는 ${from} 쪽에 undefined가 뜨는것을 확인할 수 있다.

---

Rest Parameters

// Rest parameters
function printAll(...hmmm){
    for(let i=0; i<hmmm.length; i++){
        console.log(hmmm[i]);
    }
    
    for(const arg of args){
    	console.log(arg);
    }
}
printAll('dream','coding','fighting');

...을 이용하면 배열형태로 전달된다.

인자를 3개를 전달하면

3개의 인자가 console에 찍히는 것을 확인할 수 있다.

---

Return

// return
function sum(a,b){
    return a+b;
}
const result = sum(1,2); // 3
console.log(`sum: ${sum(1,2)}`);

값을 리턴할 수 있고, return문 이없는 코드는 return undefined가 생략되어 있다고 생각하면 된다.

---

Anonymous Function

// 익명 함수 anonymous function
const print = function(){
    console.log('print');
};
print();

함수를 선언함과 동시에 바로 print라는 변수에 할당할 수 있음. 이렇게 이름이 없으면 어나니머스 펑션이라고 부름.

---

Callback hell

// Callback function
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('love you',printYes,printNo);

랜덤퀴즈는 파라미터로 answer, 함수yes, 함수no를 받고있음.

이렇게 상황에 맞으면 이 함수를 부르라는 뜻으로 맞으면 printYes 함수를 부르고, 틀리면 printNo 함수를 부른다.

 

printYes는 위의 익명함수를 이용해서 console에 나오도록 하고 있고,

printNo는 print라는 이름을 줘서 named function으로 사용하고 있음.

named function을 사용하는 이유는 디버깅 할 때 이용하기 위해서임.

---

Arrow function🎈

// Arrow function
// always anonymous 항상 이름이 없음.
const simplePrint = function(){
    console.log('simplePrint!');
};

const simplePrint = () => console.log('simplePrint');
const add = (a, b) => a + b;

자바의 람다식처럼 간편하게 쓸 수 있음.