Tutorial/JavaScript

자바스크립트 기초 마스터

by @webs 2024. 06. 01.
03.

자바스크립트 배우기 : 데이터 실행하기

목록 보기 영상 보기

소개

안녕하세요! 웹스토리보이입니다. 이 강의는 자바스크립트 초급부터 고급까지 아우르는 자바스크립트 핵심 개념을 다루는 기본서 강의입니다. 일반적인 자바스크립트 강의와는 목표와 방식이 다릅니다. 여기에서는 자바스크립트를 어떻게 단순하게 이해하고, 현실적으로 활용할 수 있는지를 고려하여 만들어진 내용입니다.

자바스크립트를 배우면서 때로는 이해하기 어려운 부분이나 무엇을 해야 하는지 혼란스러운 부분이 있을 수 있습니다. 그런 어려움을 극복하고 불필요한 시간 낭비를 줄이기 위해 이 강의는 차별화된 접근 방식을 채택하였습니다. 또한, 개인적으로도 어려움을 겪었던 부분들을 고려하여 설명하였습니다.

이 강의의 주요 목표는 자바스크립트를 학습하면서, 이론 뿐만 아니라 실제로 어떻게 활용할 수 있는지를 강조하는 것입니다. 이를 위해 강의는 크게 네 가지 주요 영역으로 구성되었습니다. 데이터 저장, 데이터 불러오기, 데이터 실행, 그리고 데이터 제어입니다. 이렇게 체계적으로 기초를 다지고 나서 실제 상황에 유용하게 활용할 수 있는 실용적인 예제를 다룰 것입니다. 이를 통해 프로그래밍 실력을 크게 향상시킬 수 있는 기회를 가지게 될 것입니다. 이 강의를 통해 자바스크립트의 세계에 더욱 가깝게 다가갈 수 있길 바랍니다.

인덱스

데이터 실행하기

자바스크립트를 포함한 모든 프로그래밍 언어에서 데이터를 실행한다는 것은, 저장된 데이터를 활용하여 프로그램이 실제 작업을 수행하도록 하는 과정을 의미합니다. 이는 데이터를 불러오는 것에서 한 걸음 더 나아가, 그 데이터를 사용하여 계산을 수행하거나, 조건에 따른 결정을 내리거나, 사용자와의 상호작용을 구현하는 등의 작업을 포함합니다. 자바스크립트에서 데이터 실행은 웹 페이지에 동적인 기능을 추가하거나, 사용자 입력을 처리하고, 데이터를 분석하여 결과를 도출하는 등의 다양한 방식으로 이루어질 수 있습니다.

01. 함수 : 선언적 함수

선언적 함수는 function 키워드를 사용하여 정의된 함수입니다. 

{
        function func(){
                console.log("01. 함수가 실행되었습니다.");        // 01. 함수가 실행되었습니다. 
        }
        func();     // 함수 호출
}

선언적 함수(Declarative Function)는 JavaScript에서 함수를 정의하는 한 가지 방법입니다. 이러한 함수는 function 키워드를 사용하여 정의되며, 함수 선언문(Function Declaration)이라고도 합니다. 선언적 함수는 코드가 실행되기 전에 호이스팅(hoisting)되기 때문에, 정의된 위치에 상관없이 코드 어디에서나 호출할 수 있습니다. 호이스팅(Hoisting)은 JavaScript의 독특한 동작 방식으로, 변수와 함수 선언이 실제 코드가 실행되기 전에 해당 스코프의 최상위로 "끌어올려지는" 것처럼 동작하는 현상을 말합니다. 즉, 코드 작성 순서에 상관없이 변수와 함수 선언이 최상위에서 처리되는 것처럼 보이게 됩니다.

  • function func() { ... } → 이 부분은 func라는 이름의 함수를 정의합니다. 함수 정의는 function 키워드로 시작하며, 함수 이름(func)을 지정한 후 괄호 ()를 사용하여 함수의 매개변수를 정의할 수 있습니다. 이 예제에서는 매개변수를 사용하지 않는 간단한 함수를 정의하고 있습니다. 함수의 내용은 중괄호 {} 안에 위치하며, 이 부분에는 함수가 실행될 때 수행할 코드를 작성합니다.
  • console.log("1. 함수가 실행되었습니다."); → 이 부분은 함수 내부에서 실행되는 코드입니다. console.log 함수를 사용하여 콘솔에 "1. 함수가 실행되었습니다."라는 문자열을 출력하고 있습니다. 이 코드는 함수가 호출되었을 때 실행됩니다.
  • func(); → 이 부분은 func라는 함수를 호출하는 코드입니다. 함수를 호출할 때 함수 이름 뒤에 괄호 ()를 사용하고, 필요한 경우 함수에 전달할 인자(매개변수)를 괄호 안에 넣어줄 수 있습니다. 이 예제에서는 매개변수를 사용하지 않으므로 괄호 안이 비어있습니다. 함수 호출은 함수 내의 코드를 실행시키는 역할을 합니다.
함수란?

함수는 프로그래밍에서 특정 작업을 수행하도록 설계된 코드 블록입니다. JavaScript에서는 함수를 사용하여 코드의 재사용성을 높이고, 코드를 구조화하며, 복잡한 문제를 더 작고 관리 가능한 단위로 나눌 수 있습니다. 함수는 입력(인수)을 받아 작업을 수행하고, 결과(반환값)를 출력할 수 있습니다.

  • 함수 선언: 함수의 이름, 매개변수(인수), 그리고 함수가 수행할 코드 블록을 정의합니다.
  • 매개변수(인수): 함수가 호출될 때 외부로부터 전달받는 값입니다.
  • 반환값: 함수가 작업을 수행한 후 반환하는 값입니다. 반환값이 없는 함수도 있습니다.

함수의 주요 특징

  • 재사용성: 한 번 정의한 함수는 여러 번 호출하여 재사용할 수 있습니다.
  • 모듈화: 함수를 사용하면 코드를 더 작은 단위로 나누어 관리할 수 있습니다.
  • 추상화: 복잡한 작업을 함수로 캡슐화하여, 사용자는 함수의 내부 구현을 몰라도 함수를 사용할 수 있습니다.

요약

  • 함수는 특정 작업을 수행하는 코드 블록입니다.
  • 함수를 표현식하는 방식은 여러가지가 있습니다.(선언적 함수, 익명함수, 매게변수 함수, 리턴 함수)
  • 화살표 함수는 ES6에서 도입된 간결한 함수 표현식입니다.
  • 함수를 사용하면 코드의 재사용성, 모듈화, 추상화가 가능해져 더 유지보수하기 쉬운 코드를 작성할 수 있습니다.
