01. 함수 : 선언적 함수
자바스크립트에서 함수(function)는 재사용 가능한 코드 블록입니다. 함수는 특정 작업을 수행하거나 값을 계산하는 데 사용됩니다. 함수는 코드의 구조를 더 모듈화하고 관리 가능하게 만들어주며, 코드를 논리적 단위로 분리하여 작성하고 유지보수할 수 있도록 도와줍니다.
{
function func() {
var x = 100;
var y = 200;
var z = "javascript";
console.log(x);
console.log(y);
console.log(z);
}
func();
}
선언적 함수(Declarative Function)는 원하는 결과를 얻기 위한 명령적인 단계나 순서를 나열하는 대신, 무엇을 원하는지를 설명하는 방식으로 함수를 작성하는 프로그래밍 스타일을 말합니다. 선언적 함수의 장점으로는 가독성향상, 재사용성 용이, 추상화적 사용이 있습니다.
결과 확인하기
200
javescript
02. 함수 : 익명 함수
익명 함수(Anonymous Function)는 이름 없이 정의되는 함수로, 주로 간단한 로직을 단일한 곳에서 사용하거나 다른 함수의 인자로 전달하는 등의 상황에서 활용됩니다.
{
const func = function (){
let x = 100;
let y = 200;
let z = "javascript";
console.log(x);
console.log(y);
console.log(z);
}
func();
}
이름 없음: 익명 함수는 함수 이름이 없습니다. 따라서 변수에 할당하거나 다른 함수의 인자로 전달할 때 주로 사용됩니다. 간결성: 주로 간단한 로직을 표현하기 위해 사용되며, 코드를 더 간결하게 만들어줍니다. 일회성 사용: 한 번만 사용될 가능성이 높은 로직을 함수로 묶어 사용할 때 유용합니다.
결과 확인하기
200
javescript
03. 함수 : 매개변수 함수
매개변수 함수(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(100, 200, "javascript");
}
매개변수 함수는 일급 함수(First-Class Function)의 특징을 활용하여 다른 함수의 인자로 넘길 수 있으며, 필요한 동작을 외부에서 정의하고 전달할 수 있습니다. 매개변수 함수를 사용하면 함수 간의 추상화와 모듈화를 촉진하고, 코드 재사용성을 높일 수 있습니다. 매개변수 함수의 주요 특징으로는 1. 일급 함수(프로그래밍 언어에서 매개변수 함수는 일급 함수로 취급 즉, 함수를 다른 함수의 인자로 전달하거나 반환값으로 사용) 2. 콜백 함수(다른 함수의 호출 시점에 실행되는 콜백 함수) 3. 모듈화와 추상화(함수의 동작을 외부에서 정의하고 전달할 수 있어 코드의 모듈화와 추상화가 쉬워짐)가 있습니다.
결과 확인하기
200
javescript
100
200
javescript
04. 함수 : 리턴값 함수
리턴값 함수(Return Value Function)는 함수가 실행된 후 결과 값을 반환하는 함수를 말합니다.
{
function func (){
const x = 100;
const y = 200;
const z = "javascript";
return x + y;
}
console.log(func());
}
{
const func1 = function (){
let x = 100;
let y = 200;
let z = "javascript";
return x + y;
}
console.log(func1())
}
함수를 호출하고 반환값을 활용하려면 호출 시 반환된 값을 변수에 저장하거나 직접 사용할 수 있습니다.리턴값을 가지는 함수를 사용함으로써 함수의 결과를 다른 부분에서 활용하거나 연속적인 작업을 수행할 수 있습니다.
결과 확인하기
300
05. 매개변수 + 리턴값함수
리턴값 함수(Return Value Function)는 함수가 실행된 후 결과 값을 반환하는 함수를 말합니다.
{
{
function func(str){
return str;
}
console.log(func("실행되었습니다."));
}
}
함수를 호출하고 반환값을 활용하려면 호출 시 반환된 값을 변수에 저장하거나 직접 사용할 수 있습니다.리턴값을 가지는 함수를 사용함으로써 함수의 결과를 다른 부분에서 활용하거나 연속적인 작업을 수행할 수 있습니다.
결과 확인하기
06. 화살표 함수 : 선언적 함수
리턴값 함수(Return Value Function)는 함수가 실행된 후 결과 값을 반환하는 함수를 말합니다.
{
{
func = () => {
console.log("실행되었습니다.");
}
func();
}
}
함수를 호출하고 반환값을 활용하려면 호출 시 반환된 값을 변수에 저장하거나 직접 사용할 수 있습니다.리턴값을 가지는 함수를 사용함으로써 함수의 결과를 다른 부분에서 활용하거나 연속적인 작업을 수행할 수 있습니다.
결과 확인하기
07. 화살표 함수 : 익명 함수
리턴값 함수(Return Value Function)는 함수가 실행된 후 결과 값을 반환하는 함수를 말합니다.
{
{
const funct = () => {
console.log("실행되었습니다.")
}
}
func();
}
함수를 호출하고 반환값을 활용하려면 호출 시 반환된 값을 변수에 저장하거나 직접 사용할 수 있습니다.리턴값을 가지는 함수를 사용함으로써 함수의 결과를 다른 부분에서 활용하거나 연속적인 작업을 수행할 수 있습니다.
결과 확인하기
08. 화살표 함수 : 매개함수
리턴값 함수(Return Value Function)는 함수가 실행된 후 결과 값을 반환하는 함수를 말합니다.
{
func = (str) => {
console.log(str)
}
func("실행되었습니다.")
}
함수를 호출하고 반환값을 활용하려면 호출 시 반환된 값을 변수에 저장하거나 직접 사용할 수 있습니다.리턴값을 가지는 함수를 사용함으로써 함수의 결과를 다른 부분에서 활용하거나 연속적인 작업을 수행할 수 있습니다.
결과 확인하기
09. 화살표 함수 : 리턴값 함수
리턴값 함수(Return Value Function)는 함수가 실행된 후 결과 값을 반환하는 함수를 말합니다.
{
func = () => {
return "실행되었습니다.";
}
console.log(func());
}
함수를 호출하고 반환값을 활용하려면 호출 시 반환된 값을 변수에 저장하거나 직접 사용할 수 있습니다.리턴값을 가지는 함수를 사용함으로써 함수의 결과를 다른 부분에서 활용하거나 연속적인 작업을 수행할 수 있습니다.
결과 확인하기
10. 화살표 함수 : 매개변수 + 리턴값함수
리턴값 함수(Return Value Function)는 함수가 실행된 후 결과 값을 반환하는 함수를 말합니다.
{
//익명함수
const func = (str) => {
return str;
}
console.log("실행되었습니다.1");
// 괄호생략
const func2 = str => {
return str;
}
console.log("실행되었습니다.2");
// 리턴생략
const func3 = str => str;
console.log("실행되었습니다.3");
//선언적
func4 = str => str;
console.log("실행되었습니다.4");
}
함수를 호출하고 반환값을 활용하려면 호출 시 반환된 값을 변수에 저장하거나 직접 사용할 수 있습니다.리턴값을 가지는 함수를 사용함으로써 함수의 결과를 다른 부분에서 활용하거나 연속적인 작업을 수행할 수 있습니다.
결과 확인하기
300
11. 함수유형 : 함수와 매개변수를 이용한 형태
이 코드는 JavaScript로 작성된 함수를 정의하고 호출하는 간단한 예제입니다.
{
function func(num, str){
console.log(`${num}. ${str}`);
}
func(11,"함수가 실행되었습니다.");
}
코드는 숫자와 문자열을 인자로 받아 그들을 결합하여 출력하는 JavaScript 함수를 정의하고 호출하는 예제입니다. 함수 호출 시에 전달된 인자를 출력 결과에 포함시킵니다.
결과 확인하기
12. 함수유형 : 함수와 변수를 이용한 형태
함수는 두 가지 방법으로 문자열을 생성하여 출력하고, 출력 결과는 두 번 출력됩니다:
{
const num = 12;
const str = "함수가 실행되었습니다.";
function func(num, str){
console.log(num + ". " + str);
console.log(`${num}. ${str}`);
}
func(num, str);
}
이 코드는 숫자와 문자열을 매개변수로 받아 두 가지 방식으로 문자열을 출력하는 JavaScript 함수를 정의하고 호출하는 예제입니다.
결과 확인하기
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. 함수유형 : 함수와 객체를 이용한 형태
객체내에서 숫자와 문자열을 추출하여 함수를 호출하고, 함수 내에서는 해당 속성을 조합하여 문자열을 출력합니다.
{
const info = {
num : 15,
str : "함수가 실행되었습니다."
}
function func(num, str){
console.log(`${num}. ${str}`);
}
func(info.num, info.str)
}
이 코드는 객체 내의 속성을 활용하여 함수를 호출하고, 함수 내부에서는 해당 속성을 조합하여 문자열을 출력하는 예제입니다.
info라는 객체를 생성합니다. 이 객체는 두 개의 속성을 가지고 있습니다:
num 속성은 15라는 숫자 값을 가집니다.
str 속성은 "함수가 실행되었습니다."라는 문자열 값을 가집니다.
func라는 함수가 정의되어 있습니다. 이 함수는 두 개의 매개변수 num과 str을 받습니다.
func(info.num, info.str) 코드는 info 객체의 속성을 사용하여 func 함수를 호출합니다. 즉, info.num은 15이고 info.str은 "함수가
실행되었습니다."라는 문자열입니다. 이 값들이 함수에 전달되어 다음과 같이 실행됩니다:
${info.num}. ${info.str}은 "15. 함수가 실행되었습니다."로 평가됩니다.
따라서 console.log를 통해 "15. 함수가 실행되었습니다."가 출력됩니다.
이 코드는 객체 내의 속성을 활용하여 함수를 호출하고, 함수 내부에서는 해당 속성을 조합하여 문자열을 출력하는 예제입니다.
결과 확인하기
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);
}
이 코드는 배열 내의 객체들의 속성을 활용하여 함수를 호출하고, 함수 내부에서는 해당 속성들을 조합하여 문자열을 출력하는 예제입니다.
info라는 배열을 생성합니다. 이 배열은 두 개의 객체를 포함하고 있으며, 각각의 객체는 다음과 같은 속성을 가집니다.
num 속성은 16 또는 17 같은 숫자 값을 가집니다.
str 속성은 "함수가 실행되었습니다."라는 문자열 값을 가집니다.
func라는 함수가 정의되어 있습니다. 이 함수는 두 개의 매개변수 num과 str을 받습니다.
func(info[0].num, info[0].str); 코드는 info 배열의 첫 번째 객체의 속성을 사용하여 func 함수를 호출합니다. 즉, info[0].num은
16이고 info[0].str은 "함수가 실행되었습니다."라는 문자열입니다. 이 값들이 함수에 전달되어 다음과 같이 실행됩니다.
${info[0].num}. ${info[0].str}은 "16. 함수가 실행되었습니다."로 평가됩니다.
따라서 console.log를 통해 "16. 함수가 실행되었습니다."가 출력됩니다.
그 후, func(info[1].num, info[1].str); 코드는 info 배열의 두 번째 객체의 속성을 사용하여 func 함수를 다시 호출합니다. 이번에는
info[1].num이 17이고 info[1].str이 "함수가 실행되었습니다."라는 문자열입니다. 다음과 같이 실행됩니다.
${info[1].num}. ${info[1].str}은 "17. 함수가 실행되었습니다."로 평가됩니다.
따라서 console.log를 통해 "17. 함수가 실행되었습니다."가 출력됩니다.
결과 확인하기
16. 함수유형 : 객체 안에 함수를 이용한 형태 //리엑트에서 사용빈도 높음.
객체내에서 숫자와 문자열을 추출하여 함수를 호출하고, 함수 내에서는 해당 속성을 조합하여 문자열을 출력합니다.
{
const info = {
num: 18,
str: "함수가 실행되었습니다.",
result: () => {
console.log(`${info.num}. ${info.str}`);
}
}
info.result();
}
이 코드는 객체 내에 함수를 정의하고 이 함수를 호출하는 예제입니다. 함수 내부에서는 객체의 속성을 참조하여 문자열을 출력합니다.
info라는 객체를 생성합니다. 이 객체는 세 개의 속성을 가지고 있습니다:
num 속성은 18라는 숫자 값을 가집니다.
str 속성은 "함수가 실행되었습니다."라는 문자열 값을 가집니다.
result 속성은 화살표 함수 (arrow function)로 정의된 함수를 가집니다.
result 속성에 할당된 함수는 console.log를 사용하여 num과 str 속성을 결합하여 출력합니다.
info.result(); 코드는 info 객체의 result 함수를 호출합니다. 이 함수 내부에서 info.num과 info.str을 결합하여 다음과 같이
실행됩니다:
${info.num}. ${info.str}은 "18. 함수가 실행되었습니다."로 평가됩니다.
따라서 console.log를 통해 "18. 함수가 실행되었습니다."가 출력됩니다.
결과 확인하기
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();
info2.result();
}
Func라는 생성자 함수가 정의됩니다. 이 함수는 두 개의 매개변수 num과 str을 받아 객체의 속성으로 설정합니다.
this.num은 num으로 전달된 값을 가집니다.
this.str은 str으로 전달된 값을 가집니다.
this.result는 화살표 함수 (arrow function)로 정의된 함수를 가집니다.
생성자 함수를 사용하여 두 개의 인스턴스 info1과 info2를 생성합니다. 각각의 인스턴스는 Func 생성자 함수를 호출하여 만들어지며, 각각의 인스턴스에는 num과
str 속성이 설정됩니다.
info1.result(); 코드는 info1 인스턴스의 result 함수를 호출합니다. 이 함수 내부에서 this.num과 this.str을 사용하여 다음과 같이
실행됩니다:
${this.num}. ${this.str}은 "19. 함수가 실행되었습니다."로 평가됩니다.
따라서 console.log를 통해 "19. 함수가 실행되었습니다."가 출력됩니다.
그 후, info2.result(); 코드는 info2 인스턴스의 result 함수를 호출합니다. 이 함수 내부에서도 this.num과 this.str을 사용하여 다음과
같이 실행됩니다:
${this.num}. ${this.str}은 "20. 함수가 실행되었습니다."로 평가됩니다.
따라서 console.log를 통해 "20. 함수가 실행되었습니다."가 출력됩니다.
결과 확인하기
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();
info2.result();
}
Func라는 생성자 함수가 정의됩니다. 이 함수는 두 개의 매개변수 num과 str을 받아 객체의 속성으로 설정합니다.
this.num은 num으로 전달된 값을 가집니다.
this.str은 str으로 전달된 값을 가집니다.
Func.prototype.result에 함수를 할당합니다. 이 함수는 console.log를 사용하여 this.num과 this.str을 결합하여 출력합니다.
생성자 함수를 사용하여 두 개의 인스턴스 info1과 info2를 생성합니다. 각각의 인스턴스는 Func 생성자 함수를 호출하여 만들어지며, 각각의 인스턴스에는 num과
str 속성이 설정됩니다.
info1.result(); 코드는 info1 인스턴스의 result 함수를 호출합니다. 이 함수 내부에서 this.num과 this.str을 사용하여 다음과 같이
실행됩니다:
${this.num}. ${this.str}은 "21. 함수가 실행되었습니다."로 평가됩니다.
따라서 console.log를 통해 "21. 함수가 실행되었습니다."가 출력됩니다.
그 후, info2.result(); 코드는 info2 인스턴스의 result 함수를 호출합니다. 이 함수 내부에서도 this.num과 this.str을 사용하여 다음과
같이 실행됩니다:
${this.num}. ${this.str}은 "22. 함수가 실행되었습니다."로 평가됩니다.
따라서 console.log를 통해 "22. 함수가 실행되었습니다."가 출력됩니다.
결과 확인하기
19. 함수유형 : 객체 리터럴 함수
이 코드는 생성자 함수와 프로토타입을 사용하여 객체를 생성하고, 각 객체의 메서드를 호출하여 속성을 출력하는 예제입니다..
{
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();
}
Func라는 생성자 함수가 정의됩니다. 이 함수는 두 개의 매개변수 num과 str을 받아 객체의 속성으로 설정합니다.
this.num은 num으로 전달된 값을 가집니다.
this.str은 str으로 전달된 값을 가집니다.
Func.prototype.result에 함수를 할당합니다. 이 함수는 console.log를 사용하여 this.num과 this.str을 결합하여 출력합니다.
생성자 함수를 사용하여 두 개의 인스턴스 info1과 info2를 생성합니다. 각각의 인스턴스는 Func 생성자 함수를 호출하여 만들어지며, 각각의 인스턴스에는 num과
str 속성이 설정됩니다.
info1.result(); 코드는 info1 인스턴스의 result 함수를 호출합니다. 이 함수 내부에서 this.num과 this.str을 사용하여 다음과 같이
실행됩니다.
${this.num}. ${this.str}은 "21. 함수가 실행되었습니다."로 평가됩니다.
따라서 console.log를 통해 "21. 함수가 실행되었습니다."가 출력됩니다.
그 후, info2.result(); 코드는 info2 인스턴스의 result 함수를 호출합니다. 이 함수 내부에서도 this.num과 this.str을 사용하여 다음과
같이 실행됩니다
${this.num}. ${this.str}은 "22. 함수가 실행되었습니다."로 평가됩니다.
따라서 console.log를 통해 "22. 함수가 실행되었습니다."가 출력됩니다.
결과 확인하기
20 함수유형 : 객체 리터럴 함수
이 코드는 생성자 함수와 프로토타입을 사용하여 객체를 생성하고, 각 객체의 메서드를 호출하여 속성을 출력하는 예제입니다.
{
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();
}
Func라는 생성자 함수가 정의됩니다. 이 함수는 두 개의 매개변수 num과 str을 받아 객체의 속성으로 설정합니다.
this.num은 num으로 전달된 값을 가집니다.
this.str은 str으로 전달된 값을 가집니다.
Func.prototype.result에 함수를 할당합니다. 이 함수는 console.log를 사용하여 this.num과 this.str을 결합하여 출력합니다.
생성자 함수를 사용하여 두 개의 인스턴스 info1과 info2를 생성합니다. 각각의 인스턴스는 Func 생성자 함수를 호출하여 만들어지며, 각각의 인스턴스에는 num과
str 속성이 설정됩니다.
info1.result(); 코드는 info1 인스턴스의 result 함수를 호출합니다. 이 함수 내부에서 this.num과 this.str을 사용하여 다음과 같이
실행됩니다.
${this.num}. ${this.str}은 "21. 함수가 실행되었습니다."로 평가됩니다.
따라서 console.log를 통해 "21. 함수가 실행되었습니다."가 출력됩니다.
그 후, info2.result(); 코드는 info2 인스턴스의 result 함수를 호출합니다. 이 함수 내부에서도 this.num과 this.str을 사용하여 다음과
같이 실행됩니다
${this.num}. ${this.str}은 "22. 함수가 실행되었습니다."로 평가됩니다.
따라서 console.log를 통해 "22. 함수가 실행되었습니다."가 출력됩니다.
결과 확인하기
21. 함수 : 즉시 실행함수
이 함수는 선언과 동시에 즉시 실행되는 특성을 가지고 있습니다. IIFE는 주로 변수 스코프 관리와 모듈 패턴 등에서 사용됩니다.
{
(function (){
console.log("25. 함수가 실행되었습니다.");
})();
(() => {
console.log("26. 함수가 실행되었습니다.");
})();
}
1번 예제 : 이 IIFE는 익명 함수를 선언하고 즉시 실행합니다. 함수를 정의하고 그 자리에서 실행하기 때문에 "25. 함수가 실행되었습니다."라는 메시지가 출력됩니다. 2번 예제 : 이 IIFE는 화살표 함수를 사용하여 정의하고 실행합니다. 화살표 함수로도 IIFE를 생성할 수 있으며, 결과적으로 "26. 함수가 실행되었습니다."라는 메시지가 출력됩니다.
결과 확인하기
22.함수 : 파라미터 함수
함수 내에서 사용할 매개변수(파라미터)를 정의하는 함수입니다.이러한 함수를 사용하여 다른 함수 내에서 동작을 정의할 때 필요한 매개변수를 선언하고 설정할 수 있습니다.
{
function func(str = "27. 함수가 실행되었습니다."){
console.log(str);
}
func()
const func1 = (str = "28. 함수가 실행되었습니다." ) => {
console.log(str);
}
func1();
}
func 함수는 기본값이 "27. 함수가 실행되었습니다."로 설정된 str 매개변수를 가지며, 이 함수를 호출할 때 매개변수를 전달하지 않으면 기본값이 출력됩니다.
func1 함수는 화살표 함수로 정의되고, 마찬가지로 기본값이 "28. 함수가 실행되었습니다."로 설정된 str 매개변수를 가집니다. 이 함수도 호출할 때 매개변수를 전달하지 않으면 기본값이 출력됩니다.
위의 코드는 기본 매개변수를 사용하여 함수 호출 시 필요한 값을 제공하지 않을 때 기본값을 설정하는 방법을 보여줍니다.
결과 확인하기
23. 함수 : 재귀함수 : 자기 자신을 호출하는 함수.
함수 내에서 자기 자신을 호출하는 함수입니다. 즉, 함수가 자기 자신을 호출하여 문제를 해결하는 기법입니다. 재귀 함수는 주로 반복적인 작업을 처리하거나, 하위 문제를 해결하는 데 사용됩니다.
{
function func(num){
for(let i=1; i<=num; i++){
console.log("29.함수가 실행되었습니다.");
}
}
func(10)
// 재귀함수
function func1(num){
if(num < 0) return
console.log("30.함수가 실행되었습니다.");
func1(num - 1);
}
func1(10);
}
함수 내에서 특정 조건을 만족하면 자기 자신을 호출하지 않고 종료합니다. 이것을 "재귀 종료 조건"이라고 합니다.
조건을 만족하지 않으면 함수는 자기 자신을 호출하여 더 작은 하위 문제를 처리하고, 이 하위 문제도 같은 방식으로 해결됩니다. 이것을 "재귀 호출"이라고 합니다.
주어진 코드에서는 두 가지 형태의 함수를 정의하고 호출합니다.
하나는 반복문을 사용하여 동일한 작업을 여러 번 반복하는 func 함수이고,
다른 하나는 재귀 호출을 사용하여 동일한 작업을 수행하는 func1 함수입니다.
: func 함수는 매개변수 num에 주어진 횟수만큼 "29. 함수가 실행되었습니다."를 출력하는 반복문을 사용하여 동작합니다. func(10)을 호출하면 이 문구가 10번 출력됩니다.
: func1 함수는 재귀 호출을 사용하여 작동합니다. 함수가 호출될 때마다 "30. 함수가 실행되었습니다."를 출력하고, num이 0보다 작아질 때까지 계속 호출됩니다. 이렇게 호출 스택이 쌓이면서 재귀 호출을 통해 동일한 작업을 수행합니다. func1(10)을 호출하면 이 문구가 11번 출력됩니다.
** 주의할 점은 재귀 함수를 사용할 때는 종료 조건을 정확하게 설정해야 합니다. func1 함수에서는 if (num < 0)을 사용하여 종료 조건을 설정하고 있습니다. 종료 조건이 없으면 무한 재귀 호출로 인해 스택 오버플로우 오류가 발생할 수 있습니다.
결과 확인하기
24. 함수 : 비동기 함수 : 콜백함수
비동기 함수: 일반적인 동기 함수와 달리, 작업이 순차적으로 진행되지 않고 병렬적으로 처리됩니다.
주로 네트워크 요청, 파일 읽기, 타이머 등과 같이 시간이 오래 걸리는 작업에 사용됩니다.
비동기 함수는 작업이 완료되면 특정한 콜백 함수를 호출하거나 Promise 객체를 반환합니다.
이 코드에서는 "시작"과 "계속 진행"이 먼저 출력되고, 1초 후에 "비동기 작업 완료"가 출력됩니다.
콜백 함수 (Callback Function): 콜백 함수는 다른 함수의 인자로 전달되어 나중에 실행되는 함수입니다.
주로 비동기 함수에서 작업이 완료되면 호출되는 콜백 함수로 사용됩니다.
이를 통해 비동기 작업이 완료되면 특정한 동작을 수행할 수 있습니다.
예를 들어, setTimeout의 콜백 함수는 비동기 작업이 완료되면 호출됩니다.
콜백 함수를 사용하면 비동기 작업의 완료를 기다리지 않고 다른 작업을 계속 진행할 수 있으므로 웹 애플리케이션에서는 유용하게 활용됩니다.
{
//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();
});
});
});
funcB();
funcC();
funcD();
}
}
이 코드 예제에서는 동기적 함수 호출, 비동기적 함수 호출, 비동기적 콜백 함수 호출, 그리고 콜백 지옥(callback hell)의 예를 보여줍니다.
동기적인 함수 호출: func1과 func2는 순차적으로 호출되며, 한 함수의 실행이 끝나야 다음 함수가 호출됩니다.
비동기적인 함수 호출: func3과 func4는 비동기적으로 호출됩니다. func3는 1초 후에 실행됩니다. func4는 func3가 실행되는 동안 대기하지 않고 즉시 실행됩니다.
비동기적인 콜백 함수 호출: func5는 1초 후에 실행되며, 실행이 완료되면 콜백 함수를 호출합니다. func6는 func5의 콜백 함수로 전달되어 실행됩니다.
이러한 방식으로 비동기적 함수와 콜백 함수를 조합하여 비동기적인 작업을 순서대로 수행할 수 있습니다.
콜백 지옥:
funcA, funcB, funcC, funcD 함수는 비동기적으로 실행되며, 각각 1초 후에 실행됩니다.
funcA에서 funcB, funcC, funcD를 연달아 호출하는 예제는 콜백 함수를 중첩하여 사용한 콜백 지옥(callback hell)입니다.
이러한 구조는 가독성이 나빠져 유지보수가 어려울 수 있습니다.
동기적 함수 호출은 한 번에 하나의 작업만을 처리하며, 비동기적 함수 호출 및 콜백 함수를 사용하면 여러 작업을 병렬로 처리할 수 있습니다.
그러나 콜백 지옥과 같은 문제를 방지하기 위해 Promise나 async/await와 같은 비동기 처리 방법을 사용하는 것이 좋습니다.
결과 확인하기
40. 함수가 실행되었습니다.
41. 함수가 실행되었습니다.
42. 함수가 실행되었습니다.
43. 함수가 실행되었습니다.
44. 함수가 실행되었습니다.
"funcA.함수가 실행되었습니다."
"funcB.함수가 실행되었습니다."
"funcC.함수가 실행되었습니다."
"funcD.함수가 실행되었습니다."
25. 함수 : 비동기 함수 : 함수 프로미스 -> 잘쓰이지 않음.
프로미스는 비동기 작업을 좀 더 구조적으로 관리할 수 있도록 도와주는 객체입니다.
성공 또는 실패와 같은 비동기 작업의 결과를 다룰 때 사용됩니다.
프로미스는 세 가지 상태를 가질 수 있습니다: 대기(Pending), 이행(Fulfilled), 거부(Rejected).
.then() 및 .catch()와 같은 메서드를 사용하여 비동기 작업의 성공 또는 실패에 대한 처리를 할 수 있습니다.
예를 들어, 네트워크 요청의 결과를 처리하거나 비동기적으로 데이터를 불러올 때 주로 사용됩니다.
{
let data = true; // 변수 이름 오타 수정 (true로 변경)
const func = new Promise((resolve, reject) => {
if(data){
resolve("45. 함수가 실행되었습니다.");
} else {
reject("46. 함수가 실행되었습니다.");
}
});
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)
})
}
비동기 함수는 비동기 작업을 수행하는 함수이고, 프로미스는 비동기 작업의 결과를 처리하기 위한 패턴 중 하나입니다.
프로미스를 사용하면 비동기 코드를 더 읽기 쉽게 만들고 예외 처리를 효과적으로 수행할 수 있습니다.
먼저, Promise 객체를 생성합니다.
Promise 생성자 함수 내부에서는 비동기 작업을 정의하고, 작업이 성공하면 resolve 함수를 호출하고, 작업이 실패하면 reject 함수를 호출합니다.
func 프로미스 객체를 사용하여 .then() 및 .catch() 메서드를 연이어 호출합니다.
.then()은 성공한 경우 실행되며, .catch()는 실패한 경우 실행됩니다.
또한, 프로미스를 사용하여 콜백 지옥을 피하고 비동기 코드를 더 구조화된 방식으로 관리할 수 있습니다.
funcA, funcB, funcC, funcD라는 비동기 함수를 정의합니다. 각 함수는 setTimeout을 사용하여 1초 후에 로그를 출력하는 작업을 수행합니다.
이러한 함수들을 then 메서드로 연결하여 비동기 작업을 순차적으로 실행할 수 있습니다. 이렇게 하면 콜백 지옥을 피하고 코드를 읽기 쉽게 만들 수 있습니다.
결과 확인하기
46. 함수가 실행되었습니다.
funcA가 실행되었습니다.
funcB가 실행되었습니다.
funcC가 실행되었습니다.
funcD가 실행되었습니다.
26. 함수 : 비동기 함수 : async/await -> 제일많이 사용됨.
async/await는 JavaScript에서 비동기 코드를 더 간결하고 읽기 쉽게 작성할 수 있도록 도와주는 기능입니다.
{
//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);
}
}
func3();
}
func: 일반적인 동기 함수입니다. 함수가 호출되면 즉시 실행되고, 다음 코드로 넘어갑니다.
func2: async 키워드로 선언된 함수로, 비동기 함수입니다. 함수 내부의 코드가 비동기 작업을 수행하는 동안에도 다음 코드가 실행됩니다.
func3: async 함수로, 외부 웹 서버에서 데이터를 비동기적으로 가져오는 예제입니다.
fetch 함수를 사용하여 데이터를 가져오고, await를 사용하여 데이터가 로드될 때까지 대기합니다. 그런 다음 데이터를 출력합니다.
func4: try-catch 블록을 사용하여 에러 처리가 추가된 func3의 버전입니다. 데이터를 가져오는 동안 에러가 발생하면 catch 블록에서 에러를 처리합니다.
주의: 코드에서 func3() 대신에 func4()를 호출해야 합니다.
코드 예제에서 async/await를 사용하여 비동기 작업을 간단하게 처리할 수 있으며, 에러 처리도 쉽게 추가할 수 있습니다.
결과 확인하기
47. 함수가 실행되었습니다.
객체 문제를 불러옴.
객체 문제를 불러옴.