[개발폐관수련] 1.필기(window.onload, 콜백지옥, 디폴트 파라미터, 스프레드 연산자, 함수 파라미터)

개발폐관수련 1일 차. 합합!
 
스승 : ㅅㅈ
 
필기 시작.
 

1. window.onload

window.onload = () => {}

// 기존 function 문법
window.onload = function() {
  console.log('페이지 로드 완료');
};

// ES6 화살표 함수 문법
window.onload = () => {
  console.log('페이지 로드 완료');
};

 

• es6 문법으로 웹 페이지가 완전히 로드된 후에 특정 함수를 실행하도록 한다.
• jQuery의 $(document).ready() 와 비슷한 역할이라고 보면 된다. (차이점 ↓)
• $(document).ready() 는 HTML 문서 구조만 준비되면 실행된다. (외부 리소스, 스타일, 이미지 등 로드되지 않아도 실행)
• window.onload 는 웹 페이지의 모든 요소가 로드된 후 실행된다. 상대적으로 시간이 더 걸릴 수 있다.

---

2. let, const

let a = 1; // 변수 a에 1 할당
a = 2; // 변수 a에 2로 재할당

const obj = {};  // 빈 객체 obj 선언
obj['age'] = !0; // obj 객체에 'age' 속성 추가, !0은 true로 평가됨
console.log(obj); // { age: true } 출력

 

• (더 이상 var은 ..) let은 재할당이 가능한 변수 선언 방식이다.
•  const는 재할당이 불가능한 변수 선언 방식이다. 그러나 객체의 내용은 변경이 가능하다. ( 변수 자체는 재할당 불가하지만, 객체나 배열 내부의 값은 변경 가능)

---

3. 콜백, 콜백지옥

setTimeout(() => {
    console.log('함수 !!!');
}, 1000);

 

• setTimeout은 전형적인 콜백 함수의 예시다.
• 비동기로 실행되는 함수다.
• setTimeout의 두 번째 인자에 콜백 함수가 전달된다. (이 콜백함수는 지정된 시간이 지난 후 실행된다.)

즉, 콜백함수는 다른 함수의 인자로 전달되어 실행되는 함수다. 주로 비동기 작업의 완료 후 처리할 작업에 사용된다.
 

//! 콜백지옥
setTimeout(() => {
    console.log('1...');
    setTimeout(() => {
        console.log('2...');
        setTimeout(() => {
            console.log('3...');
            setTimeout(() => {
                console.log('4...');
            }, 1000);
        }, 1000);
    }, 1000);
}, 1000);

 

• 콜백 지옥... 읽기 어렵고, 관리하기 힘든 상태다. (여러 개의 비동기 작업을 중첩해서 사용할 때)
• setTimeout을 중첩하거나 여러 비동기 작업을 실행할 때 콜백 함수가 서로 겹쳐서 실행된다.

여기서, 동기와 비동기 실행 차이점 간단 정리!

• 동기 실행
• - 순차적으로 실행된다.
• - 한 작업이 끝난 후에 다음 작업이 실행된다.
• 비동기 실행
• - 병렬적으로 실행된다.
• - 작업이 끝나지 않아도 다른 작업을 동시에 진행한다

 
그렇다면, 콜백 지옥 해결 방법은?!

await !

• await는 비동기 함수 내에서 사용된다.
• 비동기 작업이 완료될 때까지 기다렸다가 다음 코드를 실행한다.
• 깔끔하고 가독성 좋게 코드를 작성할 수 있다!

(gpt에 물어본 await 사용법 : 위 콜백지옥 코드 해결 예시)

async function runTasks() {
    await new Promise(resolve => setTimeout(() => {
        console.log('1...');
        resolve();
    }, 1000));

    await new Promise(resolve => setTimeout(() => {
        console.log('2...');
        resolve();
    }, 1000));

    await new Promise(resolve => setTimeout(() => {
        console.log('3...');
        resolve();
    }, 1000));

    await new Promise(resolve => setTimeout(() => {
        console.log('4...');
        resolve();
    }, 1000));
}

runTasks();

 