02. 함수 : 익명 함수

익명 함수는 변수에 함수를 할당하여 사용하는 함수입니다. 

{
        const func = function(){
                console.log("02. 함수가 실행되었습니다.");      // 02. 함수가 실행되었습니다.
        }
        func();
}

익명 함수(Anonymous Function)는 이름이 없는 함수를 의미합니다. 이러한 함수는 주로 함수 표현식이나 콜백 함수로 사용됩니다. 익명 함수는 한 번만 사용되거나 특정 컨텍스트에서만 사용될 때 유용합니다.

  • const func = function() { ... } → 이 부분은 func라는 이름의 상수 변수를 선언하고, 이 변수에 익명 함수를 할당합니다. 익명 함수란 이름이 없는 함수로, 함수를 변수에 할당하여 사용할 때 주로 활용됩니다. 이 예제에서는 함수를 선언하면서 function 키워드 대신 function()과 같은 형태로 함수를 정의하고 있습니다.
  • console.log("02. 함수가 실행되었습니다."); → 이 부분은 익명 함수 내부에서 실행되는 코드입니다. 익명 함수가 호출되면 이 코드가 실행되어 콘솔에 "02. 함수가 실행되었습니다."라는 문자열을 출력합니다.
  • func(); → 이 부분은 func라는 변수에 할당된 함수를 호출하는 코드입니다. 변수 func에는 익명 함수가 할당되어 있으므로 이 함수를 호출하기 위해서 func()와 같이 괄호를 사용합니다. 함수 호출은 함수 내의 코드를 실행시킵니다.
03. 함수 : 매개변수 함수

매개 변수가 있는 함수는 매개 변수를 통해 함수 내부로 값을 전달하는 함수입니다. 

{
        // 01 선언적 함수를 이용한 매개변수
        function func(str){
                console.log(str);       // 03. 함수가 실행되었습니다.
        }
        func("03. 함수가 실행되었습니다.");

        // 02 익명 함수를 이용한 매개변수
        const func1 = function(str){
                console.log(str);       // 03. 함수가 실행되었습니다.
        }
        func1("03. 함수가 실행되었습니다.");
}

매개 변수가 있는 함수는 함수 정의 시 입력값을 받아들이기 위해 정의된 변수(매개 변수)를 포함하는 함수입니다. 매개 변수는 함수가 호출될 때 제공된 인수로 채워지며, 함수 내부에서 사용됩니다. 매개 변수는 함수의 유연성을 높여주고, 다양한 입력값을 처리할 수 있도록 합니다.

  • 01 → "func"라는 이름의 선언적 함수를 정의하고 있습니다. 함수 이름을 가지고 있으며 함수 내부에서 console.log를 사용하여 전달된 문자열 str을 콘솔에 출력합니다. 그런 다음, "func" 함수를 호출하고 문자열 "3. 함수가 실행되었습니다."을 인자로 전달하여 실행합니다.
  • 02 → 익명 함수를 생성하고 "func1"이라는 상수 변수에 할당합니다. 이 함수도 전달된 문자열 str을 콘솔에 출력하는 역할을 합니다
04. 함수 : 리턴값 함수

리턴 값이 있는 함수는 함수가 실행된 후에 반환하는 값이 있는 함수를 말합니다 

{
        // 01 선언적 함수를 이용한 리턴값 함수
        function func1(){
                return "04. 함수가 실행되었습니다.";        // 04. 함수가 실행되었습니다.
        }
        console.log(func1());

        // 02 익명 함수를 이용한 리턴값 함수
        const func2 = function(){
                return "04. 함수가 실행되었습니다.";        // 04. 함수가 실행되었습니다.
        }
        console.log(func2());
}

리턴 값이 있는 함수는 함수가 작업을 수행한 후 결과를 호출자에게 반환하는 함수입니다. return 키워드를 사용하여 반환 값을 명시합니다. 반환 값은 함수 호출의 결과로 사용될 수 있으며, 변수에 저장되거나 다른 함수의 인수로 전달될 수 있습니다. 다음은 리턴값을 이용한 함수를 두 가지 유형으로 보여주는 예제입니다.

  • 01 → "func"라는 이름의 선언적 함수를 정의하고 있습니다. 이 함수는 매개변수를 받지 않고, 문자열 "04. 함수가 실행되었습니다."를 반환합니다. 그런 다음 "func" 함수를 호출하고 그 반환값을 console.log를 사용하여 콘솔에 출력합니다.
  • 02 → 익명 함수를 생성하고 "func1"이라는 상수 변수에 할당하고 있습니다. 익명 함수는 이름이 없는 함수로, 함수를 변수에 할당하여 사용합니다. "func1" 함수도 매개변수를 받지 않으며, 함수 내부에서는 "04. 함수가 실행되었습니다."라는 문자열을 반환합니다. 그런 다음 "func1" 함수를 호출하고 반환된 값을 console.log를 사용하여 콘솔에 출력합니다.
05. 함수 : 매개변수 + 리턴값 함수

매개변수와 리턴 값을 같이 사용하는 형태의 함수입니다. 

{
        // 01 선언적 함수를 이용한 매개변수 + 리턴값 함수
        function func1(str){
                return str;
        }
        console.log(func1("05. 함수가 실행되었습니다."));

        // 02 익명 함수를 이용한 매개변수 + 리턴값 함수
        const func2 = function(str){
                return str;
        }
        console.log(func2("05. 함수가 실행되었습니다."));
}

리턴값을 이용한 함수를 두 가지 유형으로 보여주는 예제입니다.

  • 01 → "func"라는 이름의 선언적 함수를 정의하고 있습니다. 이 함수는 매개변수를 받지 않고, 문자열 "04. 함수가 실행되었습니다."를 반환합니다. 그런 다음 "func" 함수를 호출하고 그 반환값을 console.log를 사용하여 콘솔에 출력합니다.
  • 02 → 익명 함수를 생성하고 "func1"이라는 상수 변수에 할당하고 있습니다. 익명 함수는 이름이 없는 함수로, 함수를 변수에 할당하여 사용합니다. "func1" 함수도 매개변수를 받지 않으며, 함수 내부에서는 "04. 함수가 실행되었습니다."라는 문자열을 반환합니다. 그런 다음 "func1" 함수를 호출하고 반환된 값을 console.log를 사용하여 콘솔에 출력합니다.
