01. 함수 : 선언적 함수
함수 선언문은 function 키워드로 함수를 정의하는 방법입니다. function 키워드 다음에 함수를 식별할 수 있도록 식별자를 붙이면 됩니다. 이때 식별자 뒤에는 () 소괄호를 붙입니다. 그리고 식별자 뒤에오는 중괄호{}에는 함수가 호출되면 실행할 코드를 적어줍니다.
{
function func(){
console.log("실행되었습니다.");
}
func();
}
선언함수는 한번만 실행하는 함수며 함수를 정의하면서 동시에 실행할수 있습니다. 함수를 실행하는 순간에 자바스크립트 해석기에서 함수를 해석합니다.
결과 확인하기
200
javascript
02. 함수 : 익명 함수
익명 함수는 이름이 없는 함수로, 익명 함수를 선언할 때는 이름을 붙이지 않습니다. 익명 함수는 주로 다른 함수의 매개변수로 전달하거나 변수에 할당되어 사용되는 경우가 많습니다
{
const func = function(){
console.log("실행되었습니다.");
}
func();
}
함수는 객체에서 파생된 자료형입니다. 자바스크립트에서 자료형은 변수에 할당할 수 있어야 합니다. 따라서 함수도 변수에 할당할 수 있는데, 이를 이용한 함수 정의 방법을 함수표현이라고 합니다. 함수 표현식은 변수에 할당하는 함수에 식별자가 있으면 네이밍함수, 없으면 익명함수로 다시 구분합니다.
결과 확인하기
03. 함수 : 매개함수 변수
변수를 통해 함수의 값을 전달하는 함수입니다.
{
function func(str){
console.log(str);
}
func("실행되었습니다");
}
매개변수 함수를 사용함으로써 코드의 재사용성과 가독성을 향상시킬 수 있습니다. 이를테면, 정렬 기능을 수행하는 함수를 작성할 때, 어떤 방식으로 정렬할 것인지를 결정하는 함수를 매개변수로 전달할 수 있습니다.
결과 확인하기
04. 함수 : 리턴값 함수
리턴값(결과/종료)이 있는 함수는 return 제어문을 사용해서 함수의 연산 결과 중 원하는 값을 지정해서 호출위로 복구시키는 기능을 말합니다.
{
function func() {
return "실행되었습니다.";
}
console.log(func());
}
함수는 종종 호출한 코드에 어떤 작업을 수행한 결과를 돌려주기 위해 리턴값을 사용합니다. 이 리턴값은 함수 내부에서 계산된 값이며, 호출한 코드는 이 리턴값을 변수에 할당하거나 다른 연산에 활용할 수 있습니다.
결과 확인하기
05.함수: 매개변수 + 리턴값 함수
리턴값(결과/종료)이 있는 함수는 return 제어문을 사용해서 함수의 연산 결과 중 원하는 값을 지정해서 호출위로 복구시키는 기능을 말합니다.
{
function func(str){
return str;
}
console.log(func("실행되었습니다."));
}
두 개의 함수를 정의하고 호출하여 함수의 작동 방식과 매개변수, 리턴값의 개념을 보여주는 예제입니다. 두 함수 모두 입력된 값을 그대로 반환하는 역할을 합니다. 매개변수를 통해 함수에 필요한 데이터를 전달하고, 함수 내부에서 해당 데이터를 활용하여 계산 또는 처리를 수행한 후, 그 결과를 리턴값으로 반환합니다. 이를 통해 코드의 재사용성과 모듈화가 높아집니다.
결과 확인하기
06. 화살표 함수 : 선언적 함수
화살표 함수는 ES6 버전부터 =>(화살표 표기법)을 사용해 함수 선언을 좀더 간단하게 작성할 수 있습니다.
{
func = () => {
console.log("실행되었습니다");
}
func();
}
선언적 함수를 화살표 함수로 변경하였습니다.
결과 확인하기
07. 화살표 함수 :익명 함수
화살표 함수는 함수를 간결하게 표현하며, 주로 익명 함수를 대체하는 용도로 사용됩니다.
{
func = () => {
console.log("실행되었습니다.");
}
func();
}
익명 함수를 화살표 함수로 변경하였습니다.
결과 확인하기
08. 화살표 함수 : 매개변수 함수
화살표 함수는 함수를 간결하게 표현하며, 주로 익명 함수를 대체하는 용도로 사용됩니다.
{
func = (str) => {
console.log(str);
}
func("실행되었습니다");
}
매개변수 함수를 화살표 함수로 변경하였습니다.
결과 확인하기
09. 화살표 함수 : 리턴값 함수
화살표 함수는 함수를 간결하게 표현하며, 주로 익명 함수를 대체하는 용도로 사용됩니다.
{
func = () => {
return "실행되었습니다.";
}
console.log(func());
}
매개변수 함수를 화살표 함수로 변경하였습니다.
결과 확인하기
10. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 함수
화살표 함수는 생략이 가능합니다.
{
//익명 함수
const func = (str) => {
return str;
}
console.log(func("실행되었습니다.1"));
//괄호 함수
const func2 = (str) => {
return str;
}
console.log(func2("실행되었습니다.2"));
// 리턴 생략
const func3 = str => str;
console.log(func3("실행되었습니다.3"));
// 선언적(가독성x)
func4 = str => str;
console.log(func4("실행되었습니다.4"));
}
익명 함수 + 매개변수 + 리턴값 함수를 화살표 함수로 변경했습니다.
결과 확인하기
실행 되었습니다.2
실행 되었습니다.3
실행 되었습니다.4
11.화살표 함수 : 함수와 매개변수를 이용한 형태
{
const num = 11;
const str = "함수가 실행되었습니다.";
function func(num, str) {
console.log(`${num}. ${str}`);
}
func(11,"함수가 실행되었습니다.");
}
${num}. ${str}는 템플릿 리터럴(template literal)이라는 JavaScript의 문자열 표기법입니다. 이것은 문자열 안에 변수나 표현식을 삽입할 때 사용되며, ${} 중괄호 안에 변수나 표현식을 넣을 수 있습니다.
이 표기법을 사용하면 문자열을 더 가독성 있게 작성할 수 있습니다.
결과 확인하기
12.함수 유형 : 함수와 변수를 이용한 형태
JavaScript에서 단일 숫자와 문자열을 가지고 함수를 사용하여 두 가지 다른 방법으로 출력하는 예제입니다.
{
const num = 12;
const str = "함수가 실행되었습니다.";
function func(num, str) {
console.log(num + ". " + str);
console.log(`${num}. ${str}`);
}
func(num, str);
}
1. num 변수에는 숫자 12가 할당되고, str 변수에는 문자열 "함수가 실행되었습니다."가 할당됩니다. 2. func 함수는 두 개의 매개변수 num과 str을 받아서 해당 값을 출력합니다. 두 가지 방법으로 출력을 시도합니다. 2-1. 첫 번째 console.log는 num과 str을 문자열 연결(+)을 사용하여 출력합니다. 2-2. 두 번째 console.log는 템플릿 문자열을 사용하여 ${num}. ${str} 형식으로 출력합니다. 3.func(num, str) 코드는 num과 str 변수의 값을 func 함수의 매개변수로 전달하여 함수를 호출합니다.
결과 확인하기
12.함수가 실행 되었습니다
13.함수유형 : 함수와 배열을 이용한 형
JavaScript에서 배열을 사용하여 숫자와 문자열을 저장하고 함수를 사용하여 해당 값을 출력하는 예제입니다.
{
const num = [13, 14];
const str = ["함수가 실행되었습니다.", "함수가 실행되었습니다."];
function func(num, str) {
console.log(`${num}. ${str}`);
}
func(num[0], str[0]);
func(num[1], str[1]);
}
1. num 배열과 str 배열은 각각 숫자와 문자열을 저장합니다.
2. func 함수는 두 개의 매개변수 num과 str을 받아서 그 값을 console.log를 사용하여 출력합니다.
3. func(num[0], str[0]) 코드는 배열의 첫 번째 요소를 func 함수의 매개변수로 전달하여 함수를 호출합니다. 이 경우 첫 번째 숫자와 첫 번째 문자열이 출력됩니다.
4. func(num[1], str[1]) 코드는 배열의 두 번째 요소를 func 함수의 매개변수로 전달하여 함수를 다시 호출합니다. 이 경우 두 번째 숫자와 두 번째 문자열이 출력됩니다.
5. 배열의 각 요소에 해당하는 숫자와 문자열이 함수를 통해 출력됩니다.
결과 확인하기
14.함수가 실행 되었습니다
14.함수 유형 : 함수와 객체를 이용한 형태
JavaScript에서 객체와 함수를 사용하여 메시지를 출력하는 간단한 예제입니다. 코드를 살펴보겠습니다.
{
const info = {
num : 15,
str : "함수가 실행되었습니다."
}
function func(num, str) {
console.log(`${num}. ${str}`);
}
func(info.num, info.str);
}
1. info 객체는 두 개의 프로퍼티 num과 str을 가지고 있습니다.
2. func 함수는 두 개의 매개변수 num과 str을 받아서 그 값을 console.log를 사용하여 출력합니다.
3. func(info.num, info.str) 코드는 info 객체의 num과 str 프로퍼티 값을 func 함수의 매개변수로 전달하여 함수를 호출합니다.
4. func 함수가 호출되면 info 객체의 num과 str 프로퍼티 값을 출력합니다.
결과 확인하기
15.함수 유형 : 함수와 객체 및 배열을 이용한 형태
주어진 코드는 배열 info에 객체를 포함하고 있으며, 함수 func를 사용하여 배열 내의 객체의 num 및 str 속성을 출력하는 간단한 예제입니다.
코드는 배열의 각 객체를 반복적으로 처리하여 출력합니다.
{
const info = [
{num: 16, str: "함수가 실행되었습니다."},
{num: 17, str: "함수가 실행되었습니다."},
];
function func(num, str) {
console.log(`${num}. ${str}`);
}
func(info[0].num, info[0].str);
func(info[1].num, info[1].str);
}
info 배열: 두 개의 객체를 포함하는 배열입니다. 각 객체는 num과 str 속성을 가지고 있습니다. func 함수: num과 str 두 개의 인자를 받아서, 템플릿 리터럴을 사용하여 해당 정보를 출력합니다. func 함수 호출: info 배열의 각 객체의 num과 str 속성을 func 함수에 전달하여 실행합니다.
결과 확인하기
17.함수가 실행 되었습니다.
16.함수 유형 : 객체안에 함수를 이용한 형태
JavaScript에서 객체 리터럴을 사용하여 객체를 생성하고, 그 객체 내에 화살표 함수를 사용한 메서드를 정의하는 예제입니다.
매개변수가 여러개면 다 써야되는 불편함이 있습니다.
{
const info = {
num: 18,
str : "함수가 실행되었습니다."
result : () => console.log(`${info.num}. ${info.str}`)
}
info.result();
}
1. info 객체는 num과 str 두 개의 프로퍼티를 가지고 있습니다.
2. result 프로퍼티는 화살표 함수로 정의되어 있으며, 이 함수는 info.num과 info.str 값을 사용하여 문자열을 생성하고 console.log로 출력합니다.
3. info.result()는 result 메서드를 호출하여 해당 함수 내의 코드를 실행합니다.
결과 확인하기
17.함수 유형 : 객체 생성자 함수
1.인스턴트 생성이 중요!, 매개변수가 여러개여도 this. 한번만 쓰면 되며 변수를 자유롭게 불러올 수 있는 장점이 있으나 비효율적 단점도 있습니다.
{
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();
info2.result();
}
Func 함수는 두 개의 매개변수 num과 str을 받습니다.
this.num과 this.str는 생성자 함수 내에서 인스턴스의 프로퍼티로 설정됩니다.
this.result는 화살표 함수로 정의되어 있으며, 이 함수는 인스턴스가 호출될 때 실행되며 console.log를 사용하여 num과 str을 출력합니다.
info1과 info2는 Func 생성자 함수를 사용하여 두 개의 인스턴스를 생성합니다.
info1.result()과 info2.result()는 각각 result 메서드를 호출하여 각각의 인스턴스에 대한 결과를 출력합니다.
결과 확인하기
20. 함수가 실행되었습니다.
18.함수 유형 : 프로토타입 함수
객체 생성자 함수와 다르게 함수를 따로 뺼수 있어서 효율적입니다. 다만 this.를 쓰면 화살표함수를 쓸수 없습니다. function을 써야 됩니다.
{
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();
info2.result();
}
.
결과 확인하기
22, "함수가 실행되었습니다."
19.함수 유형 : 객체 리터럴 함수
JavaScript에서 객체 생성을 위한 생성자 함수와 프로토타입을 사용하는 예제입니다.
{
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();
info2.result2();
}
1.Func 함수는 두 개의 매개변수 num과 str을 받고, this.num과 this.str를 사용하여 인스턴스의 프로퍼티로 설정합니다.
2.`Func.prototype1 객체를 사용하여 result1과 result2라는 두 개의 메서드를 정의합니다.
3. info1과 info2는 Func 생성자 함수를 사용하여 두 개의 인스턴스를 생성합니다.
4. info1.result1()은 info1 인스턴스에 대한 result1 메서드를 호출하고, info2.result2()는 info2 인스턴스에 대한 result2 메서드를 호출합니다.
5.result1과 result2 메서드는 각각의 인스턴스에 대한 num과 str 프로퍼티를 출력합니다. 이 예제에서는 프로토타입을 사용하여 두 인스턴스가 동일한 메서드를 공유하게 됩니다.
결과 확인하기
실행 되었습니다.2
20. 함수 : 즉시실행 함수
주어진 코드는 즉시 실행 함수의 두 가지 형태를 보여주고 있습니다. 즉시 실행 함수는 함수를 정의하고 즉시 실행하는 패턴으로 사용됩니다.
{
(function func () {
console.log("25. 함수가 실행되었습니다.");
})();
(() => {
console.log("26. 함수가 실행되었습니다.");
})();
}
1.이 코드는 기명 함수를 사용한 즉시 실행 함수입니다. 함수를 정의하고 즉시 호출하여 실행합니다. 함수 내부의 코드는 함수가 정의되자마자 실행되므로 "25. 함수가 실행되었습니다."라는 메시지가 콘솔에 출력됩니다.
2.이 코드는 익명 화살표 함수를 사용한 즉시 실행 함수입니다. 화살표 함수를 사용하여 함수를 정의하고 즉시 호출하여 실행합니다. 마찬가지로 함수 내부의 코드는 정의되자마자 실행되고 "26. 함수가 실행되었습니다."라는 메시지가 콘솔에 출력됩니다.
결과 확인하기
"26. 함수가 실행되었습니다."
21. 함수 : 파라미터 함수
"파라미터 함수"라는 용어는 보통 매개변수를 가진 함수를 가리키는 것으로 이해할 수 있습니다."매개변수 함수"는 함수 내부에서 사용되는 입력 값을 받는 변수를 가지고 있는 함수를 의미합니다.
{
function func(str = "27. 함수가 실행되었습니다."){
console.log(str);
}
func();
const func1 = (str = "28. 함수가 실행되었습니다.") => {
console.log(str);
}
func1();
}
1.이 함수는 str이라는 매개변수를 가지며, 기본값으로 "27. 함수가 실행되었습니다." 문자열을 가집니다. 이 함수를 호출할 때 파라미터를 전달하지 않으면 기본값이 사용됩니다. 예를 들어, func()를 호출하면 "27. 함수가 실행되었습니다."가 출력됩니다.
2.이 화살표 함수도 str이라는 매개변수를 가지며, 기본값으로 "28. 함수가 실행되었습니다." 문자열을 가집니다. 화살표 함수는 변수 func1에 할당되며, 이 함수를 호출할 때도 파라미터를 전달하지 않으면 기본값이 사용됩니다. 예를 들어, func1()를 호출하면 "28. 함수가 실행되었습니다."가 출력됩니다.
결과 확인하기
"28. 함수가 실행되었습니다."
22. 함수 : 재귀 함수
재귀 함수(Recursive Function)는 자기 자신을 호출하는 함수입니다. 즉, 함수 내부에서 동일한 함수를 호출하는 방식을 의미합니다. 이러한 재귀 호출은 함수가 스스로를 호출하면서 작업을 수행하고, 종료 조건을 만족하면 호출을 멈추는 방식으로 동작합니다. 재귀 함수는 반복적인 작업을 처리하거나 복잡한 문제를 간단하게 해결하는 데 유용합니다.
{
function func(num){
for(let i=1; i<=num; i++){
console.log("29. 함수가 실행되었습니다.");
}
}
func(10);
function func1(num){
if(num < 1) return;
console.log("30. 함수가 실행되었습니다.");
func1(num - 1);
}
func1(10);
}
1.func1 함수 (재귀 함수를 사용한 함수): func1 함수는 num이 1보다 작을 때 (즉, 종료 조건) 함수의 재귀 호출을 멈춥니다. 그렇지 않으면 "30. 함수가 실행되었습니다." 메시지를 출력하고 num을 1 감소시킨 다음, 자기 자신을 호출하여 다시 함수를 실행합니다.
2.이 과정이 num이 1보다 작아질 때까지 반복됩니다. 결과적으로 func1(10)을 호출하면 "30. 함수가 실행되었습니다." 메시지가 10번 출력됩니다.
3.재귀 함수는 주로 문제를 더 작은 하위 문제로 분할하고 해결하는 데 사용됩니다. 종료 조건을 정확히 설정하여 무한 루프를 방지해야 합니다.
결과 확인하기
"30. 함수가 실행되었습니다."
23. 함수 : 콜백 함수
콜백 함수는 다른 함수에 전달되어 나중에 호출되는 함수를 말합니다.
{
01. 이벤트 콜백 함수
function func() {
console.log("31. 함수가 실행되었습니다.")
}
btn.addEventListener("click," func);
//02. 함수를 다른 함수의 인자로 전달
function func1() {
console.log("32. 함수가 실행되었습니다.")
}
function func2(callback){
callback();
// func1();
}
func2(func1)
// 03 반복문으로 콜백함수 만들기
function func3(num){
console.log(num +". 함수가 실행되었습니다." );
}
function func4(callback){
for(let i = 33; i<=38; i++){
callback(i)
}
}
func4(func3);
}
1. 이벤트 리스너를 사용하여 'click' 이벤트가 발생하면 func 함수가 실행됩니다.
2. 함수를 다른 함수의 인자로 전달하였습니다. func2 함수는 다른 함수(callback)를 인자로 받고, 받은 함수를 실행합니다. 여기에서 func1 함수를 func2 함수의 인자로 전달하고, func2가 호출되면 func1 함수가 실행됩니다.
3. func4 함수는 다른 함수(callback)를 인자로 받고, 반복문을 사용하여 해당 함수를 여러 번 호출합니다.
여기에서 func3 함수를 func4 함수의 인자로 전달하고, func4가 호출되면 func3 함수가 33부터 38까지의 값을 가지는 인자와 함께 여러 번 실행됩니다.
결과 확인하기
32. 함수가 실행되었습니다.
33. 함수가 실행되었습니다.
34. 함수가 실행되었습니다.
35. 함수가 실행되었습니다.
36. 함수가 실행되었습니다.
37. 함수가 실행되었습니다.
38. 함수가 실행되었습니다.
24.함수 : 비동기 함수 : 콜백 함수
동기적인 함수 호출과 비동기적인 함수 호출, 그리고 비동기적인 콜백 함수 호출에 대한 예제를 포함하고 있습니다. 아울러 "콜백 지옥"이라고도 불리는 콜백 함수 중첩의 상황도 다룹니다.
{
//01 동기적인 함수 호출
function func1() {
console.log("39. 함수가 실행되었습니다.");
}
function func2() {
console.log("40. 함수가 실행되었습니다.");
}
func1();
func2();
//02. 비동기적인 함수 호출
function func3() {
setTimeout(() => {
console.log("41. 함수가 실행되었습니다.");
}, 1000);
}
function func4() {
console.log("42. 함수가 실행되었습니다.");
}
func3();
func4();
//03. 비동기적인 콜백 함수 호출
{
function func5(callback) {
setTimeout(() => {
console.log("43. 함수가 실행되었습니다.");
callback();
}, 1000);
}
function func6() {
console.log("44. 함수가 실행되었습니다.");
}
func5(function(){
func6();
});
}
//콜백 지옥
{
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(){
setTimeout(() => {
console.log("funcD가 실행되었습니다.");
},1000)
}
funcA(function(){
funcB(function(){
funcC(function(){
funcD();
});
});
});;
}
}
01.func1과 func2는 동기적으로 호출됩니다. 즉, func1이 실행을 마칠 때까지 func2는 호출되지 않고, 그 반대도 마찬가지입니다.
02. func3은 비동기 함수로, setTimeout 함수를 사용하여 1초 뒤에 실행됩니다. 따라서 func4는 func3의 실행을 기다리지 않고 즉시 호출됩니다.
03.func5는 비동기 함수로, setTimeout을 사용하여 1초 뒤에 실행됩니다. 그러나 func5는 콜백 함수를 인자로 받아서 콜백 함수가 실행된 이후에 실행이 완료됩니다. 이 경우, func6이 func5의 콜백 함수로 전달되고, func5가 실행을 마친 후에 func6이 실행됩니다.
04. 이 부분은 콜백 지옥의 예제입니다. funcA가 실행되고, 그 후에 funcB가 실행되며, 그 후에 funcC가 실행되고, 마지막으로 funcD가 실행됩니다. 모두 비동기 함수이며, 콜백 함수를 통해 연쇄적으로 호출됩니다. 이런 형태의 코드는 가독성과 유지보수가 어려울 수 있으므로 주의가 필요합니다.
결과 확인하기
"40. 함수가 실행되었습니다."
"41. 함수가 실행되었습니다."
"42. 함수가 실행되었습니다."
"43. 함수가 실행되었습니다."
"44. 함수가 실행되었습니다."
"funcA가 실행되었습니다."
"funcB가 실행되었습니다."
"funcC가 실행되었습니다."
"funcD가 실행되었습니다."
25. 함수 : 비동기 함수 : 프로미스
이 코드는 JavaScript에서 Promise를 사용하여 비동기 함수를 다루는 예제를 제공하고 있습니다. Promise는 비동기 작업을 관리하고 해당 작업의 완료 여부에 따라 처리를 제어하는 객체입니다.
{
let data = true;
const func = new Promise((resolve, reject) => {
if(data){
resolve("45.함수가 실행되었습니다.");
} else {
reject("45.함수가 실행되지 않았습니다.");
}
});
func()
.then(result => {
console.log(result);
})
.catch(error => {
console.log(error);
});
//콜백지옥 -> 프로미스
function funcA() {
return new Promise((resolve) => {
setTimeout(() => {
console.log("funcA가 실행되었습니다.");
resolve();
}, 1000);
});
}
function funcB() {
return new Promise((resolve) => {
setTimeout(() => {
console.log("funcB가 실행되었습니다.");
resolve();
}, 1000);
});
}
function funcC() {
return new Promise((resolve) => {
setTimeout(() => {
console.log("funcC가 실행되었습니다.");
resolve();
}, 1000);
});
}
function funcD() {
return new promise((resolve) => {
setTimeout(() => {
console.log("funcD가 실행되지 않았습니다.");
resolve();
}, 1000)
})
}
funcA()
.then(funcB)
.then(funcC)
.then(funcD)
.catch((error) => {
console.log(error)
})
}
첫 번째 부분에서 new Promise를 사용하여 Promise 객체를 생성합니다. Promise 객체는 resolve와 reject 함수를 인자로 받습니다. resolve는 비동기 작업이 성공했을 때 호출되며, reject는 실패했을 때 호출됩니다. 이후 func()를 호출하면 해당 Promise 객체가 반환됩니다. .then() 메서드는 Promise가 성공적으로 완료됐을 때 실행할 함수를 정의합니다. .catch() 메서드는 Promise가 실패했을 때 실행할 함수를 정의합니다. 이 코드에서는 data가 true이므로 resolve가 호출되어 "함수가 실행되었습니다."가 출력됩니다. 이 부분에서는 funcA, funcB, funcC, funcD라는 비동기 함수가 Promise 객체를 반환합니다. setTimeout을 사용하여 1초 후에 각 함수가 실행됩니다. .then() 메서드를 연쇄적으로 사용하여 비동기 함수의 호출 순서를 지정합니다. .catch() 메서드는 모든 Promise가 성공적으로 완료되면 호출되는 것이 아니라, 하나라도 실패하면 호출됩니다. 각 함수는 실행 후 resolve()를 호출하여 해당 Promise를 성공 상태로 만듭니다. 이렇게 Promise를 사용하면 콜백 지옥과 같이 여러 단계의 비동기 작업을 간단하게 관리할 수 있습니다.
결과 확인하기
"45.함수가 실행되지 않았습니다."
"funcA가 실행되었습니다." "funcB가 실행되었습니다." "funcC가 실행되었습니다."
26. 함수 : 비동기 함수 : asyne/await
.
{
//01
function func(){
console.log("46.함수가 실행되었습니다.");
}
func();
//02
async function func2(){
console.log("47.함수가 실행되었습니다.");
}
func2();
//03
async function func3(){
const result = await fetch("https://webstoryboy.github.io/webstoryboy/w_json/gineungsaShort.json");
const data = await result.json();
console.log(data)
}
func3();
//04
async function func4(){
try {
const result = await fetch("https://webstoryboy.github.io/webstoryboy/w_json/gineungsaShort.json");
const data = await result.json();
console.log(data);
} catch (error){
console.log(error);
}
}
func4();
}
2.이 함수는 async 함수로 비동기 함수입니다. 하지만 await를 사용하지 않으므로 동기적으로 실행됩니다.
3.이 함수는 비동기 함수로, fetch 함수를 사용하여 웹에서 데이터를 가져옵니다. await를 사용하여 비동기적으로 데이터를 기다립니다.
fetch를 통해 데이터를 가져오고, result.json()은 응답을 JSON 형식으로 파싱합니다.
4.이 함수도 fetch를 사용하여 데이터를 비동기적으로 가져옵니다.
try...catch 블록을 사용하여 예외를 처리합니다.
데이터를 출력하거나 예외를 처리한 후에 해당 내용을 출력합니다.
주어진 코드를 실행하면 원격 JSON 데이터를 가져와서 출력할 것입니다. 에러가 발생하면 예외를 처리하여 에러 메시지를 출력합니다
결과 확인하기
"47.함수가 실행되었습니다."
27. 함수 : 중첩 함수
.
{
}
결과 확인하기
실행 되었습니다.2
실행 되었습니다.3
실행 되었습니다.4
28. 함수 : 클로저
.
{
}
결과 확인하기
실행 되었습니다.2
실행 되었습니다.3
실행 되었습니다.4
29. 클래스 : 기본
.
{
}
결과 확인하기
실행 되었습니다.2
실행 되었습니다.3
실행 되었습니다.4
30. 클래스 : 상속
.
{
}
결과 확인하기
실행 되었습니다.2
실행 되었습니다.3
실행 되었습니다.4