자바스크립트 함수

function

sub-program이라고도 한다. 프로그렘 안에서 각각의 작은단위의 기능들을 수행함

어떠한 값을 잘 받아서 return 해줌

1. Function declaration

//function name(param1, param2) {body ... return; }
// one function === one thing 
// naming : doSomething, command , verb
// createCardAndPoint -> createCard, createPoint (하나의 함수는 하나의 일을하도록 하는게 좋다.)

function printHello(){
  console.log('Hello');
}

printHello(); // Hello만 출력됨 

// 위의 코드를 좀 더 유용한 함수로 만드려면 

function log(message){
  console.log(message); 
}

log('Hello2'); // //파라미터로 전달된 메서지를 화면에 출력할 수 있게됨.

TypeScript

• 타입스크립트에서는 항상 타입을 명시하여야한다.

• 타입스크립트가 조금 더 명확하고 개발일을 쉽게 만들어줌

• 정확하게 무엇을 하는지 어떤값이 리턴되는지 알 수 있다.

2. parameters

function changeName(obj){
  obj.name = 'coder';
}
const ellie = { name: 'ellie'};
changeName(ellie);
console.log(ellie); //coder

3.Default parameters (added in ES6)

function showMessage(messagem from ='unknown'){
  console.log(`${message} by ${from}`);
}
 showMessage('Hi!'); // Hi by unknown 

4.Rest parameters (added in ES6)

function printAll(...args){ // 배열 형태로 전달됨 
for(let i = 0; i < args.length; i++){
  console.log(args[i]);
 }
 
for (const arg of args){
   console.log(arg); // arg의것들이 하나씩 지정이 되면서 출력됨 
 }
 
 args.forEach((arg) => console.log(arg)); // 인자를 하나하나 불러옴
}
printAll('dream', 'coding', 'ellie'); // dream coding ellie
// 세개의 인자를 전달함

5.Local scope(지역변수)

let globalMessage = 'global'; // global varialble 전역변수 
function printMessage(){
  let message = 'hello';
  console.log(message); // local variable 지역변수 안에서만 접근 가능 
  console.log(globalMessage);
}
printMessage();

👉 밖에서는 안이 보이지 않고 안에서만 밖을 볼 수 있다.

6. Return a value

function sum(a, b){
return a + b; 
}

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

7.Early return, early exit

// bad
function upgradeUser(user){
  if(user.point > 10 ){
    // long upgrade loginc...
  }
}

//good 
function upgradeUser(user){
 if(uer.point <=10){
   return; // 값이 undefinded , null , 조건에 맞지 않는 경우 빨리 리턴하는것이 좋다.
 }
 //  long upgrade loginc...

Fuction 종류

1.Function expression

const pring = fuction (){// amomymous function 이름이 없는 함수 
console.log('print');
};
print();
const pringAagin = print;
pringAagin();
const sumAgain = sum; 
console.log(sumAgaim(1,3));

2. Callback fuction using function expression

function randomQuiz(answer, printYes , printNo ){
// 함수를 전달해서 상황에 맞는것을 출력하는것을 콜백함수라고 한다.
  if(answer === 'love you'){
    printYes(); // 정답이 love you 일때 
  }else{
    printNo();
  } 
}

// amomymous function
const printYes = function() {
  console.log('yes');
}

// named function
const printNo = function print(){
console.log('no');
}

randomQuiz('wrong',printYes, printNo); // no
randomQuiz('love you',printYes, printNo); //yes

3.Arrow function

const simplePrint () = > consloe.log ('simplePrint');
const add = (a,b) => a + b; // 간결하게 사용이 가능하다.
const simpleMultiply = (a,b) =>{
 // {}블럭을 사용할 경우 받드시 return을 해주어야한다.
  return a * b;
}

4.IIFE

(function hello(){
  console.log('IIFE');
})();

함수를 따로 호출하지 않아도 ()를 감싸주게되면 호출이 된다.