06. 화살표 함수 : 선언적 함수

선언적 함수를 화살표 함수로 표현한 함수입니다. 

{
        func = () => {
                console.log("06. 함수가 실행되었습니다.");   // 06. 함수가 실행되었습니다.
        }
        func();  
}

이 코드는 간단한 화살표 함수를 사용하여 함수를 정의하고 호출하는 예제입니다. 함수를 호출할 때 func()와 같이 호출하면 함수 내의 코드가 실행되어 원하는 동작을 수행합니다.

  • func라는 변수에 화살표 함수를 정의합니다. 화살표 함수는 매개변수가 없고, 실행될 때 "06. 함수가 실행되었습니다."라는 문자열을 콘솔에 출력하는 함수를 정의합니다.
  • func()를 호출합니다. 정의한 화살표 함수가 실행되며, 결과적으로 "06. 함수가 실행되었습니다."라는 메시지가 콘솔에 출력됩니다.
화살표 함수란?

화살표 함수(Arrow Function)는 ES6(ECMAScript 2015)에서 도입된 함수 정의 방식입니다.

  • 함수 선언: 함수의 이름, 매개변수(인수), 그리고 함수가 수행할 코드 블록을 정의합니다.
  • 매개변수(인수): 함수가 호출될 때 외부로부터 전달받는 값입니다.
  • 반환값: 함수가 작업을 수행한 후 반환하는 값입니다. 반환값이 없는 함수도 있습니다.

함수의 주요 특징

  • 재사용성: 한 번 정의한 함수는 여러 번 호출하여 재사용할 수 있습니다.
  • 모듈화: 함수를 사용하면 코드를 더 작은 단위로 나누어 관리할 수 있습니다.
  • 추상화: 복잡한 작업을 함수로 캡슐화하여, 사용자는 함수의 내부 구현을 몰라도 함수를 사용할 수 있습니다.

요약

  • 함수는 특정 작업을 수행하는 코드 블록입니다.
  • 함수를 표현식하는 방식은 여러가지가 있습니다.(선언적 함수, 익명함수, 매게변수 함수, 리턴 함수)
  • 화살표 함수는 ES6에서 도입된 간결한 함수 표현식입니다.
  • 함수를 사용하면 코드의 재사용성, 모듈화, 추상화가 가능해져 더 유지보수하기 쉬운 코드를 작성할 수 있습니다.
07. 화살표 함수 : 익명 함수

익명 함수를 화살표 함수로 표현한 함수입니다. 

{
        const func = () => {
                console.log("07. 함수가 실행되었습니다.");   // 07. 함수가 실행되었습니다.
        };
        func();
}

이 코드는 간단한 화살표 함수를 사용하여 함수를 정의하고 호출하는 예제입니다. 함수를 호출할 때 func()와 같이 호출하면 함수 내의 코드가 실행되어 원하는 동작을 수행합니다.

  • func라는 변수에 화살표 함수를 정의합니다. 화살표 함수는 매개변수가 없고, 실행될 때 "07. 함수가 실행되었습니다."라는 문자열을 콘솔에 출력하는 함수를 정의합니다.
  • func()를 호출합니다. 정의한 화살표 함수가 실행되며, 결과적으로 "07. 함수가 실행되었습니다."라는 메시지가 콘솔에 출력됩니다.
08. 화살표 함수 : 매개변수 함수

매개변수가 있는 있는 함수(선언적 함수, 익명 함수)를 화살표 함수로 표현한 함수입니다. 

{
        // 01 선언적 함수 => 화살표 함수
        func = (str) => {
                console.log(str);       // 08. 함수가 실행되었습니다.
        }
        func("8. 함수가 실행되었습니다.");

        // 02 익명 함수 => 화살표 함수
        const func1 = (str) => {
                console.log(str);       // 08. 함수가 실행되었습니다.
        }
        func1("8. 함수가 실행되었습니다.");
}

이 코드는 선언적 함수와 익명 함수를 화살표 함수로 변환한 예제입니다. 화살표 함수를 사용하면 코드가 더 간결해지고, 함수를 변수에 할당하여 사용할 때 편리합니다.

  • 01 → func라는 변수에 선언적 함수를 정의합니다. 이 함수는 str 매개변수를 받고, 받은 문자열을 콘솔에 출력합니다. 그런 다음, func("8. 함수가 실행되었습니다.");를 호출하여 함수를 실행합니다. 결과적으로 "8. 함수가 실행되었습니다."라는 문자열이 콘솔에 출력됩니다.
  • 02 → func1라는 변수에 화살표 함수를 정의합니다. 이 화살표 함수는 str 매개변수를 받고, 받은 문자열을 콘솔에 출력합니다. 그런 다음, func1("8. 함수가 실행되었습니다.");를 호출하여 함수를 실행합니다. 결과적으로 또 다른 "8. 함수가 실행되었습니다."라는 문자열이 콘솔에 출력됩니다.
09. 화살표 함수 : 리턴값 함수

리턴값이 있는 있는 함수(선언적 함수, 익명 함수)를 화살표 함수로 표현한 함수입니다. 

{
        // 01 선언적 함수 => 화살표 함수
        func1 = () => {
                return "09. 함수가 실행되었습니다.";
        }
        console.log(func1());       // 09. 함수가 실행되었습니다.

        // 02 익명 함수 => 화살표 함수
        const func2 = () => {
                return "09. 함수가 실행되었습니다.";
        }
        console.log(func2());       // 09. 함수가 실행되었습니다.
}

이 코드는 선언적 함수와 익명 함수를 화살표 함수로 변환하고 호출하는 예제입니다. 화살표 함수를 사용하면 코드가 더 간결해지고 함수를 변수에 할당하여 사용할 때 편리합니다.

  • 01 → func1이라는 화살표 함수를 정의합니다. 화살표 함수는 매개변수가 없고, "9. 함수가 실행되었습니다."라는 문자열을 반환합니다. 그런 다음, console.log(func1());를 호출하여 함수를 실행하고 반환값을 콘솔에 출력합니다. 결과적으로 "9. 함수가 실행되었습니다."가 콘솔에 출력됩니다.
  • 02 → func2라는 변수에 화살표 함수를 정의합니다. 화살표 함수는 매개변수가 없고, "9. 함수가 실행되었습니다."라는 문자열을 반환합니다. 그런 다음, console.log(func2());를 호출하여 함수를 실행하고 반환값을 콘솔에 출력합니다. 결과적으로 또 다른 "9. 함수가 실행되었습니다."가 콘솔에 출력됩니다