• async 함수로 비동기 작업을 순차적으로 처리할 수 있게 한다.
• await 은 비동기 작업이 끝날 때까지 기다렸다가 그 후에 작업을 실행하도록 한다.
• 위 코드를 보면 new Promise(resolve => setTimeout(...))을 사용하여 setTimeout을 Promise로 감싸고, 그 후 await를 사용하여 1초 간격으로 순차적으로 실행되도록 처리했다.
• 중첩하지 않아, 코드 가독성이 좋다.

---

4. 디폴트 파라미터

function fnTest(param = 1) {
    console.log('fnTest ...');
    console.log(param);
}

function fnPaging(clickPage = 1) {
    console.log('fnPaging ...');
    console.log(clickPage);
}

 

• 함수의 매개변수에 기본값을 설정할 수 있다.
• 함수가 호출될 때 해당 매개변수를 전달받지 못하면, 설정한 기본값이 사용된다. 

// 호출
fnTest();     // 인수를 생략하여 호출
fnTest(2);    // 인수를 명시하여 호출

// 결과 : 위 호출에서 param이 생략되었기 때문에 기본값 1이 사용
fnTest ...
1

// 결과 : param에 2를 전달했기 때문에, 기본값 대신 2가 출력
fnTest ...
2

 

---

5. 스프레드 연산자...

function fnLog(...arr) {
    console.log('fnLog ...');
    console.log(arr);
}


// 필수로 받아야 하는 인자가 있는 경우
function fnLog(mustArr, ...arr) {
    console.log('fnLog ...');
    console.log(`${mustArr}!`); // mustArr는 필수
    console.log(arr);
}

 

• 그동안 참.. 궁금했던 ( ... ) ! 
  함수에 몇 개의 값을 줄지 모를 때, 스프레드 연산자를 써서 그 값을 한꺼번에 배열로 받을 수 있다.
• 전달된 모든 값을 배열로 묶어 주기 때문에 2개든 10개든 얼마든지 받아 처리할 수 있다.
• 만일 필수로 받아야 하는 인자가 있다면 스프레드 연산자 앞에 필수 매개변수를 선언하면 된다. 
• 필수 인자는 무조건! 받아야 하고 나머지 인자는 스프레드 연산자로 처리한다.

---

6. 자바스크립트는 파라미터로 함수를 받을 수 있다.

// 공통 API 처리 함수
function fnApi(cb, obj) {
    console.clear();
    console.log('fnApi ...');

    // 공통 로직 처리 (예: 백엔드 호출 및 응답 처리)
    const status = true; // 가정: 서버 응답 상태

    if (status) {
        cb(obj); // 성공 시 콜백 함수 실행
    } else {
        alert('에러'); // 실패 시 에러 알림
    }
}

// 콜백 함수 1: 기본 처리
function fnCallback(obj) {
    console.log('fnCallback ...');
    console.log(obj);
}

// 콜백 함수 2: Apple 관련 처리
function fnApple(price) {
    console.log('fnApple ...');
    const param = {}; // 필요한 파라미터 처리
    // 서버 호출 예시 (fetch 사용 가능)
}

// 콜백 함수 3: Banana 관련 처리
function fnBanana(price) {
    console.log('fnBanana ...');
}

// 호출 예시
const obj = { key: 'value' };

 

• 함수를 다른 함수의 매개변수로 전달할 수 있다.
• fnApi는 파라미터로 함수(cb)와 객체(obj)를 받아 전달받은 함수를 실행한다!
• cb: 전달받을 함수(콜백 함수), obj: cb가 처리할 것
• 여러 다른 동작(fnCallback, fnApple, fnBanana)을 fnApi로 통합하여 실행할 수 있다.
• 이 방식은 함수의 재사용성을 높인다.

// 호출!
fnApi(fnCallback, obj);
fnApi(fnApple, obj);
fnApi(fnBanana, obj);

// 결과! (순서대로)
fnApi ...
fnCallback ...
{ key: 'value' }

fnApi ...
fnApple ...

fnApi ...
fnBanana ...

 
 
 

합합