01. 함수 : 선언적 함수(Declaration Function)
자바스크립트에서 함수는 프로그램 내에서 재사용 가능한 코드 블록을 정의하고 실행할 수 있는 도구입니다. 함수는 특정 작업을 수행하거나 값을 계산하기 위해 사용됩니다. 함수를 사용하면 코드를 구조화하고 관리하기 쉬워지며, 코드의 재사용성과 가독성을 높일 수 있습니다.
{
function func() {
var x = 100;
var y = 200;
var z = "javascript";
console.log(x);
console.log(y);
console.log(z);
}
func();
}
1. func라는 이름의 함수를 선언합니다.
2. 함수 내에서 변수 x, y, z를 선언하고 각각 100, 200, "javascript" 값을 할당합니다.
3. 변수 x, y, z의 값을 console.log를 사용하여 출력합니다.
4. 함수 func를 호출합니다.
결과 확인하기
200
javacript
02. 함수 : 익명 함수(Anonymous Function)
익명 함수(Anonymous Function)는 이름이 없는 함수를 말합니다. 이 함수들은 일반적으로 변수에 할당되거나 다른 함수 내에서 사용되는 함수 표현식으로 사용됩니다. 익명 함수는 주로 한 번 사용되거나 재사용 가능성이 낮을 때 유용합니다.
{
const func = function(){
let x = 100;
let y = 200;
let z = "javascript";
console.log(x);
console.log(y);
console.log(z);
};
func();
}
1. 함수 표현식을 사용하여 func라는 변수에 익명 함수를 할당합니다.
2. 함수 내부에서 세 개의 변수 x, y, z를 선언하고 값을 초기화합니다.
3. console.log(z);를 사용하여 변수 x, y, z의 값을 출력합니다.
4. 마지막으로 func()를 호출하여 함수를 실행합니다.
결과 확인하기
200
javascript
03. 함수 : 매개변수 함수(Parameter Function)
매개변수(Parameter Function) 함수는 함수 내에서 사용할 수 있는 변수를 정의하는데 사용되는 개념입니다. 함수를 호출할 때 전달되는 값은 매개변수를 통해 함수 내부로 전달됩니다. 이렇게 전달된 값은 함수 내에서 작업을 수행하거나 계산하는 데 사용될 수 있습니다.
{
function func (x, y, z) {
console.log(x);
console.log(y);
console.log(z);
}
func(100, 200, "javascript");
const func1 = function (x,y,z) {
console.log(x);
console.log(y);
console.log(z);
}
func1(300,400,"jquery")
}
1. function 키워드를 사용하여 함수 func를 정의하고, 매개변수 x, y, z를 받고 함수 내부에서 매개변수 x, y, z를 각각 출력합니다.
2. 함수를 호출할 때 func(100, 200, "javascript")와 같이 매개변수에 값을 전달하여 호출합니다.
3. const 키워드를 사용하여 함수 표현식을 변수 func1에 할당하고, 매개변수 x, y, z를 받습니다.
4. 함수를 호출할 때 func1(300, 400, "jquery")와 같이 매개변수에 값을 전달하여 호출합니다.
결과 확인하기
200
javascript
300
400
jquery
04. 함수 : 리턴값 함수(Return Function)
리턴값(Return Function) 함수는 함수가 실행된 후에 결과 값을 반환하는 함수입니다. 함수 내부에서 계산이나 작업을 수행한 뒤, 그 결과 값을 함수 외부로 전달하고자 할 때 사용됩니다. 리턴값 함수를 사용하면 함수의 결과를 변수에 저장하거나 다른 함수에 인자로 전달하여 활용할 수 있습니다.
{
function func(){
const x = 100;
return x;
}
console.log(func());
const func1 = function(){
const x = 200;
return x;
}
console.log(func1());
}
1. 함수 내부에서 x 변수에 100을 할당하고 해당 값을 반환합니다.
2. 함수를 호출하면 x 값인 100이 반환되고, func()을 호출하면 100이 출력됩니다.
3. const 키워드를 사용하여 함수를 변수 func1에 할당합니다.
4. 함수를 호출하면 x 값인 200이 반환되고, func1()을 호출하면 200이 출력됩니다.
결과 확인하기
jquery
05. 함수 : 매개변수 + 리턴값 함수
리턴값 함수에 매개변수를 받을 수 있도록 하는 함수입니다.
{
function func(x){
return x
}
console.log(func(100));
const func1 = function(x){
return x
}
console.log(func1(200));
}
1. function 키워드를 사용하여 함수를 정의하고 x라는 매개변수를 받아서 해당 값을 그대로 반환합니다.
2. 함수를 호출하면 x 값이 반환되고, 이 경우에는 func(100)을 호출하면 100이 출력됩니다.
3. const 키워드를 사용하여 함수를 변수 func1에 할당합니다.
4. 함수를 호출하면 x 값이 반환되고, 이 경우에는 func1(200)을 호출하면 200이 출력됩니다.
결과 확인하기
200
06. 화살표 함수 : 선언적 함수
화살표 함수(arrow function)는 ES6(ECMAScript 2015)에서 도입된 새로운 함수 선언 방식입니다. 기존의 함수 선언 방식인 함수 표현식(function expression)과 비교하여 간결하고 가독성이 좋으며, 주로 익명 함수나 콜백 함수로 사용됩니다. 화살표 함수의 주요 특징과 사용법을 설명하겠습니다.
{
func = () => {
document.write("함수가 실행되었습니다.");
}
func();
}
1. 함수 내부에서 document.write를 사용하여 "함수가 실행되었습니다." 문자열을 웹 페이지에 출력합니다.
2. 함수 내부의 코드 블록을 실행하며, "함수가 실행되었습니다." 문자열이 웹 페이지에 출력됩니다.
결과 확인하기
07. 화살표 함수 : 익명 함수
익명 함수를 화살표 함수로 바꾼 것입니다.
{
const func = () => {
document.write("함수가 실행되었습니다.");
}
func();
}
1. 이 화살표 함수는 매개변수를 가지지 않고 함수 내부에서 document.write를 사용하여 "함수가 실행되었습니다." 문자열을 웹 페이지에 출력합니다.
2. 이 호출은 함수 내부의 코드 블록을 실행하게 되며, "함수가 실행되었습니다." 문자열이 웹 페이지에 출력됩니다.
결과 확인하기
08. 화살표 함수 : 매개변수 함수
매개변수 함수를 화살표 함수로 바꾼 것입니다.
{
func = (x) => {
document.write(x);
}
func("함수가 실행되었습니다.");
}
1. 화살표 함수는 x라는 매개변수를 받고 함수 내부에서 document.write를 사용하여 x를 웹 페이지에 출력합니다.
2. func 함수를 호출하고 매개변수로 문자열 "함수가 실행되었습니다."를 전달합니다.
결과 확인하기
09. 화살표 함수 : 리턴값 함수
리턴값 함수를 화살표 함수로 바꾼 것입니다.
{
func = () => {
const x = "함수가 실행되었습니다."
return x;
}
document.write(func());
}
1. func라는 변수에 화살표 함수를 할당합니다. 화살표 함수는 매개변수가 없으므로 () 내부가 비어 있습니다.
2. 함수 내부에서 상수 x에 문자열 "함수가 실행되었습니다."를 할당합니다. 이 값을 return 키워드를 사용하여 반환합니다.
3. func 함수를 호출하고 그 결과를 document.write를 사용하여 웹 페이지에 출력합니다.
결과 확인하기
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(func3("실행되었습니다.4"));
}
1. 함수 표현식으로, func라는 변수에 화살표 함수를 할당합니다.함수는 str 매개변수를 받아 그 값을 반환합니다.
2. 나의 매개변수 str을 받는 경우, 괄호를 생략할 수 있습니다.
3. 함수의 몸통이 단일 표현식인 경우, 중괄호와 return 문을 생략할 수 있습니다.
4. 함수 선언에 const 키워드나 let, var 등을 사용하지 않으면 전역 스코프에 변수가 선언됩니다. 이렇게 전역에 변수를 선언하는 것은 가독성과 유지보수 측면에서 좋지 않을 수 있으므로 피하는 것이 좋습니다.
결과 확인하기
함수가 실행되었습니다-2
함수가 실행되었습니다-3
함수가 실행되었습니다-4
11. 함수 유형 : 함수와 매개변수를 이용한 형태
매개변수를 받아 함수를 실행하는 형태입니다.
{
function func(num, str){
console.log(`${num}. ${str}`);
}
func(11, "함수가 실행되었습니다.");
}
1. 함수 func를 정의합니다. 이 함수는 두 개의 매개변수 num과 str을 받습니다.
2. 함수 내에서는 매개변수 num과 str을 사용하여 문자열을 생성합니다. 이 문자열은 ${num}. ${str} 형식으로, num과 str 값을 조합한 결과입니다. 그리고 이 문자열을 console.log 함수를 사용하여 콘솔에 출력합니다.
3. 함수 func를 호출합니다. 이때 인수 11과 "함수가 실행되었습니다."를 전달합니다.
4. 함수 호출 시, num 매개변수에는 11이 할당되고, str 매개변수에는 "함수가 실행되었습니다."가 할당됩니다.
5. 함수 내부에서는 매개변수 num과 str을 사용하여 문자열을 생성하고, 결과적으로 "11. 함수가 실행되었습니다."가 콘솔에 출력됩니다.
결과 확인하기
12. 함수 유형 : 함수와 변수를 이용한 형태
함수 밖 변수를 사용하는 형태입니다.
{
const num = 12;
const str = "함수가 실행되었습니다.";
function func(num, str){
console.log(num + ". " + str);
console.log(`${num}. ${str}`);
}
func(num, str);
}
1. num과 str 상수를 선언하고 각각 12와 "함수가 실행되었습니다." 문자열을 할당합니다.
2. function func(num, str)은 func라는 이름의 함수를 선언합니다. 이 함수는 두 개의 매개변수 num과 str을 받습니다.
3. 함수 내부에서 두 가지 방식으로 문자열을 생성하고 출력합니다. 첫 번째 console.log 문은 문자열을 문자열 연결(concatenation) 방식으로 생성하고 출력합니다. 두 번째 console.log 문은 문자열 리터럴 템플릿을 사용하여 생성하고 출력합니다. 이 두 가지 출력 결과는 동일합니다.
4. func(num, str) 함수를 호출합니다. 이때, num과 str 변수에 저장된 값(12와 "함수가 실행되었습니다.")이 함수의 매개변수 num과 str에 전달됩니다.
5. 함수 내부에서는 전달된 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]);
}
1. num과 str 배열을 선언하고 각각 [13, 14]와 ["함수가 실행되었습니다.", "함수가 실행되었습니다."]를 할당합니다.
2. function func(num, str)는 func라는 이름의 함수를 선언합니다. 이 함수는 두 개의 매개변수 num과 str을 받습니다.
3. 함수 내에서는 템플릿 리터럴을 사용하여 문자열을 생성하고 출력합니다. ${num}. ${str}는 배열의 첫 번째 요소를 참조하여 해당 요소를 문자열에 포함시킵니다.
4. func(num[0], str[0])를 호출하여 배열 num의 첫 번째 요소와 배열 str의 첫 번째 요소를 전달합니다. 이로써 첫 번째 함수 호출이 이루어집니다.
5. func(num[1], str[1])을 호출하여 배열 num의 두 번째 요소와 배열 str의 두 번째 요소를 전달합니다. 이로써 두 번째 함수 호출이 이루어집니다.
결과 확인하기
14. 함수 유형 : 함수와 객체를 이용한 형태
함수 밖에 선언한 객체를 불러와 사용하는 형태입니다.
{
const info = {
num : 15,
str : "함수가 실행되었습니다."
}
function func(num, str){
console.log(`${num}. ${str}`);
}
func(info.num, info.str);
}
1. 객체 info를 선언하고 두 개의 속성을 가지고 있습니다: num과 str. num은 15, str은 "함수가 실행되었습니다."로 초기화됩니다.
2. function func(num, str)은 func라는 이름의 함수를 선언합니다. 이 함수는 두 개의 매개변수 num과 str을 받습니다.
3. func 함수 내에서는 템플릿 리터럴을 사용하여 문자열을 생성하고 출력합니다. ${num}. ${str}는 함수 호출 시 전달된 num과 str을 사용하여 문자열을 생성합니다.
4. func(info.num, info.str)를 호출하여 객체 info의 num 속성과 str 속성을 전달합니다. 이로써 함수가 호출되고, 객체 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);
}
1. 배열 info는 두 개의 객체를 포함하는 배열입니다. 각 객체는 num과 str 두 개의 속성을 가지고 있습니다.
2. function func(num, str)는 두 개의 매개변수 num과 str을 가지고 있는 함수를 선언합니다.
3. func 함수 내에서는 템플릿 리터럴을 사용하여 문자열을 생성하고 출력합니다. ${num}. ${str}는 함수 호출 시 전달된 num과 str을 사용하여 문자열을 생성합니다.
4. func(info[0].num, info[0].str)를 호출하여 배열 info의 첫 번째 객체의 num 속성과 str 속성을 전달합니다. 이로써 함수가 호출되고, 첫 번째 객체의 속성 값들이 함수 내부의 num과 str 매개변수에 전달됩니다.
5. 그 다음으로 func(info[1].num, info[1].str)를 호출하여 배열 info의 두 번째 객체의 num 속성과 str 속성을 전달합니다. 마찬가지로 함수가 호출되고, 두 번째 객체의 속성 값들이 함수 내부의 num과 str 매개변수에 전달됩니다.
결과 확인하기
16. 함수 유형 : 객체 안에 함수를 이용한 형태
객체 안에 함수를 선언하여 사용이 가능합니다.
{
const info = {
num: 18,
str: "함수가 실행되었습니다.",
result: () => console.log(`${info.num}. ${info.str}`)
}
info.result();
}
1. 객체 info는 num과 str 두 개의 속성을 가지고 있습니다. 또한 result라는 메서드를 가지고 있습니다.
2. result 메서드는 화살표 함수로 정의되어 있으며, 이 함수는 info.num과 info.str 값을 사용하여 템플릿 리터럴을 통해 문자열을 생성하고 콘솔에 출력합니다.
3. info.result(); 코드는 info 객체의 result 메서드를 호출합니다. 이로써 result 메서드가 실행되고, info.num과 info.str의 값인 "18. 함수가 실행되었습니다."가 콘솔에 출력됩니다.
결과 확인하기
17. 함수 유형 : 객체 생성자 함수
객체 생성자 함수(Constructor Function)는 JavaScript에서 객체를 생성하는 데 사용되는 특별한 종류의 함수입니다. 객체 생성자 함수를 사용하면 동일한 속성과 메서드를 가진 여러 객체를 생성할 수 있으며, 이 객체들은 생성자 함수의 인스턴스로 간주됩니다.
{
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();
}
1. Func 함수는 생성자 함수로서, num과 str 두 개의 매개변수를 받습니다. 이 함수 내에서 this.num과 this.str 속성을 정의하고, result 메서드를 정의합니다. result 메서드는 화살표 함수로 정의되어 있으며, this.num과 this.str 값을 사용하여 템플릿 리터럴을 통해 문자열을 생성하고 콘솔에 출력합니다.
2. info1과 info2는 각각 Func 생성자 함수를 사용하여 객체 인스턴스를 생성합니다. 이때 생성자 함수에 전달되는 값으로 num과 str 속성이 초기화됩니다.
3. info1.result();와 info2.result(); 코드는 각 객체 인스턴스의 result 메서드를 호출하여 결과를 출력합니다.
결과 확인하기
18. 함수 유형 : 프로토타입 함수
프로토타입 함수(Prototype Function)는 JavaScript 객체의 프로토타입(Prototype)에 메서드를 추가하는 방법 중 하나입니다. 이것은 모든 해당 객체 유형에 대해 해당 메서드를 공유할 수 있도록 합니다.
{
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();
}
1. Func 함수는 생성자 함수로서, num과 str 두 개의 매개변수를 받습니다. 생성자 함수 내에서 this.num과 this.str 속성을 정의합니다.
2. Func.prototype.result 메서드는 생성자 함수 Func의 프로토타입에 추가됩니다. 이 메서드는 this.num과 this.str 속성을 사용하여 템플릿 리터럴을 통해 문자열을 생성하고 콘솔에 출력합니다.
3. info1과 info2는 각각 Func 생성자 함수를 사용하여 객체 인스턴스를 생성합니다. 생성자 함수에 전달된 값으로 num과 str 속성이 초기화됩니다.
4. info1.result();와 info2.result(); 코드는 각 객체 인스턴스의 result 메서드를 호출하여 결과를 출력합니다.
결과 확인하기
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.prototype 객체는 생성자 함수 Func의 프로토타입을 재정의합니다. 이 객체 안에 result1과 result2 두 개의 메서드가 포함되어 있습니다.
3. result1 메서드는 객체의 num과 str 속성을 사용하여 템플릿 리터럴을 통해 문자열을 생성하고 콘솔에 출력합니다.
4. result2 메서드 역시 num과 str 속성을 사용하여 문자열을 생성하고 콘솔에 출력합니다.
5. info1과 info2는 각각 Func 생성자 함수를 사용하여 객체 인스턴스를 생성합니다. 생성자 함수에 전달된 값으로 num과 str 속성이 초기화됩니다.
6. info1.result1();과 info2.result2(); 코드는 각 객체 인스턴스의 result1과 result2 메서드를 호출하여 결과를 출력합니다.
결과 확인하기
20. 함수 : 즉시실행 함수
즉시 실행 함수(Immediately Invoked Function Expression, IIFE)는 자바스크립트에서 사용되는 특별한 종류의 함수입니다. 이 함수는 정의되자마자 즉시 실행되며, 주로 스코프(범위)를 생성하고 래퍼(wrapper) 역할을 수행하는 데 사용됩니다
{
(function() {
console.log("25.함수가 실행되었습니다.");
})();
(()=>{
console.log("26.함수가 실행되었습니다.")
})();
}
1. 첫 번째 IIFE는 익명 함수로 정의되고, 바로 실행됩니다.
2. 함수 내부의 코드 console.log("25.함수가 실행되었습니다.");가 즉시 실행되며 "25.함수가 실행되었습니다."를 콘솔에 출력합니다.
3. 함수 내부의 코드 console.log("26.함수가 실행되었습니다.")가 즉시 실행되며 "26.함수가 실행되었습니다."를 콘솔에 출력합니다.
결과 확인하기
26.함수가 실행되었습니다.
21. 함수 : 파라미터 함수
파라미터 함수(parameter function)란 함수 정의 시 함수 내부로 전달되는 값을 받아들이기 위해 사용되는 변수들입니다. 이러한 변수들을 파라미터(parameter) 또는 매개변수(argument)라고 부릅니다. 파라미터 함수는 함수가 호출될 때 전달되는 값들을 함수 내부로 가져와 작업에 활용할 수 있게 해줍니다.
{
function func(str= "27.함수가 실행되었습니다."){
console.log(str)
}
func();
const func1 = (str = "28.함수가 실행되었습니다.") => {
console.log(str);
}
func1();
}
1. 함수는 str이라는 매개변수를 받으며, 기본값으로 "27.함수가 실행되었습니다."를 가지고 있습니다.
2. 함수 내부에서 console.log(str);를 호출하여 str 값을 콘솔에 출력합니다.
3. 함수는 str이라는 매개변수를 받으며, 기본값으로 "28.함수가 실행되었습니다."를 가지고 있습니다.
4. console.log(str);를 호출하여 str 값을 콘솔에 출력합니다.
5. func1();을 호출하면, 마찬가지로 기본값이 적용되어 "28.함수가 실행되었습니다."가 출력됩니다.
결과 확인하기
"28.함수가 실행되었습니다."
22. 함수 : 재귀 함수
재귀 함수(Recursive function)는 자기 자신을 호출하는 함수로, 프로그램 또는 알고리즘이 동일한 작업을 반복적으로 수행해야 할 때 사용됩니다. 재귀 함수는 자신의 함수 내에서 자기 자신을 호출하는 특징을 갖습니다. 이러한 호출을 "재귀 호출"이라고 합니다.
재귀 함수는 종료 조건(또는 기본 사례)이 필요합니다. 종료 조건이 없으면 함수가 무한히 호출되며 스택 오버플로우(Stack Overflow)와 같은 문제가 발생할 수 있습니다. 종료 조건을 통해 재귀가 언제 멈추어야 하는지를 지정합니다.
{
function func(num){
for(let i=0; i< num; i++){
console.log("29.함수가 실행되었습니다.");
}
}
func(10);
function func1(num){
if(num < 1) return;
console.log("30.함수가 실행되었습니다.");
func1(num-1);
}
func1(10);
}
1. 이 함수는 num이라는 매개변수를 받습니다.
2. for 루프를 사용하여 num 만큼 반복하면서 코드 블록 내의 내용을 실행합니다.
3. 각 반복에서 "29.함수가 실행되었습니다."를 콘솔에 출력합니다. func(10);을 호출하면, "29.함수가 실행되었습니다."가 10번 출력됩니다.
4. if 문을 사용하여 num이 1보다 작으면 함수를 종료합니다. 이는 재귀 호출을 종료하는 조건입니다.
5. 그렇지 않으면 "30.함수가 실행되었습니다."를 콘솔에 출력한 후, func1 함수를 재귀적으로 호출합니다. 이때 num 값은 1만큼 감소합니다.
6. func1(10);을 호출하면, "30.함수가 실행되었습니다."가 10번 출력됩니다. 이것은 재귀 호출을 통해 구현되며, 각 호출에서 num이 1씩 감소하여 종료 조건에 도달할 때까지 반복됩니다.
결과 확인하기
30.함수가 실행되었습니다.
30.함수가 실행되었습니다.
30.함수가 실행되었습니다.
30.함수가 실행되었습니다.
30.함수가 실행되었습니다.
30.함수가 실행되었습니다.
30.함수가 실행되었습니다.
30.함수가 실행되었습니다.
30.함수가 실행되었습니다.
23. 함수 : 콜백 함수
콜백 함수(callback function)는 JavaScript에서 매우 중요한 개념 중 하나로, 비동기 프로그래밍 및 이벤트 처리에서 주로 사용됩니다. 콜백 함수는 다른 함수에 인자(argument)로 전달되고, 나중에 그 함수 내에서 호출되는 함수를 가리킵니다.
{ // 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. 이벤트 콜백 함수 (비활성화 상태): 이 코드에서는 이벤트 리스너를 사용하여 버튼 클릭 시 func 함수를 실행하려고 시도하고 있습니다. 그러나 주석 처리되어 있으므로 현재 비활성화되어 있습니다.
2. func2(func1);을 호출하여 func1 함수를 func2 함수의 인자로 전달하면, func1 함수가 func2 함수 내에서 호출되고 "32. 함수가 실행되었습니다."가 출력됩니다.
3. func4(func3);을 호출하여 func3 함수를 func4 함수의 인자로 전달하면, func3 함수가 여러 번 호출되고 각 호출마다 해당 숫자와 함께 "함수가 실행되었습니다."가 출력됩니다.
결과 확인하기
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();
});
});
});
}
}
1. 동기적 함수 호출: 이 두 함수는 순차적으로 호출되며, 각각 "39. 함수가 실행되었습니다."와 "40. 함수가 실행되었습니다."를 콘솔에 출력합니다.
2. 비동기적 방식으로 호출: func3 함수는 setTimeout을 사용하여 1초 뒤에 실행되도록 예약됩니다. 이 함수는 "41. 함수가 실행되었습니다."를 콘솔에 출력합니다.
func4 함수는 func3 함수 뒤에 바로 호출되며, "42. 함수가 실행되었습니다."를 콘솔에 출력합니다. 이때 func3 함수는 여전히 실행 대기 중입니다.
3. 비동기적 콜백 함수 호출: func5 함수는 setTimeout을 사용하여 1초 뒤에 실행되도록 예약됩니다. 이 함수는 "43. 함수가 실행되었습니다."를 콘솔에 출력하고, 콜백 함수를 호출합니다.
func6 함수는 콜백 함수로 전달되며, "44. 함수가 실행되었습니다."를 콘솔에 출력합니다. 이 콜백 함수는 func5 함수가 실행된 후에 호출됩니다.
4. 콜백 지옥: funcA, funcB, funcC, funcD 함수가 순차적으로 호출되는 예제입니다.
각 함수는 setTimeout을 사용하여 1초 간격으로 실행되도록 예약됩니다.
funcA 함수가 실행되고, 그 다음에 funcB 함수가 실행되며, 그 다음에 funcC 함수가 실행됩니다.
마지막으로 funcD 함수가 실행됩니다. 이렇게 순차적으로 실행되므로 "funcA가 실행되었습니다.", "funcB가 실행되었습니다.", "funcC가 실행되었습니다.", "funcD가 실행되었습니다."가 순서대로 출력됩니다.
결과 확인하기
40. 함수가 실행되었습니다.
39. 함수가 실행되었습니다.
39. 함수가 실행되었습니다.
25. 함수 : 비동기 함수 : 프로미스
async 키워드를 함수 앞에 붙여 비동기 함수를 선언할 수 있습니다. 이렇게 선언된 함수 내에서 await 키워드를 사용하여 Promise 객체를 처리합니다. await는 해당 Promise가 완료될 때까지 함수 실행을 일시 중지하고, Promise가 이행되면 결과 값을 반환하고 함수 실행을 계속합니다. 이렇게 함으로써 비동기 코드를 동기적인 코드처럼 작성할 수 있으며, 코드의 가독성과 유지 보수성이 향상됩니다.
async/await는 주로 네트워크 요청, 파일 입출력, 데이터베이스 액세스와 같은 비동기 작업을 처리할 때 유용하게 사용됩니다. 또한 try...catch 블록을 사용하여 오류 처리를 쉽게 할 수 있어 코드의 신뢰성을 높일 수 있습니다.
{
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);
});
}
1. data 변수에 true 값을 할당합니다.
2. Promise 생성자를 사용하여 새로운 프로미스 객체 func를 생성합니다.
3. 프로미스 내부에는 비동기 작업이 수행되며, 작업이 성공하면 resolve 함수를 호출하여 "45.함수가 실행되었습니다."를 반환하고, 실패하면 reject 함수를 호출하여 "45.함수가 실행되지 않았습니다."를 반환합니다.
4. result 인자를 받아 console.log(result)를 통해 성공 메시지를 출력합니다.
5. func 프로미스 객체의 catch 메서드를 사용하여 실패한 경우에 실행할 콜백 함수를 등록합니다.
6. 각 함수는 Promise를 반환하며, 작업이 완료되면 resolve를 호출하여 프로미스가 이행됩니다.
7. funcA()를 호출하고, 해당 작업이 완료되면 then 메서드를 사용하여 funcB, funcC, funcD를 차례로 실행합니다.
8. 이 체인에서 어떤 단계에서든 에러가 발생하면, .catch를 통해 등록한 에러 핸들러가 호출됩니다.
결과 확인하기
26. 함수 : 비동기 함수 : asyne/await
async: async 키워드는 함수 앞에 붙여 사용합니다. 이것은 해당 함수가 비동기 함수임을 나타냅니다. 비동기 함수 안에서 await를 사용할 수 있습니다.
{
// 01.
function func(){
console.log("46. 함수가 실행되었습니다.");
}
func();
// 02.
async function func2(){
document.write("47. 함수가 실행되었습니다.");
}
func2();
// 03.
async function func3(){
const result = await fetch("https://webstoryboy.github.io/webstoryboy/w_json/gineungsaShort.json")
const json = await result.json();
console.log(json);
}
func3();
// 04.
async function func4(){
try {
const result = await fetch("https://webstoryboy.github.io/webstoryboy/w_json/gineungsaShort.json")
const json = await result.json();
console.log(json);
} catch (error) {
console.log(error);
}
}
func4();
}
1. func 함수는 동기적으로 실행되며, "46. 함수가 실행되었습니다."를 콘솔에 출력합니다.
2. func2 함수는 async 키워드로 정의되어 있지만, 내부에서 어떠한 비동기 작업도 수행하지 않습니다.
3. func3 함수는 비동기 함수로 정의되었고, 외부 URL에서 JSON 데이터를 가져옵니다. fetch 함수를 사용하여 데이터를 요청하고, await 키워드를 사용하여 데이터를 기다립니다.
4. func4 함수는 func3와 비슷하지만, try...catch 블록을 사용하여 오류를 처리합니다
5. 데이터를 요청하고 JSON으로 변환하는 과정에서 오류가 발생하면 catch 블록에서 오류를 처리하고 오류 메시지를 콘솔에 출력합니다.