10. 화살표 함수 : 매개변수 + 리턴값 함수

화살표 함수의 여러가지 형태와 약식 문법을 표현한 함수입니다. 

{
        // 01 익명 함수 + 매개변수 + 리턴값 함수
        const func = (str) => {
                return str;
        }
        console.log(func("10. 함수가 실행되었습니다."));    // 10. 함수가 실행되었습니다.

        // 02 매개변수 한개일때 괄호 생략 가능
        const func2 = str => {
                return str;
        }
        console.log(func2("10. 함수가 실행되었습니다."));   // 10. 함수가 실행되었습니다.

        // 03 리턴 생략
        const func3 = str => str;
        
        console.log(func3("10. 함수가 실행되었습니다."));   // 10. 함수가 실행되었습니다.

        // 04 선언적 함수 (가독성X)
        func4 = str => str;
        
        console.log(func4("10. 함수가 실행되었습니다."));   // 10. 함수가 실행되었습니다.
}
  • 익명 함수 + 매개변수 + 리턴값 함수 → func에 익명 화살표 함수를 할당하고, 매개변수 x를 받아서 그 값을 반환하는 함수를 정의합니다. 이후 함수를 호출하여 매개변수로 100을 전달하고 반환값을 출력합니다.
  • 매개변수 한개일때 괄호 생략 가능 → 매개변수가 하나일 경우에는 괄호를 생략할 수 있는 화살표 함수를 정의합니다. 이후 함수를 호출하여 매개변수로 200을 전달하고 반환값을 출력합니다.
  • 리턴 생략 → 함수 내부에서 바로 값을 반환하는 경우에 리턴 키워드를 생략할 수 있는 화살표 함수를 정의합니다. 이후 함수를 호출하여 매개변수로 300을 전달하고 반환값을 출력합니다.
  • 선언적 함수 → 화살표 함수를 선언적으로 변수에 할당하는 형태로 정의합니다. 이 방식은 코드 가독성을 떨어뜨릴 수 있습니다. 이후 함수를 호출하여 매개변수로 400을 전달하고 반환값을 출력합니다.
11. 함수 유형 : 함수와 매개변수를 이용한 형태

함수와 매개변수를 이용한 형태의 함수입니다. 

{
        function func(num, str){
                console.log(num + ". " + str);      // 11. 함수가 실행되었습니다.
                console.log(`${num}. ${str}`);      // 11. 함수가 실행되었습니다.
        }

        func(11, "함수가 실행되었습니다.");
}

함수를 정의하고 매개변수를 전달하고 호출하는 일반적인 함수의 예제입니다.

  • func라는 함수를 정의합니다. 이 함수는 두 개의 매개변수 num과 str을 받으며, 받은 값들을 사용하여 두 가지 형태로 문자열을 콘솔에 출력합니다.
  • func(11, "함수가 실행되었습니다.");를 호출하여 함수를 실행합니다. 매개변수 num에는 11이 전달되고, 매개변수 str에는 "함수가 실행되었습니다."라는 문자열이 전달됩니다.
  • 첫 번째 console.log는 문자열 연결 연산자(+)를 사용하여 문자열을 생성하고 출력하고, 두 번째 console.log는 템플릿 리터럴(${})을 사용하여 문자열을 생성하고 출력합니다. 결과적으로 두 가지 형태로 "11. 함수가 실행되었습니다."라는 문자열이 콘솔에 출력됩니다.
12. 함수 유형 : 함수와 변수를 이용한 형태

함수와 변수를 이용한 형태의 함수입니다. 

{
        const num = 12;
        const str = "함수가 실행되었습니다.";

        function func(num, str){
                console.log(`${num}. ${str}`);
        }

        func(num, str);     // 12. 함수가 실행되었습니다.
}

이 함수는 저장된 변수 값을 매개변수로 전달하고 템플릿 리터럴을 사용하여 문자열로 결합하고 출력하는 예제입니다.

  • num과 str 변수 → num 변수에 12를, str 변수에 "함수가 실행되었습니다."라는 문자열을 할당합니다.
  • 함수 정의 → func라는 함수를 정의합니다. 이 함수는 두 개의 매개변수 num과 str을 받으며, 템플릿 리터럴을 사용하여 매개변수 값을 문자열로 결합하여 콘솔에 출력합니다.
  • 함수 호출 → func(num, str);를 호출하여 함수를 실행합니다. 전역 변수 num에 할당된 값 12와 전역 변수 str에 할당된 문자열 "함수가 실행되었습니다."를 함수에 전달합니다.
13. 함수 유형 : 함수와 배열 이용한 형태

함수와 배열을 이용한 형태의 함수입니다. 

{
        const num = [13, 14];
        const str = ["함수가 실행되었습니다.", "함수가 실행되었습니다."];

        function func(num, str){
                console.log(`${num}. ${str}`);
        }

        func(num[0], str[0]);   // 13. 함수가 실행되었습니다.
        func(num[1], str[1]);   // 14. 함수가 실행되었습니다.
}

배열과 함수를 사용하여 값을 출력하는 예제입니다.

  • num과 str 배열 정의 → num 배열에 [13, 14]를, str 배열에 ["함수가 실행되었습니다.", "함수가 실행되었습니다."]라는 문자열을 할당합니다.
  • 함수 정의 → func라는 함수를 정의합니다. 이 함수는 두 개의 매개변수 num과 str을 받으며, 템플릿 리터럴을 사용하여 매개변수 값을 문자열로 결합하여 콘솔에 출력합니다.
  • 함수 호출 → 두 번의 func 함수 호출을 합니다. 첫 번째 호출에서는 num[0]과 str[0]을 전달하고, 두 번째 호출에서는 num[1]과 str[1]을 전달합니다.
14. 함수 유형 : 함수와 객체 이용한 형태

함수와 객체를 이용한 형태의 함수입니다. 

{
        const info = {
                num : 15,
                str : "함수가 실행되었습니다."
        }
        function func(num, str){
                console.log(`${num}. ${str}`);
        }

        func(info.num, info.str);       // 15. 함수가 실행되었습니다.
}

