상세 컨텐츠

본문 제목

[javaScript] 콜백함수, 콜백에서 프로미스, patch put 차이, 클로저

카테고리 없음

by esoesmio 2024. 5. 14. 22:18

본문

### 콜백 함수와 클로저

#### 콜백 함수
콜백 함수는 다른 함수에 인수로 전달되는 함수입니다. 이 함수는 외부 함수에 의해 그 함수의 내부에서 호출될 수 있습니다. 콜백은 비동기 작업을 처리하거나 이벤트가 발생했을 때 호출되는 이벤트 리스너에서 흔히 사용됩니다.

**예제:**
```javascript

function greeting(name) {
    alert('Hello ' + name);
}

function processUserInput(callback) {
    var name = prompt('Please enter your name.');
    callback(name);
}

processUserInput(greeting);


```
위 예제에서 `processUserInput` 함수는 사용자로부터 이름을 입력받은 후 `greeting` 함수(콜백 함수)를 호출합니다.

#### 클로저
클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합입니다. 클로저는 함수가 생성될 때의 스코프에서 변수에 접근할 수 있도록 해주며, 이는 함수가 외부 스코프에 있는 변수와 상호작용할 수 있게 해줍니다.

**예제:**
```javascript

function makeCounter() {
    let count = 0;
    return function() {
        return count++; // `count`는 외부 함수의 지역 변수에 접근
    };
}

let counter = makeCounter();
console.log(counter()); // 0
console.log(counter()); // 1
console.log(counter()); // 2


```
이 예에서 `makeCounter`는 클로저를 생성합니다. `counter` 함수는 `makeCounter` 함수의 `count` 변수를 기억하고 있으며, 이를 조작할 수 있습니다.

### REST API에서의 PATCH와 PUT의 차이

#### PATCH
`PATCH` 메소드는 리소스의 부분적인 업데이트를 수행합니다. 이 메소드는 주어진 리소스의 일부 필드만을 변경할 때 사용됩니다.

**예제:**
```http

PATCH /users/1 HTTP/1.1
Host: example.com
Content-Type: application/json

{
    "email": "newemail@example.com"
}


```
위 예제는 사용자의 이메일 주소만을 업데이트합니다.

#### PUT
`PUT` 메소드는 리소스의 전체 교체를 수행합니다. 기존 리소스의 모든 필드를 새 값으로 대체해야 합니다. 제공되지 않은 필드는 기본값 또는 `null`로 설정됩니다.

**예제:**
```http

PUT /users/1 HTTP/1.1
Host: example.com
Content-Type: application/json

{
    "name": "John Doe",
    "email": "johndoe@example.com",
    "age": 30
}


```
위 예제는 사용자 정보 전체를 업데이트합니다. 기존 값은 모두 새로운 값으로 대체됩니다.

### 콜백에서 프로미스로 변환, 그 반대의 예제

#### 콜백에서 프로미스로 변환 예제
```javascript

// 콜백 방식
function getData(callback) {
    setTimeout(() => {
        callback(null, "Data loaded");
    }, 1000);
}

getData((err, data) => {
    if (err) {
        console.error(err);
    } else {
        console.log(data);
    }
});

// 프로미스 방식으로 변환
function getData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data loaded");
        }, 1000);
    });
}

getData().then(data => console.log(data)).catch(err => console.error(err));


```

#### 프로미스에서 콜백으로 변환 예제
```javascript

// 프로미스 방식
function getData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data loaded");
        }, 1000);
    });
}

getData().then(data => console.log(data));

// 콜백 방식으로 변환
function getData(callback) {
    setTimeout(() => {


        callback(null, "Data loaded");
    }, 1000);
}

getData((err, data) => {
    if (err) {
        console.error(err);
    } else {
        console.log(data);
    }
});


```
이 예제들은 비동기 작업을 처리하는 두 가지 다른 접근 방식을 보여줍니다. 프로미스는 에러 처리와 연쇄적인 비동기 호출을 관리하기 더 깔끔하고 효율적인 방법을 제공합니다.

 
 
 
 

댓글 영역