Links

자바스크립트 함수

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');
})();
함수를 따로 호출하지 않아도 ()를 감싸주게되면 호출이 된다.