객체와 함수를 사용하여 값을 출력하는 예제입니다.

  • info 객체 정의 → info 객체를 정의합니다. 이 객체는 num 속성에 15를, str 속성에 "함수가 실행되었습니다."라는 문자열을 가지고 있습니다.
  • 함수 정의 → func라는 함수를 정의합니다. 이 함수는 두 개의 매개변수 num과 str을 받으며, 템플릿 리터럴을 사용하여 매개변수 값을 문자열로 결합하여 콘솔에 출력합니다.
  • 함수 호출 → func(info.num, info.str);를 호출하여 함수를 실행합니다. info.num은 객체 info의 num 속성의 값인 15를, info.str은 객체 info의 str 속성의 값인 "함수가 실행되었습니다."를 전달합니다.
15. 함수 유형 : 함수와 객체 및 배열을 이용한 형태

함수와 객체 및 배열을 이용한 형태의 함수입니다. 

{
        const info = [
                {num: 16, str: "함수가 실행되었습니다."},
                {num: 17, str: "함수가 실행되었습니다."},
        ];

        function func(num, str){
                console.log(`${num}. ${str}`);
        }

        func(info[0].num, info[0].str);     // 16. 함수가 실행되었습니다.
        func(info[1].num, info[1].str);     // 17. 함수가 실행되었습니다.
}

배열과 객체를 사용하여 값을 출력하는 예제입니다.

  • info 배열 정의 → info 배열을 정의합니다. 이 배열은 두 개의 객체를 요소로 가지고 있습니다. 각 객체는 num 속성에 숫자를, str 속성에 "함수가 실행되었습니다."라는 문자열을 가지고 있습니다.
  • 함수 정의 → func라는 함수를 정의합니다. 이 함수는 두 개의 매개변수 num과 str을 받으며, 템플릿 리터럴을 사용하여 매개변수 값을 문자열로 결합하여 콘솔에 출력합니다.
  • 함수 호출 → 두 번의 func 함수 호출을 합니다. 첫 번째 호출에서는 info[0].num과 info[0].str을 전달하고, 두 번째 호출에서는 info[1].num과 info[1].str을 전달합니다.
16. 함수 유형 : 객체 안에 함수를 이용한 형태

객체 안에 함수를 이용한 형태의 함수입니다. 

{
        const info = {
                num: 18,
                str: "함수가 실행되었습니다.",
                result: () => {
                        console.log(`${info.num}. ${info.str}`);
                }
        }
        info.result();      // 18. 함수가 실행되었습니다.             
}

객체 내부에 화살표 함수를 사용하여 함수를 정의하고 호출하는 예제입니다.

  • info 객체 정의 → info 객체를 정의합니다. 이 객체는 세 개의 속성을 가지고 있습니다. num 속성은 18을, str 속성은 "함수가 실행되었습니다."라는 문자열을 가지고 있고, result 속성은 화살표 함수를 값으로 가지고 있습니다.
  • 객체 내의 함수 호출 → info.result();를 호출하여 객체 내의 result 속성에 할당된 화살표 함수를 실행합니다.
17. 함수 유형 : 객체 생성자 함수

객체 생성자 함수입니다. 

{
        // 함수 정의
        function Func(num, str){
                this.num = num;
                this.str = str;
                this.result = () => {
                        console.log(`${this.num}. ${this.str}`);
                }
        }
        
        // 인스턴스 생성
        const info1 = new Func(19, "함수가 실행되었습니다.");
        const info2 = new Func(20, "함수가 실행되었습니다.");

        // 호출
        info1.result();     // 19. 함수가 실행되었습니다.
        info2.result();     // 20. 함수가 실행되었습니다.        
}

생성자 함수를 사용하여 객체를 생성하고, 생성된 객체의 메서드를 호출하는 예제입니다.

  • 생성자 함수 Func 정의 → Func이라는 생성자 함수를 정의합니다. 이 생성자 함수는 두 개의 매개변수 num과 str을 받으며, 객체 내에 num 속성과 str 속성을 설정하고, result 메서드를 정의합니다. 이 메서드는 화살표 함수로 정의되어 있으며, 객체의 num 속성과 str 속성을 사용하여 문자열을 생성하고 콘솔에 출력합니다.
  • 객체 인스턴스 생성 → Func 생성자 함수를 사용하여 info1과 info2 두 개의 객체 인스턴스를 생성합니다. 각각은 num과 str 매개변수를 받아 생성됩니다.
  • 객체 메서드 호출 → 개의 객체 인스턴스 info1과 info2에서 result 메서드를 호출합니다.
객체 생성자 함수란?

객체 생성자 함수(Constructor Function)는 JavaScript에서 객체를 생성하는 방법 중 하나입니다. 생성자 함수는 new 키워드와 함께 사용되어 새로운 객체 인스턴스를 생성합니다. 생성자 함수는 일반 함수와 구문이 비슷하지만, 객체를 초기화하고 생성하는 데 사용됩니다.

  • new 키워드와 함께 사용 → 생성자 함수를 호출할 때 new 키워드를 사용하여 새로운 객체를 생성합니다.
  • this 키워드 → 생성자 함수 내부에서 this 키워드는 새로 생성된 객체를 참조합니다.
  • 초기화 → 생성자 함수는 객체의 속성을 초기화하고, 필요한 메서드를 추가할 수 있습니다.
  • 함수 이름 → 생성자 함수의 이름은 일반적으로 대문자로 시작합니다. 이는 생성자 함수임을 나타내는 관례입니다.

생성자 함수는 JavaScript에서 객체를 생성하고 초기화하는 강력한 방법을 제공하며, 클래스 기반 프로그래밍 패턴을 흉내낼 수 있습니다. ES6에서는 class 키워드를 도입하여 더 직관적이고 명확한 구문으로 클래스와 생성자 함수를 정의할 수 있지만, 생성자 함수는 여전히 널리 사용되고 있습니다.

18. 함수 유형 : 프로토타입 함수

프로토타입 함수입니다. 

{
        // 함수 정의
        function Func(num, str){
                this.num = num;
                this.str = str;
        }

        // 메서드 추가
        Func.prototype.result = function(){
                console.log(`${this.num}. ${this.str}`);
        }

        // 인스턴스 생성
        const info1 = new Func(21, "함수가 실행되었습니다.");
        const info2 = new Func(22, "함수가 실행되었습니다.");

        // 호출
        info1.result();     // 21. 함수가 실행되었습니다.
        info2.result();     // 22. 함수가 실행되었습니다.   
}

