01. 함수 : 선언적 함수
선언적 함수는 함수를 명시적으로 정의하고 코드 어디에서든 호출할 수 있는 방식입니다. 함수의 이름, 매개변수 및 코드 블록을 포함하며, 코드의 가독성과 모듈화를 증진시키는 데에 유용합니다.
{
function func(){ // function: 그룹화 하기위해
console.log("1. 함수가 실행되었습니다.");
}
func();
}
함수의 성격에는 실행 가능성, 재사용성 등이 있습니다.
실행 가능성 : 가장 중요한 특성 중 하나입니다. 함수는 정의된 코드 블록을 실행할 수 있는 기능을 가지고 있어 프로그램 내에서 실제로 작업을 수행하는 데 사용됩니다.
재사용성 : 함수를 생성하여 특정 작업을 추상화하고 모듈화함으로써, 동일한 코드 조각을 여러 번 사용하며 개발 시간을 단축하고 코드의 일관성과 유지보수성을 높이는 프로그래밍 개념입니다.
결과 확인하기
02. 함수 : 익명 함수
익명 함수는 이름 없이 정의되는 함수로, 주로 다른 함수의 인자로 사용되거나 변수에 할당되어 활용됩니다.
{
const func = function(){
console.log("2. 함수가 실행되었습니다.");
}
func();
}
함수의 내용은 동일하지만 이름이 없기 때문에 한 번만 사용하거나 재사용하지 않을 경우에 유용합니다.
결과 확인하기
03. 함수 : 매개변수 함수
매개변수 함수는 다른 함수 안으로 전달되어 사용되는 함수입니다.
{
function func(str){
console.log(str);
}
func("3. 함수가 실행되었습니다.");
}
매개변수 함수는 주로 함수의 동작을 조정하거나 다양한 작업을 처리할 때 활용됩니다.
결과 확인하기
04. 함수 : 리턴값(결과/종료) 함수
리턴값(결과/종료)이 있는 함수는 return 제어문을 사용합니다.
{
function func(){
return "4. 함수가 실행되었습니다.";
}
console.log(func());
}
함수 내부에서 처리된 결과를 함수 외부로 반환하는 함수이며, 함수가 실행되고 나면 해당 함수가 반환하는 값을 변수에 저장하거나 다른 함수에 인자로 전달할 수 있습니다. 이를 통해 함수의 계산 결과나 처리한 데이터를 활용할 수 있습니다.
결과 확인하기
05. 함수 : 매개변수 + 리턴값 함수
매개변수와 리턴값을 모두 활용하는 함수는 재사용성과 가독성 등 여러 이유로 유용하여 가장 자주 쓰입니다.
{
function func(str){
return str;
}
console.log(func("5. 함수가 실행되었습니다."));
}
매개변수가 있는 함수와 리턴값 함수를 함께 쓸 수 있습니다.
결과 확인하기
06. 화살표 함수 : 선언적 함수
화살표 함수는 선언적 함수를 사용하는 몇 가지 이유와 비교할 때 간결성과 간편함, 편리함 등이 높아 효율이 좋습니다. 그러나, 화살표 함수는 모든 상황에서 적합하지는 않습니다. 메서드 정의, 생성자 함수, 객체 내부에서의 함수 작성 등 특정 상황에서는 일반적인 선언적 함수를 사용하는 것이 더 적절할 수 있습니다.
{
func = () => {
console.log("6. 함수가 실행되었습니다.");
}
func();
}
화살표 함수를 이용하면 간단하게 표현할 수 있습니다.
결과 확인하기
07. 화살표 함수 : 익명 함수
화살표 함수는 짧은 함수 표현식을 더 간결하게 작성할 수 있도록 도와줍니다.
{
const func = () => {
console.log("7. 함수가 실행되었습니다.");
}
func();
}
함수의 내용이 간단하고 명료한 경우, 중괄호와 function 키워드를 사용하는 대신 화살표 함수를 사용하여 코드를 축약할 수 있습니다.
결과 확인하기
08. 화살표 함수 : 매개변수 함수
매개변수로 전달된 문자열을 콘솔에 출력하는 간단한 함수를 정의하고 호출하는 예제입니다.
{
func = (str) => {
console.log(str);
}
func("8. 함수가 실행되었습니다.");
}
화살표 함수를 사용하여 func라는 함수를 정의하고 호출합니다.
결과 확인하기
09. 화살표 함수 : 리턴값 함수
아무런 인수를 받지 않고 항상 "실행되었습니다." 문자열을 반환하는 간단한 화살표 함수를 정의하고 호출하는 예제입니다.
{
func = () => {
return "9. 함수가 실행되었습니다.";
}
console.log(func());
}
화살표 함수를 사용하여 func라는 함수를 정의하고 호출하는 코드입니다.
결과 확인하기
10. 화살표 함수 : 매개변수 + 리턴값 함수
화살표 함수를 정의하고 호출하는 방법을 보여주는 예시입니다. 문자열을 인수로 받아서 그 문자열을 그대로 반환하고 출력하는 역할을 합니다. 또한 생략을 통해 간단하게 식을 표현할 수 있습니다.
{
const func = (str) => {
return str;
}
console.log(func("10. 함수가 실행되었습니다."));
}
{
const func = (str) => { // 익명 함수로 변경
return str;
};
console.log(func("10-1. 함수가 실행되었습니다."));
}
{
const func = str => { // () 생략
return str;
};
console.log(func("10-2. 함수가 실행되었습니다."));
}
{
const func = str => str; // return 생략
console.log(func("10-3. 함수가 실행되었습니다."));
}
{
func = str => str; //const 생략
console.log(func("10-4. 함수가 실행되었습니다."));
}
매개변수가 있는 함수와 리턴값 함수를 함께 쓸 수 있습니다. 거기에 익명함수를 합쳐 표현할 수도 있습니다.
() 생략 : 화살표 함수의 매개변수가 하나뿐인 경우, 매개변수 주변의 괄호 ()를 생략할 수 있습니다.
return 생략 : 하나의 표현식을 반환하는 경우 return 키워드를 생략할 수 있습니다. 따라서 코드에서 str => str 부분은 str 매개변수를 받아서 그 값을 그대로 반환하는 화살표 함수를 정의하고 있습니다.
const 생략 : const 또는 let 키워드 없이 변수 func를 선언하는 것은 JavaScript에서 유효한 문법이 아닙니다. 하지만 브라우저 또는 JavaScript 실행 환경에서 실행할 때 일반적으로 에러를 발생시키지는 않습니다.
다만, 코드를 올바르게 작성하기 위해서는 변수를 선언할 때 const 또는 let을 사용하는 것이 좋습니다.
결과 확인하기
10-1. 함수가 실행되었습니다.
10-2. 함수가 실행되었습니다.
10-3. 함수가 실행되었습니다.
10-4. 함수가 실행되었습니다.
11. 함수 유형 : 함수와 매개변수를 이용한 형태
두 개의 매개변수 값을 받아와서 그 값을 조합하여 콘솔에 출력하는 함수를 정의하고 호출하는 예제입니다.
{
function func(num, str){
console.log(`${num}. ${str}`); // 템플릿 리터럴
}
func(11, "함수가 실행되었습니다.");
}
num: 숫자를 나타내는 매개변수
str: 문자열을 나타내는 매개변수
${} : 함수 내부에서 템플릿 리터럴을 사용하여 매개변수 num과 str을 조합하여 문자열을 생성합니다.
결과 확인하기
12. 함수 유형 : 함수와 변수를 이용한 형태
두 개의 변수를 정의하고 함수를 호출하여 해당 변수 값을 조합하여 콘솔에 출력하는 예제입니다.
{
const num = 12;
const str = "함수가 실행되었습니다.";
function func(num, str){
//console.log(num + ". " + str);
console.log(`${num}. ${str}`);
}
func(num, str);
}
전역 변수인 num과 str을 함수에 직접 전달하여 함수가 이 값을 사용합니다. 이렇게 하면 함수가 외부에서 정의된 변수를 활용할 수 있게 됩니다.
결과 확인하기
13. 함수 유형 : 함수와 배열를 이용한 형태
배열을 사용하여 여러 개의 숫자와 문자열을 관리하고, 함수를 호출하여 배열의 원소를 조합하여 콘솔에 출력하는 예제입니다.
{
const num = [13, 14];
const str = ["함수가 실행되었습니다.", "함수가 실행되었습니다."];
function func(num, str){
console.log(`${num}. ${str}`);
}
func(num[0], str[0]);
func(num[1], str[1]);
}
배열을 선언했기때문에 []을 사용하여 호출합니다.
결과 확인하기
14. 함수가 실행되었습니다.
14. 함수 유형 : 함수와 객체를 이용한 형태
객체를 사용하여 숫자와 문자열 값을 관리하고, 함수를 호출하여 객체의 속성을 조합하여 콘솔에 출력하는 예제입니다.
{
const info = {
num : 15,
str : "함수가 실행되었습니다."
}
function func(num, str){
console.log(`${num}. ${str}`);
}
func(info.num, info.str);
}
const tinfo = {} : info라는 객체를 선언하고 num과 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);
func(info[1].num, info[1].str);
}
배열 안에 객체를 사용하여 선언했기때문에 []. 을 사용하여 호출합니다.
결과 확인하기
17. 함수가 실행되었습니다.
16. 함수 유형 : 객체 안에 함수를 이용한 형태
숫자, 문자열, 함수를 포함한 객체에서 console.log를 사용하여 숫자와 문자열을 출력하는 예제입니다.
{
num: 18,
str: "함수가 실행되었습니다.",
// result: () => {
// return
// console.log(`${info.num}. ${info.str}`);
// }
// {}생략
result: () => console.log(`${info.num}. ${info.str}`)
}
result: () => console.log(${info.num}. ${info.str}) : 이 속성은 함수를 값으로 가지고 있으며, 화살표 함수로 정의되어 있습니다. 이 함수는 console.log를 사용하여 숫자와 문자열 두 가지 정보를 출력합니다.
결과 확인하기
17. 함수 유형 : 객체 생성자 함수
객체 생성자 함수를 사용하여 객체를 생성하고, 생성된 객체들을 통해 함수를 호출하는 예제입니다.
{
function Func(num, str){
this.num = num; // 한 번만 써도 여러개 변수 선언 가능
this.str = str;
this.result = () => {
console.log(`${this.num}. ${this.str}`)
}
}
// 인스턴스 생성. 뭔가 생성할 땐 new. 객체 생성자 함수 할 땐 무조건 인스턴스 생성해야함.
const info1 = new Func(19, "함수가 실행되었습니다.");
const info2 = new Func(20, "함수가 실행되었습니다.");
// 호출
info1.result();
info2.result();
}
객체 생성자 함수 : 객체 생성자 함수는 객체를 생성하고 그 속성과 메서드를 정의하는 함수입니다. 이를 통해 비슷한 종류의 객체를 반복해서 생성할 수 있습니다.
인스턴스는 객체 지향 프로그래밍에서 클래스(또는 객체 생성자 함수)를 기반으로 생성된 실제 객체를 가리킵니다. 클래스나 생성자 함수는 객체의 구조와 행동을 정의하며, 이를 기반으로 하나 이상의 인스턴스를 생성할 수 있습니다.
function Func(num, str){} : Func라는 이름의 함수를 정의합니다. 이 함수는 두 개의 매개변수 num과 str을 받습니다.
this.num = num; / this.str = str; : Func 함수 내에서 this 키워드를 사용하여 객체의 속성을 설정합니다. 이렇게 하면 객체가 생성될 때 해당 속성들이 초기화됩니다.
this.result = () => {} : 객체의 result 속성에 화살표 함수를 할당합니다. 이 함수는 객체가 생성될 때마다 고유한 num 및 str 값을 출력하는 역할을 합니다.
const info1 = new Func() : Func 함수를 사용하여 info1과 info2 두 개의 객체 인스턴스를 생성합니다. 각각의 객체는 다른 num 및 str 값을 가지고 있습니다.
info.result() : 각 객체 인스턴스의 result 속성을 호출하여 함수를 실행합니다. 이때, 객체 자체의 num 및 str 값을 사용하여 해당 정보를 출력하게 됩니다.
결과 확인하기
20. 함수가 실행되었습니다.
18. 함수 유형 : 프로토타입 함수
객체 생성자 함수 Func를 정의하고, 그 함수의 프로토타입에 result 메서드를 추가하여 객체를 생성하고 호출하는 예제입니다.
{
function Func(num, str){
this.num = num;
this.str = str;
}
// prototype 써있으면 어디에 속해있는 거임.
Func.prototype.result = function(){ //밖으로 빼면 화살표 함수는 this가 안 먹힘 //function과 화살표 함수의 차이점(1)
console.log(`${this.num}. ${this.str}`)
}
const info1 = new Func(21, "함수가 실행되었습니다.");
const info2 = new Func(22, "함수가 실행되었습니다.");
info1.result();
info2.result();
}
Func.prototype.result = function() {} : Func 함수의 프로토타입에 result 메서드를 추가합니다. 이렇게 추가한 메서드는 모든 Func 객체의 인스턴스에서 공유됩니다. result 메서드는 객체의 num 및 str 속성을 사용하여 정보를 출력합니다.
프로토타입 : 객체 간에 메서드와 속성을 공유하고 상속 관계를 설정하는 방법입니다. 이것은 JavaScript에서 객체 지향 프로그래밍을 할 때 매우 중요한 개념 중 하나이며, 코드를 더 효율적으로 작성하고 재사용할 수 있도록 도와줍니다.
결과 확인하기
22. 함수가 실행되었습니다.
19. 함수 유형 : 객체 리터럴 함수
객체 생성자 함수 Func를 정의하고, 그 함수의 프로토타입에 메서드를 추가하여 객체를 생성하고 호출하는 예제입니다.
{
function Func(num, str){
this.num = num;
this.str = str;
}
Func.prototype = { // 중괄호 : 객체 리터럴
result : 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.result();
info2.result();
}
Func.prototype = {} : Func 함수의 프로토타입을 새로운 객체 리터럴로 덮어씁니다. 이 객체 리터럴에는 result와 result2라는 두 개의 메서드가 정의되어 있습니다.
결과 확인하기
24. 함수가 실행되었습니다.
20. 함수 : 즉시실행 함수
"즉시 실행 함수" 또는 "IIFE(Immediately Invoked Function Expression)"라고도 불리는 패턴을 사용하는 예제입니다. 함수를 정의하자마자 즉시 실행하며, 주로 스코프를 격리하고 변수 충돌을 방지하거나 모듈 패턴을 구현할 때 사용됩니다.
{
(function(){
console.log("25. 함수가 실행되었습니다.");
})();
(() => {
console.log("26. 함수가 실행되었습니다.");
})();
}
첫 번째 즉시 실행 함수: 익명 함수를 정의하고 바로 실행합니다.
두 번째 즉시 실행 함수: 화살표 함수를 사용하여 동일한 방식으로 함수를 정의하고 즉시 실행합니다.
결과 확인하기
26. 함수가 실행되었습니다.
21. 함수 : 파라미터 함수
함수에 기본값을 설정할 수 있는 파라미터 기능을 사용한 예제입니다. 파라미터의 기본값을 설정하면 함수를 호출할 때 필요한 인수를 전달하지 않아도 기본 동작을 정의할 수 있습니다. 이는 함수가 더 유연하게 사용될 수 있도록 도와주며, 기본값이 필요한 경우에만 인수를 제공하면 됩니다.
{
function func(str = "27. 함수가 실행되었습니다."){
console.log(str)
}
func();
const func1 = (str = "28. 함수가 실행되었습니다.") => {
console.log(str)
}
func1();
}
파라미터(매개변수(parameter)) : 함수나 메소드에 전달되는 값을 받는 변수를 가리키며, 함수가 실행될 때 이러한 값들을 인수(argument)라고 합니다.
결과 확인하기
28. 함수가 실행되었습니다.
22. 함수 : 재귀 함수 : 자기 자신을 호출하는 함수
재귀 함수(Recursive Function)는 자기 자신을 호출하는 함수를 가리킵니다. 재귀 함수는 일반적인 함수와 마찬가지로 작동하지만, 특정 조건이 충족될 때 자기 자신을 다시 호출하여 문제를 분할하거나 반복적으로 해결할 수 있는 경우에 사용됩니다. 특정 작업을 반복하거나 문제를 분할하여 해결하는 데 유용하며, 재귀 종료 조건을 잘 설정해야 무한 루프에 빠지지 않도록 주의해야 합니다.
{
function func(num){
for(let i = 0; i < 10; i++) {
console.log("29. 함수가 실행되었습니다.");
}
}
func(10);
function func1(num){ // 이게 재귀 함수
if(num < 1) return;
console.log("30. 함수가 실행되었습니다.");
func1(num -1);
}
func1(10);
}
첫 번째 함수 func: 이 함수는 단순히 10번의 반복 실행을 수행하고, 자기 자신을 호출하지 않습니다. 한 번의 호출로 10번의 출력을 생성합니다.
두 번째 함수 func1 (재귀 함수): 재귀 함수로서 func1(num - 1)를 호출하고 있기 때문에 호출될 때마다 "30. 함수가 실행되었습니다."를 출력하고 num을 1씩 감소시키면서 재귀적으로 함수를 호출합니다. 따라서 두 번째 함수 func1은 func1(10)을 호출하면 "30. 함수가 실행되었습니다."가 10번 따로 출력됩니다.
결과 확인하기
30. 함수가 실행되었습니다.
30. 함수가 실행되었습니다.
30. 함수가 실행되었습니다.
30. 함수가 실행되었습니다.
30. 함수가 실행되었습니다.
30. 함수가 실행되었습니다.
30. 함수가 실행되었습니다.
30. 함수가 실행되었습니다.
30. 함수가 실행되었습니다.
30. 함수가 실행되었습니다.
23. 함수 : 콜백 함수 : 다른 함수로 실행되는 함수
콜백 함수(callback function)는 자바스크립트에서 중요한 개념 중 하나로, 다른 함수에 인자로 전달되고 나중에 실행되는 함수를 가리킵니다. 콜백 함수는 다양한 상황에서 사용됩니다. 주로 이벤트 처리, 비동기 작업, 반복 작업 등에서 활용됩니다.
{
// 01. 이벤트 콜백 함수
function func(){
console.log("31. 함수가 실행되었습니다.")
}
btn.addEventListener("click", func);
// 02. 함수를 다른 함수의 인자로 전달
function func1() {
console.log("32. 함수가 실행되었습니다.")
}
function func2(callback) {
callback();
}
func2(func1);
// 03. 반복문으로 콜백함수 만들기
function func3(num){
console.log(num + ". 함수가 실행되었습니다.");
}
function func4(callback){
for(let i=33; i<=38; i++){
callback(i);
}
}
func4(func3);
}
01. 이벤트 콜백 함수는 이벤트가 발생했을 때 실행되는 함수입니다. 'click' 이벤트가 발생했을 때 func 함수가 실행됩니다. 이 예제만으로는 클릭이벤트가 발생하지않아 실행되지않습니다.
02. 함수를 다른 함수의 인자로 전달하여 해당 함수를 나중에 실행할 수 있습니다. func1 함수를 func2 함수의 인자로 전달하여 실행합니다.
03. 콜백 함수를 활용하여 반복 작업을 수행할 수 있습니다. 예제에서는 func3 함수를 func4 함수에서 반복 호출하면서 다양한 숫자를 출력합니다.
결과 확인하기
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(); // 시간이 걸리니까 42 나오고 1초 뒤에 41 나옴
}
// 03. 비동기적인 콜백 함수 호출
{
function func5(callback){
setTimeout(() => {
console.log("43. 함수가 실행되었습니다.");
callback(); // 43 안에 콜백함수를 써서 43 나오고 44 나옴
}, 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. 동기적인 함수 호출로 순차적으로 처리가 실행됩니다.
02. func3는 1초 후에 실행되는 비동기 함수입니다. 이 함수 내에는 setTimeout 함수를 사용하여 1초 후에 콜백 함수를 실행하도록 예약합니다.
setTimeout : 함수 중 하나로, 특정 코드나 함수를 일정 시간 이후에 실행할 수 있게 해줍니다. 주로 비동기적인 작업을 수행할 때 사용됩니다. 첫 번째 인수에는 실행하고자 하는 코드 또는 함수가 들어가고, 두 번째 인수에는 실행을 지연시킬 시간(밀리초 단위)이 들어갑니다.
03. func5는 1초 후에 실행되고, 그 안에서 "43. 함수가 실행되었습니다."를 출력한 후 콜백 함수를 호출합니다. 비동기적인 콜백 함수 호출로, 비동기 작업을 처리하고 작업이 완료될 때 다른 함수를 호출하기 위해 사용됩니다.
콜백 지옥 : 콜백 지옥(callback hell)은 JavaScript 코드가 비동기 작업을 연속적으로 처리하고 중첩된 콜백 함수를 사용할 때 발생하는 혼란스러운 코드 구조를 가리키는 용어입니다. ES6부터 도입된 Promise와 async/await 패턴을 사용하여 비동기 코드를 더 읽기 쉽게 작성할 수 있습니다. 이로써 중첩된 콜백 함수를 줄일 수 있습니다.
결과 확인하기
40. 함수가 실행되었습니다.
42. 함수가 실행되었습니다.
41. 함수가 실행되었습니다.
43. 함수가 실행되었습니다.
44. 함수가 실행되었습니다.
25. 함수 : 비동기 함수 : 프로미스
프로미스(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);
});
}
.then() : .then() 메서드를 사용하여 작업이 성공한 경우 실행할 콜백 함수를 등록할 수 있습니다. 이 콜백 함수는 성공한 결과 데이터를 인수로 받습니다.
.catch() : .catch() 메서드를 사용하여 작업이 실패한 경우 실행할 에러 처리 콜백 함수를 등록할 수 있습니다. 이 콜백 함수는 에러 정보를 인수로 받습니다.
첫 번째 프로미스 사용: data가 true인 경우, 프로미스 func는 resolve를 호출하여 성공 상태로 처리됩니다. 그렇지 않으면 reject를 호출하여 실패 상태로 처리됩니다. func 프로미스는 then 및 catch 메서드를 사용하여 결과 또는 에러를 처리하고, 결과가 나타날 경우 then 블록이 실행되며 에러가 발생할 경우 catch 블록이 실행됩니다.
콜백 지옥을 프로미스로 대체: funcA, funcB, funcC, 및 funcD 함수는 각각 1초 후에 메시지를 출력하고 프로미스를 resolve합니다.
이러한 프로미스는 연결하여 실행되며, then을 사용하여 각 프로미스가 완료되면 다음 프로미스를 실행합니다. 에러가 발생하면 catch 블록에서 처리됩니다.
결과 확인하기
funcA가 실행되었습니다.
funcB가 실행되었습니다.
funcC가 실행되었습니다.
funcD가 실행되었습니다.
26. 함수 : 비동기 함수 : async/await
async/await는 JavaScript에서 비동기 코드를 더 간결하게 작성하고, 프로미스(Promise) 기반의 비동기 작업을 동기적으로 처리하는 데 사용되는 기능입니다.
{
// 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/webs2024/json/gineungsaJC2011_05.json");
const data = await result.json();
console.log(data);
}
func3();
// 04. 제일 많이 씀.
async function func4(){
try {
const result = await fetch("https://webstoryboy.github.io/webs2024/json/gineungsaJC2011_05.json");
const data = await result.json();
console.log(data);
} catch (erorr){ // 에러찾기까지 추가
console.log(erorr);
}
}
func4();
}
fetch : fetch 함수는 기본적으로 Promise를 반환하며, HTTP 요청을 수행하고 해당 요청에 대한 응답 데이터를 다룹니다. 주로 JSON, XML, HTML, 텍스트 등의 데이터를 가져오는 데 사용됩니다.
async/await 구문 내에서 await 키워드를 사용하면 사실상 프로미스를 기다리는 것과 같은 동작을 합니다. 실제로 fetch 함수는 프로미스를 반환합니다. await 키워드는 이 프로미스가 이행(resolve)될 때까지 함수 실행을 일시 중지하고, 프로미스가 이행되면 해당 이행 값을 반환합니다.
01. 동기적 함수 호출: 이 코드는 동기적으로 실행되며, func 함수가 호출되고 "46. 함수가 실행되었습니다."가 즉시 출력됩니다.
02. async 함수 선언: async 키워드로 선언된 func2 함수는 비동기 함수로, 비동기 작업을 수행할 때 사용됩니다. 하지만 이 예시에서는 동기적으로 실행되므로 "47. 함수가 실행되었습니다."가 즉시 출력됩니다.
03. async/await를 이용한 비동기 작업: async/await를 사용하여 비동기 작업을 수행합니다. await 키워드는 프로미스가 완료될 때까지 현재 함수의 실행을 일시 중지하고, 결과 데이터를 반환합니다. 이로써 비동기 코드를 동기적으로 작성할 수 있습니다.
04. async/await를 사용한 에러 처리: try...catch 블록을 사용하여 비동기 작업 중에 발생할 수 있는 에러를 처리합니다. 이것은 프로미스를 사용하는 방법 중 하나로, 에러를 간단하게 처리할 수 있습니다.
결과 확인하기
27. 함수 : 중첩 함수
{
}
결과 확인하기
28. 함수 : 클로저
{
}
결과 확인하기
29. 클래스 : 기본
{
}
결과 확인하기
30. 클래스 : 상속
{
}