# 자바스크립트 함수

## function 

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

![](/files/-M_zcNBu3k4t-UDq2qsK)

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

### **1. Function declaration**

```javascript
//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

![](/files/-M_zePnH2T4jqrzsdcWR)

* **타입스크립트에서는 항상 타입을 명시하여야한다.**
* **타입스크립트가 조금 더 명확하고 개발일을 쉽게 만들어줌** 
* **정확하게 무엇을 하는지 어떤값이 리턴되는지 알 수 있다.** 

### 2. parameters

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

###

### 3.Default parameters (added in ES6)

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

```

###

### 4.Rest parameters (added in ES6)

```javascript
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(지역변수)

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

:point\_right: **밖에서는 안이 보이지 않고 안에서만 밖을 볼 수 있다.**

###

### 6. Return a value

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

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

###

### 7.Early return, early exit

```javascript
// 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 종류&#x20;

### 1.Function expression

```javascript
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

```javascript
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

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

###

### 4.IIFE

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

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://leeboa.gitbook.io/study/_/undefined-1.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.