생성자 함수와 프로토타입을 사용하여 객체를 생성하고, 생성된 객체의 메서드를 호출하는 예제입니다.

  • 생성자 함수 Func 정의 → Func이라는 생성자 함수를 정의합니다. 이 생성자 함수는 두 개의 매개변수 num과 str을 받아 객체 내에 num 속성과 str 속성을 설정합니다.
  • 프로토타입에 메서드 추가 → 생성자 함수 Func의 프로토타입에 result 메서드를 추가합니다. 이 메서드는 객체 내의 num 속성과 str 속성을 사용하여 문자열을 생성하고 콘솔에 출력합니다.
  • 객체 인스턴스 생성 → Func 생성자 함수를 사용하여 info1과 info2 두 개의 객체 인스턴스를 생성합니다. 각각은 num과 str 매개변수를 받아 생성됩니다.
  • 객체 메서드 호출: → 두 개의 객체 인스턴스 info1과 info2에서 result 메서드를 호출합니다.
프로토타입 함수를 왜 사용할까?

프로토타입 함수(Prototype Function)는 JavaScript에서 객체 생성자 함수와 결합하여 객체 인스턴스에 메서드와 속성을 추가하는 데 사용됩니다. 모든 JavaScript 객체는 프로토타입이라는 내부 속성을 가지고 있으며, 이는 객체의 원형 또는 청사진 역할을 합니다. 객체 생성자 함수의 prototype 속성을 사용하여 모든 인스턴스가 공유할 메서드와 속성을 정의할 수 있습니다.

왜 프로토타입을 사용하는가?

  • 메모리 절약 → 동일한 메서드가 여러 인스턴스에 대해 중복 정의되는 것을 방지합니다.
  • 성능 향상 → 모든 인스턴스가 동일한 메서드를 공유하므로, 메모리 사용이 효율적입니다.
19. 함수 유형 : 객체 리터럴 함수

객체 리터럴 함수입니다. 

{
        // 함수 정의
        function Func(num, str){
                this.num = num;
                this.str = str;
        }

        // 메서드 추가
        Func.prototype = {
                result1 : function(){
                        console.log(`${this.num}. ${this.str}`);
                },
                result2 : function(){
                        console.log(`${this.num}. ${this.str}`);
                }
        } 
        
        // 인스턴스 생성
        const info1 = new Func(23, "함수가 실행되었습니다.");
        const info2 = new Func(24, "함수가 실행되었습니다.");

        // 호출
        info1.result1();        // 23. 함수가 실행되었습니다.
        info2.result2();        // 24. 함수가 실행되었습니다.  
}

생성자 함수와 프로토타입 객체를 사용하여 객체를 생성하고, 생성된 객체의 메서드를 호출하는 예제입니다. 이러한 방식은 프로토타입을 통해 메서드를 공유하는 객체 지향 프로그래밍의 한 예입니다.

  • 생성자 함수 Func 정의 → Func이라는 생성자 함수를 정의합니다. 이 생성자 함수는 두 개의 매개변수 num과 str을 받아 객체 내에 num 속성과 str 속성을 설정합니다.
  • 프로토타입에 메서드 추가 → 생성자 함수 Func의 프로토타입에 result 메서드를 추가합니다. 이 메서드는 객체 내의 num 속성과 str 속성을 사용하여 문자열을 생성하고 콘솔에 출력합니다.
  • 객체 인스턴스 생성 → Func 생성자 함수를 사용하여 info1과 info2 두 개의 객체 인스턴스를 생성합니다. 각각은 num과 str 매개변수를 받아 생성됩니다.
  • 객체 메서드 호출: → 두 개의 객체 인스턴스 info1과 info2에서 result 메서드를 호출합니다.
20. 함수 : 즉시실행 함수

즉시 실행 함수는 정의하자마자 즉시 실행하는 함수를 나타냅니다. 

{
        // 01 즉시 실행 함수
        (function (){
                document.write("25. 함수가 실행되었습니다.");
        })();
        
        // 02 즉시 실행 함수(화살표 함수)
        (() => {
                document.write("26. 함수가 실행되었습니다.");
        })();

        // 25. 함수가 실행되었습니다.
        // 26. 함수가 실행되었습니다.
}

즉시 실행 함수(IIFE, Immediately Invoked Function Expression)는 정의되자마자 즉시 실행되는 JavaScript 함수입니다. 이러한 IIFE 패턴은 변수와 함수를 현재 스코프로부터 격리하고 다른 코드와 충돌하지 않도록 하는 데 사용됩니다. 또한 전역 스코프에서 변수 누출을 방지하고 모듈 패턴과 같은 디자인 패턴에서도 자주 활용됩니다.

  • 01 → (function () { ... }): 선언적 함수를 정의하고 이를 괄호로 둘러싸서 함수를 표현합니다. ()로 함수를 즉시 실행합니다. 함수 내부의 코드는 "25. 함수가 실행되었습니다."라는 텍스트를 웹 페이지에 출력합니다.
  • 02 → (() { ... }): 함수를 정의하고 이를 괄호로 둘러싸서 함수를 표현합니다. ()로 함수를 즉시 실행합니다. 함수 내부의 코드는 "26. 함수가 실행되었습니다."라는 텍스트를 웹 페이지에 출력합니다.
21. 함수 : 재귀 함수

재귀 함수는 함수 내부에서 자기 자신을 호출하는 함수입니다. 

{
        // 01 반복문 사용하기
        function func(num){
                for(let i=0; i<num; i++){
                        document.write("29. 함수가 실행되었습니다.");
                }
        }
        func(10);

        // 02 재귀함수 사용하기 
        function func1(num){
                if(num < 1) return;

                document.write("30. 함수가 실행되었습니다.");
                func1(num - 1);    //재귀 호출
        }
        func1(10);
}

재귀 함수(Recursive Function)는 자기 자신을 호출하여 문제를 해결하는 함수입니다. 재귀 함수는 복잡한 문제를 더 작은 문제로 나누어 해결하는데 유용하며, 주로 수학적 문제나 자료 구조 알고리즘에서 자주 사용됩니다.

위 예제의 두 함수는 결과적으로 문자열을 여러 번 출력하는 역할을 수행하지만, 첫 번째 함수는 반복문을 사용하고 두 번째 함수는 재귀 호출을 사용하여 동일한 작업을 수행합니다. 재귀 함수의 경우 재귀 호출이 일어날 때마다 스택에 함수 호출이 추가되므로, 호출 횟수에 제한이 있을 수 있습니다.

  • 01 → func 함수는 num이라는 파라미터를 받습니다. 이 함수는 for 반복문을 사용하여 "29. 함수가 실행되었습니다."라는 문자열을 num의 값만큼 반복하여 출력합니다. 함수 호출 시 num 파라미터에 10을 전달하였으므로 문자열이 10번 출력됩니다.
  • 02 → func1 함수는 num이라는 파라미터를 받습니다. 함수 내부에서 if 문을 사용하여 num이 0보다 작을 경우 함수를 종료하고 그렇지 않은 경우 "30. 함수가 실행되었습니다."를 출력하고 func1 함수를 자기 자신을 재귀적으로 호출합니다. 이렇게 호출되는 재귀 함수는 num 값이 0 미만이 될 때까지 반복되며 문자열이 출력됩니다.
22. 함수 : 콜백 함수

콜백 함수는 다른 함수에 인수로 전달되어 실행되는 함수입니다 

{
        // 01 이벤트 처리시
        document.getElementById('button').addEventListener('click', function() {
            console.log("31. 함수가 실행되었습니다.");
        });

        // 02 배열 메서드
        const numbers = [1, 2, 3, 4, 5];
        
        const squaredNumbers = numbers.map(function(number) {
            return number * number;
        });
        console.log(squaredNumbers); // [1, 4, 9, 16, 25]

        // 03 비동기 작업시
        function callback() {
            console.log("31. 함수가 실행되었습니다.");
        }

        function func(str) {
            console.log("32. 함수가 실행되었습니다.");
            str();
        }

        func(callback);
}

콜백 함수(Callback Function)는 다른 함수에 인수로 전달되어 실행되는 함수입니다. 콜백 함수는 1. 이벤트 핸들링, 2. 배열 메서드, 3. 비동기 작업 등 다양한 상황에서 사용됩니다. 콜백 함수는 함수가 비동기 작업을 완료하거나 특정 이벤트가 발생했을 때 실행되어야 할 코드를 정의하는 데 유용합니다.

  • 01 → func 함수는 클릭 이벤트가 발생했을 때 실행될 함수입니다. addEventListener 메서드를 사용하여 btn 요소에 "click" 이벤트 리스너를 등록합니다. 클릭 이벤트가 발생하면 func 함수가 실행되고, "31. 함수가 실행되었습니다."라는 메시지가 문서에 출력됩니다.
  • 02 → map 메서드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 결과를 새로운 배열로 반환합니다. 이 경우, 각 숫자를 제곱한 값을 반환합니다.
  • 03 → func 함수는 callback 함수를 인수로 받아 호출합니다. func 함수는 먼저 "32. 함수가 실행되었습니다."를 출력하고, 이어서 callback 함수를 호출하여 "31. 함수가 실행되었습니다."를 출력합니다.
콜백함수란?

콜백 함수는 다른 함수에 인수로 전달되는 함수입니다. 이 함수는 외부 함수에 의해 "호출 되돌림(call back)"이라는 이름의 유래대로, 외부 함수의 실행 중 특정 지점에서 호출됩니다.

좀 더 쉽게 설명하면 → 콜백 함수는 한 함수가 실행을 마치고 난 후에 호출되는 또 다른 함수입니다. 더 쉽게 말해 → 콜백 함수는 일종의 순서를 정하는 역할을 합니다. 하나의 작업이 끝나면 그 다음에 무엇을 할지 결정해주는 함수라고 생각할 수 있습니다. 이러한 구조는 일을 차례대로 진행하게 만들어, 한 번에 하나의 작업만 수행되도록 도와줍니다.

콜백함수는 다음의 경우에 많이 사용됩니다.

  • 이벤트 처리 → 특정 이벤트 발생 시 실행될 함수를 지정할 때
  • 배열 메서드 → 다른 함수를 인수로 받거나 함수를 결과로 반환할 때
  • 비동기 실행 → 네트워크 요청이 완료된 후 특정 코드를 실행하려 할 때

콜백 함수는 다음과 같은 장점을 가지고 있습니다.

  • 코드의 가독성 향상: 콜백 함수를 사용하면 각 작업과 처리해야 할 코드를 명확하게 분리할 수 있어 코드를 이해하기 쉽습니다.
  • 재사용성 향상: 콜백 함수는 다른 코드에서도 쉽게 재사용할 수 있습니다.
  • 비동기 프로그래밍 단순화: 콜백 함수를 사용하면 비동기 작업을 쉽게 처리하고 코드를 작성할 수 있습니다.

콜백 함수 사용 시 주의점

  • 콜백 지옥 → 여러 개의 콜백 함수를 중첩적으로 사용하면 코드가 복잡하고 이해하기 어려워질 수 있습니다. 이를 방지하기 위해 적절하게 함수를 분리하고 코드를 단순화하는 것이 중요합니다.
콜백지옥이란?

콜백 지옥(Callback Hell)은 비동기 JavaScript 코드에서 발생할 수 있는 가독성이 낮고 유지보수가 어려운 상황을 나타내는 용어입니다. 콜백지옥은 콜백 함수를 중첩하여 사용할 때 발생하며, 특히 비동기 작업이 연속적으로 발생하는 경우에 빈번하게 발생합니다. 

{
        function funcA(callback){
            setTimeout(( ) => {
                console.log("funcA가 실행되었습니다.");
                callback( );
            },1000);
        };
        function funcB(callback){
            setTimeout(( ) => {
                console.log("funcB가 실행되었습니다.");
                callback( );
            },1000);
        };
        function funcC(callback){
            setTimeout(( ) => {
                console.log("funcC가 실행되었습니다.");
                callback( );
            },1000);
        };
        function funcD(callback){
            setTimeout(( ) => {
                console.log("funcD가 실행되었습니다.");
            },1000);
        };

        funcA(function( ){
            funcB(function( ){
                funcC(function( ){
                    funcD( );
                });
            });
        });    

        // funcA가 실행되었습니다.
        // funcB가 실행되었습니다.
        // funcC가 실행되었습니다.
        // funcD가 실행되었습니다.
    }
23. 함수 : 콜백 함수 : 동기/비동기

콜백 함수란 다른 함수로 전달되어 실행되는 함수입니다. 

{
        // 01 동기적인 함수 호출
        function func1( ){
                document.write("39. 함수가 실행되었습니다.");
        }
        function func2( ){
                document.write("40. 함수가 실행되었습니다.");
        }

        func1();
        func2();

        // 39. 함수가 실행되었습니다.
        // 40. 함수가 실행되었습니다.

        // 02 비동기적인 함수 호출
        function func3( ){
                setTimeout(( ) => {
                        document.write("41. 함수가 실행되었습니다.");
                }, 1000);  
        }
        function func4( ){
                document.write("42. 함수가 실행되었습니다.");
        }

        func3( );
        func4( );

        // 42. 함수가 실행되었습니다.
        // 41. 함수가 실행되었습니다.

        //03 콜백 함수와 비동기 호출
        function func5(callback){
                setTimeout(( ) => {
                        document.write("43. 함수가 실행되었습니다.");
                        callback( );
                }, 1000);
        }
        function func6( ){
                document.write("44. 함수가 실행되었습니다.");
        }

        func5(function(){
                func6( );
        });

        // 43. 함수가 실행되었습니다.
        // 44. 함수가 실행되었습니다.
}

콜백 함수를 사용하면 비동기적인 작업을 수행하거나 함수 간의 협력을 할 때 유용하게 활용할 수 있습니다. 다음은 동기적인 함수 호출과 비동기적인 함수 호출의 차이를 보여주며, 콜백 함수를 사용하여 비동기 작업을 처리하는 방법을 보여줍니다.

  • 01 → func1과 func2 함수는 동기적으로 호출되며, func1이 실행된 후 func2가 실행됩니다. 결과적으로 "39. 함수가 실행되었습니다."와 "40. 함수가 실행되었습니다."가 순서대로 출력됩니다.
  • 02 → func3 함수는 setTimeout을 사용하여 1초(1000밀리초) 후에 실행될 함수를 정의합니다. func4 함수는 동기적으로 호출됩니다. func3는 비동기 작업이므로 "42. 함수가 실행되었습니다."가 먼저 출력되고, 1초 후에 "41. 함수가 실행되었습니다."가 출력됩니다.
  • 03 → func5 함수는 setTimeout을 사용하여 1초 후에 실행될 함수를 정의합니다. 이때 콜백 함수 callback도 실행됩니다. func6 함수는 동기적으로 호출됩니다. func5를 호출할 때 콜백 함수를 전달하고, 콜백 함수 내부에서 func6 함수가 호출됩니다. 결과적으로 "43. 함수가 실행되었습니다."가 먼저 출력되고, 그 후 "44. 함수가 실행되었습니다."가 출력됩니다.
동기와 비동기의 차이점은?

동기(Synchronous)와 비동기(Asynchronous)는 프로그래밍에서 중요한 개념 중 하나입니다. 예를 들어, 웹 페이지에서 이미지를 다운로드하고 표시하는 작업을 생각해보세요. 동기적인 방식으로 이미지를 다운로드하면 페이지가 이미지를 다운로드할 때까지 멈추고 사용자는 다른 작업을 수행하지 못합니다. 반면에 비동기적인 방식을 사용하면 이미지 다운로드가 백그라운드에서 수행되므로 페이지는 다른 작업을 계속할 수 있습니다.

동기(Synchronous)
  • 동기적인 작업은 순서대로 실행됩니다. 즉, 한 작업이 끝나야 다음 작업이 시작됩니다.
  • 동기 코드는 위에서 아래로 순차적으로 진행되며, 한 작업이 끝나기를 기다려야 합니다.
  • 동기 작업은 간단하게 이해하고 디버깅하기 쉽지만, 여러 작업을 동시에 처리하기 어렵습니다. 하나의 작업이 끝날 때까지 다른 작업을 수행하지 못합니다.
비동기 (Asynchronous)
  • 비동기적인 작업은 순서와 관계없이 동시에 여러 작업을 처리할 수 있습니다.
  • 비동기 코드는 콜백 함수, 프로미스, async/await 등을 사용하여 작업이 완료될 때까지 대기하지 않고 다른 작업을 진행할 수 있습니다.
  • 비동기 작업은 네트워크 요청, 파일 읽기, 타이머 등과 같은 작업에서 매우 유용하며, 애플리케이션의 반응성을 높일 수 있습니다.
24. 비동기 방식 : 프로미스

JavaScript 프로미스(Promise)는 비동기 작업을 처리하고 관리하기 위한 객체입니다. 프로미스는 콜백 지옥(Callback Hell)과 같은 비동기 코드의 가독성 및 유지보수 문제를 해결하는 데 도움을 주는 중요한 개념 중 하나입니다. 

{
        // 비동기 작업 데이터
        let data = true;

        const func = new Promise((resolve, reject) => {
                if(data){
                        resolve("45. 함수가 실행되었습니다.");
                } else {
                        reject("45. 함수가 실행되지 않았습니다.");
                }
        });

        func
                .then(
                        result => document.write(result)
                )
                .catch(
                        error => document.write(error)
                )
}

이 코드는 data 변수의 값에 따라 성공 또는 실패를 나타내며, 이에 따라 적절한 메시지가 출력됩니다. 현재 data가 true로 설정되어 있으므로 성공 메시지인 "45. 함수가 실행되었습니다."가 출력될 것입니다.

  • data 변수는 비동기 작업의 결과를 나타내는 플래그입니다. 이 예제에서는 true로 설정되어 있으므로 비동기 작업은 성공적으로 완료됩니다.
  • func이라는 이름의 Promise 객체를 생성합니다. 이 객체는 resolve와 reject 함수를 사용하여 상태를 결정합니다. data가 true인 경우 resolve를 호출하고 "45. 함수가 실행되었습니다."라는 문자열을 전달하여 성공 상태로 만듭니다. 그렇지 않으면 reject를 호출하고 "45. 함수가 실행되지 않았습니다."라는 에러 메시지를 전달하여 거부 상태로 만듭니다.
  • func 객체의 .then() 메서드는 프로미스가 이행될 때 실행됩니다. 이때 result 매개변수는 resolve에서 전달한 값인 "45. 함수가 실행되었습니다."를 받아와서 document.write()를 사용하여 결과를 출력합니다.
  • func 객체의 .catch() 메서드는 프로미스가 거부될 때 실행됩니다. 이때 error 매개변수는 reject에서 전달한 에러 메시지 "45. 함수가 실행되지 않았습니다."를 받아와서 document.write()를 사용하여 에러를 출력합니다.
다음 강의

자바스크립트 배우기 : 데이터 제어하기

목록 보기 영상 보기