01. 함수 : 선언적 함수
자바스크립트(JavaScript)에서 함수는 프로그램 내에서 재사용 가능한 코드 블록을 나타내는 중요한 개념입니다. 함수를 사용하면 특정 작업을 수행하는 코드를 논리적으로 묶어서 호출하고 실행할 수 있습니다. 이를 통해 코드의 재사용성을 증가시키고 유지보수를 용이하게 만들 수 있습니다. 함수는 자체 스코프 내에서 변수를 선언하고, 매개변수를 통해 입력을 받아 작업을 수행하며, 결과를 반환할 수 있습니다.
{
function func(){
var x = 100;
var y = 200;
var z = "javascript";
console.log(x);
console.log(y);
console.log(z);
}
func();
}
{
function func(){
console.log("1. 함수가 실행되었습니다.");
}
func();
}
정의(Declaration) 및 호출(Call): 함수는 먼저 정의되어야 하며, 정의된 후에는 어디서든 호출할 수 있습니다. 함수를 정의할 때에는 함수 이름과 필요한 매개변수(parameter)를 지정하고, 함수가 수행할 코드 블록을 중괄호 {} 내에 작성합니다. 함수를 호출할 때는 함수 이름과 필요한 인수(arguments)를 전달합니다.
결과 확인하기
200
javascript
1. 함수가 실행되었습니다.
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();
}
{
const func = function(){
console.log("2. 함수가 실행되었습니다.");
}
func();
}
익명 함수는 다양한 형태로 사용될 수 있으며, 주로 함수의 매개변수로 전달되거나 콜백 함수로 사용될 때 흔히 볼 수 있습니다.
결과 확인하기
200
javascript
2. 함수가 실행되었습니다.
03. 함수 : 매개변수 함수
매개변수 함수(Parameter Function)는 다른 함수에 전달되어 사용되는 함수를 말합니다. 이러한 함수는 주로 다른 함수 내에서 호출되는데, 호출 시에 외부에서 값을 전달하여 해당 함수 내에서 사용됩니다. 매개변수 함수를 사용하여 함수의 동작을 조정하거나 다른 함수의 도움을 받아 원하는 작업을 수행할 수 있습니다.
{
function func(x, y, z){
console.log(x);
console.log(y);
console.log(z);
}
func(100, 200, "javascript");
}
{
function func(str){
console.log(str);
}
func("3. 함수가 실행되었습니다.");
}
매개변수 함수는 자바스크립트에서 중요한 개념으로, 함수의 유연성과 재사용성을 높여주는 역할을 합니다. 함수를 다른 함수의 인수로 전달하여 원하는 동작을 동적으로 결정하거나 조정할 수 있게 해줍니다.
결과 확인하기
200
javascript
3. 함수가 실행되었습니다.
04. 함수 : 리턴값 함수
리턴값(결과/종료)이 있는 함수는 return 제어문을 사용해서 함수의 연산 결과 중 원하는 값을 지정해서 호출위치로 복구시키는 기능을 말합니다.
{
function func(){
const x = 100;
const y = 200;
const z = "javascript";
return x;
}
console.log(func());
}
{
function func(){
return "4. 함수가 실행되었습니다.";
}
console.log(func());
}
1. 값 반환: 함수가 호출되면 내부에서 계산한 값을 반환하거나 처리 결과를 반환합니다. 반환된 값은 함수 호출자에게 전달됩니다.
2. 함수 결과 활용: 반환된 값을 변수에 할당하거나 다른 함수의 인수로 전달하여 활용할 수 있습니다.
3. 함수의 종료: return 문이 실행되면 함수의 실행이 종료되며, return 문 이후의 코드는 실행되지 않습니다.
결과 확인하기
4. 함수가 실행되었습니다.
05. 함수 : 매개변수 + 리턴값 함수
매개변수(parameter)를 받아 처리하고, 결과를 반환하는 함수를 작성할 때 자주 사용되는 패턴 중 하나는 매개변수 함수와 리턴값 함수를 함께 사용하는 것입니다.
{
function func(x){
return x;
}
console.log(func(100));
//익명함수 변경
const func1 = function(x){
return x;
}
console.log(func1(200));
}
{
function func(str){
return str;
}
console.log(func("5. 함수가 실행되었습니다."));
}
두 버전의 함수 모두 동일한 동작을 수행한다는 것을 보여주는 것입니다. 기명 함수와 익명 함수 모두 매개변수로 전달된 값을 그대로 반환하는 간단한 예제입니다.
결과 확인하기
200
5. 함수가 실행되었습니다.
06. 화살표 함수 : 선언적 함수
선언적 함수(또는 함수 선언)를 화살표 함수로 변경하는 것은 JavaScript에서 가능한 변환 중 하나입니다. 선언적 함수는 function 키워드를 사용하여 정의하고, 화살표 함수는 => 연산자를 사용하여 정의합니다. 화살표 함수는 주로 익명 함수로 사용되며, 간결한 문법을 가지고 있습니다.
{
func = () => {
console.log("6. 함수가 실행되었습니다.");
}
func();
}
화살표 함수는 매개변수 목록이 비어있을 때 ()를 사용하여 정의합니다.
함수 본문이 한 줄인 경우 중괄호 {}를 생략하고 표현식을 사용할 수 있습니다.
이 코드에서 func 변수에 할당된 화살표 함수는 매개변수가 없으며, 호출 시 "실행되었습니다." 문자열을 콘솔에 출력합니다.
결과 확인하기
07. 화살표 함수 : 익명 함수
화살표 함수는 간결한 문법을 가지고 있어 익명 함수를 더 간단하게 표현할 수 있으며, 주로 콜백 함수나 간단한 로직을 가진 함수를 정의할 때 사용됩니다.
{
const func = () => {
console.log("7. 함수가 실행되었습니다.");
}
func();
}
위 코드에서 func 함수는 익명 함수로 시작하고, 화살표 함수로 변경할 때 function 키워드와 함수 이름을 제거하고 매개변수 목록을 ()로 감쌌습니다. 그리고 화살표 연산자 =>를 사용하고 함수 본문을 한 줄로 표현하였습니다.
결과 확인하기
08. 화살표 함수 : 매개변수 함수
매개변수 함수(함수 내에서 매개변수로 전달되는 함수)를 화살표 함수로 변경하는 것은 JavaScript에서 매우 흔한 작업 중 하나입니다. 화살표 함수는 콜백 함수 등의 작업을 더 간결하게 표현할 수 있습니다.
{
func = (str) => {
console.log(str);
}
func("8. 함수가 실행되었습니다.");
}
1. 화살표 함수 정의 : 이 코드에서 func라는 이름의 변수에 화살표 함수를 정의하고 있습니다. 화살표 함수는 매개변수 str을 받아서, 받은 문자열을 콘솔에 출력하는
역할을 합니다.
2. 함수 호출 : func 변수에 할당된 화살표 함수를 호출합니다. 함수 호출 시에는 "실행되었습니다."라는 문자열이 str 매개변수에 전달되고, 화살표 함수 내부에서는
이 문자열을 콘솔에 출력합니다.
결과 확인하기
09. 화살표 함수 : 리턴값 함수
매개변수 함수(함수 내에서 매개변수로 전달되는 함수)를 화살표 함수로 변경하는 것은 JavaScript에서 매우 흔한 작업 중 하나입니다. 화살표 함수는 콜백 함수 등의 작업을 더 간결하게 표현할 수 있습니다.
{
func = (str) => {
console.log(str);
}
func("9. 함수가 실행되었습니다.");
}
리턴값을 반환하는 함수를 화살표 함수로 변경하는 것은 JavaScript에서 간단하게 할 수 있습니다. 화살표 함수는 특히 한 줄짜리 함수나 간단한 리턴 로직을 가진 함수를 간결하게 표현하는 데 유용합니다. 다음은 일반적인 함수를 화살표 함수로 변경하는 방법에 대한 설명입니다.
결과 확인하기
10. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 함수
익명함수와 매개변수, 리턴값을 모두 가지는 함수를 화살표 함수로 변경하는 것은 JavaScript에서 매우 흔한 작업 중 하나입니다. 화살표 함수는 특히 간단한 로직을 가진 함수를 간결하게 표현하는 데 유용합니다.
{
const func = (str) => {
return str;
}
console.log(func("10. 함수가 실행되었습니다."));
}
1. 화살표 함수 정의 : 이 코드에서 func라는 이름의 변수에 화살표 함수를 정의하고 있습니다. 화살표 함수는 하나의 매개변수 str을 받아서, 받은 문자열을 콘솔에
출력하는 역할을 합니다.
2. 함수 호출 : func 변수에 할당된 화살표 함수를 호출합니다. 함수 호출 시에는 "실행되었습니다."라는 문자열이 str 매개변수에 전달되고, 화살표 함수 내부에서는
이 문자열을 콘솔에 출력합니다.
결과 확인하기
11. 함수 유형 : 함수와 매개변수를 이용한 형태
함수에 매개변수(parameter)를 이용하는 것은 프로그래밍에서 매우 중요한 개념 중 하나입니다. 매개변수는 함수가 호출될 때 함수로 전달되는 값을 받아들이는 변수입니다. 이를 통해 함수는 입력된 값을 처리하고 그 결과를 반환할 수 있습니다.
{
function func(num, str){
console.log(num + ". " + str); //표현방식1
console.log(`${num}. ${str}`); //표현방식2
}
func(11, "함수가 실행되었습니다.");
}
1. 함수 (Function):
함수는 일련의 작업을 수행하는 코드 블록입니다.
함수는 입력을 받아들이고 그 입력에 따라 출력을 생성할 수 있습니다.
함수를 정의할 때 매개변수를 사용하여 함수가 받아들일 입력의 형태를 정의합니다.
2. 매개변수 (Parameter):
매개변수는 함수에 전달되는 값을 저장하는 변수입니다.
함수를 정의할 때, 함수의 이름과 함께 매개변수의 이름과 데이터 형식을 지정합니다.
매개변수는 함수의 몸체 내에서 사용되며, 함수의 로직을 수행하는 데 도움을 줍니다.
함수 호출 시에 전달되는 실제 값은 인수(argument)라고도 부릅니다.
결과 확인하기
12. 함수 유형 : 함수와 변수를 이용한 형태
함수와 변수는 프로그래밍에서 핵심적인 요소이며, 함께 사용하여 다양한 작업을 수행할 수 있습니다.
{
const num = 12;
const str = "함수가 실행되었습니다";
function func(num, str){
console.log(`${num}. ${str}`);
}
func(num, str);
}
1. 변수 (Variables):
변수는 데이터를 저장하고 참조하기 위한 식별자(identifier)입니다.
변수는 값을 할당하고, 할당된 값을 변경할 수 있습니다.
변수의 데이터 형식은 할당된 값에 따라 동적으로 결정될 수 있습니다.
2. 함수와 변수의 연관:
함수 내에서 변수를 사용하여 데이터를 처리하고 저장할 수 있습니다.
함수는 입력(매개변수)을 받아 처리하고, 출력을 생성하는 동작을 수행합니다.
함수 내에서 선언된 변수는 지역 변수(local variable)로 취급되며 함수 외부에서는 접근할 수 없습니다.
함수가 호출될 때마다 함수 내부의 변수는 초기화되고, 함수 내에서 정의된 변수는 함수 외부에서 영향을 주지 않습니다.
결과 확인하기
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. 배열 (Array):
배열은 여러 값을 순서대로 저장하는 자료 구조입니다.
각 값은 인덱스(index)를 통해 접근할 수 있습니다. 배열의 첫 번째 요소는 인덱스 0부터 시작합니다.
배열을 생성하려면 대괄호 [] 안에 원하는 값을 나열하거나, new Array() 생성자를 사용할 수 있습니다.
2. 함수와 배열의 연관:
함수를 사용하여 배열의 요소를 조작하고 처리할 수 있습니다.
함수는 배열을 매개변수로 받을 수 있으며, 배열을 반복하거나 배열의 내용을 수정하는 등의 작업을 수행할 수 있습니다.
결과 확인하기
14. 함수가 실행되었습니다.
14. 함수 유형 : 함수와 객체를 이용한 형태
함수와 객체를 함께 사용하는 것은 객체지향 프로그래밍(OOP)에서 매우 중요한 개념 중 하나입니다. 함수는 객체의 동작을 정의하고 객체의 상태를 조작하는 데 사용됩니다.
{
const info = {
num : 15,
str : "함수가 실행되었습니다."
}
function func(num, str){
console.log(`${num}. ${str}`);
}
func(info.num, info.str);
}
1. 객체 (Object):
객체는 관련 데이터와 동작(메서드)을 함께 묶는 자료 구조입니다.
객체의 데이터는 속성(attribute) 또는 멤버 변수(member variable)로 알려져 있고, 동작은 메서드(method)라고 불립니다.
객체는 중괄호 {}를 사용하여 정의하며, 객체의 속성과 메서드는 속성이름: 값 또는 메서드이름: 함수 형태로 정의됩니다.
2. 함수와 객체의 연관:
함수를 사용하여 객체의 동작을 정의하고, 객체 내부의 속성을 조작할 수 있습니다.
함수를 객체의 메서드로 할당하면, 해당 함수는 객체의 상태(속성)에 접근하고 조작할 수 있습니다.
메서드 내부에서 this 키워드를 사용하여 객체 내부의 속성에 접근할 수 있습니다.
결과 확인하기
15. 함수 유형 : 함수와 객체 및 배열을 이용한 형태
함수, 객체, 그리고 배열을 함께 사용하는 것은 프로그래밍에서 매우 강력한 조합입니다. 이를 통해 복잡한 데이터와 동작을 모델링하고 처리할 수 있으며, 객체지향 프로그래밍(OOP) 및 데이터 구조 작성에 유용합니다.
{
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. 함수 (Function):
함수는 코드를 묶어 재사용 가능한 모듈로 만드는 데 사용됩니다.
함수는 매개변수(parameter)를 받아서 특정 작업을 수행하고, 그 결과를 반환합니다.
2. 객체 (Object):
객체는 관련 데이터와 동작을 묶는 자료 구조입니다. 데이터는 속성(attribute)로, 동작은 메서드(method)로 나타납니다.
객체는 중괄호 {}를 사용하여 정의하며, 객체의 속성과 메서드는 속성이름: 값 또는 메서드이름: 함수 형태로 정의됩니다.
3. 배열 (Array):
배열은 여러 값을 순서대로 저장하는 자료 구조입니다. 배열의 각 값은 인덱스(index)를 통해 접근할 수 있습니다.
함수와 객체 및 배열의 형태:
함수, 객체, 배열을 함께 사용하는 것은 데이터를 구조화하고 다루는 데 유용하며, 실제 프로그래밍에서 다양한 상황에 적용됩니다.
결과 확인하기
17. 함수가 실행되었습니다.
16. 함수 유형 : 객체 안에 함수를 이용한 형태
객체 안에 함수를 포함하는 것은 객체 지향 프로그래밍(OOP)에서 매우 일반적이고 유용한 패턴입니다. 이러한 함수를 객체의 메서드(method)라고 부릅니다. 객체 내부의 메서드를 사용하면 해당 객체와 관련된 동작을 묶을 수 있으며, 객체의 속성과 함께 사용하여 객체의 상태를 조작하고 정보를 검색할 수 있습니다. 이를 통해 코드를 모듈화하고 유지 보수를 쉽게 할 수 있습니다.
{
const info = {
num: 18,
str: "함수가 실행되었습니다.",
result: () => {
console.log(`${info.num}. ${info.str}`);
}
}
info.result();
}
객체 내부의 함수 (메서드)
객체 내부에 함수를 정의하여 객체의 동작을 표현합니다.
이 함수들은 객체의 상태(속성)에 접근하고 조작할 수 있으며, 해당 객체와 관련된 작업을 수행합니다.
메서드를 정의할 때, 메서드 이름과 해당 함수를 정의합니다.
결과 확인하기
17. 함수 유형 : 객체 생성자 함수
객체 생성자 함수(Object 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. 객체 생성자 함수 정의:
객체 생성자 함수는 function 키워드를 사용하여 정의됩니다.
함수 내부에서는 객체의 초기 속성을 설정하고, 이를 this 키워드를 사용하여 참조합니다.
2. 객체 생성:
객체 생성자 함수를 호출할 때 new 연산자를 사용하여 새로운 객체를 생성합니다.
이때 생성된 객체는 해당 생성자 함수의 인스턴스(instance)가 됩니다.
생성자 함수 내부의 this는 새로 생성된 객체를 가리킵니다.
3. 속성 및 메서드:
객체 생성자 함수를 사용하여 생성된 객체는 일반 객체와 동일하게 속성과 메서드를 가질 수 있습니다.
객체의 속성과 메서드는 생성자 함수 내에서 정의됩니다.
결과 확인하기
20. 함수가 실행되었습니다.
18. 함수 유형 : 프로토타입 함수
프로토타입 함수(Prototype Function)는 JavaScript에서 객체 지향 프로그래밍(OOP)을 구현하는 중요한 개념 중 하나입니다. 프로토타입 함수를 사용하면 모든 객체의 공통 동작을 정의하고, 이를 객체 인스턴스에서 공유할 수 있습니다. 이를 통해 메모리를 효율적으로 사용하고 객체의 메서드를 공유할 수 있습니다.
{
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();
}
프로토타입 (Prototype):
모든 JavaScript 객체는 프로토타입이라고 불리는 객체와 연결됩니다.
프로토타입 객체는 해당 객체의 공유 메서드와 속성을 포함합니다.
JavaScript에서 객체는 프로토타입 체인(prototype chain)을 통해 연결된 프로토타입 객체의 속성과 메서드를 참조할 수 있습니다.
프로토타입 함수 (Prototype Function):
프로토타입 함수는 프로토타입 객체의 메서드로 정의되는 함수입니다.
이러한 함수는 객체 인스턴스가 아니라 해당 객체의 프로토타입 객체에 정의됩니다.
따라서 모든 객체 인스턴스는 동일한 프로토타입 함수를 공유하게 됩니다.
결과 확인하기
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. 객체 리터럴 (Object Literal):
객체 리터럴은 중괄호 {}를 사용하여 객체를 생성하는 방법입니다.
객체 리터럴을 사용하면 객체의 속성과 값을 직접 정의할 수 있습니다.
이러한 객체는 간단한 데이터 구조를 나타내며, 객체의 속성은 쉼표로 구분됩니다.
2. 함수 (Function):
함수는 JavaScript에서 코드 블록을 정의하고 실행 가능한 기능을 만드는 데 사용됩니다.
함수를 호출하면 함수 내부의 코드가 실행되며, 함수는 값을 반환할 수 있습니다.
결과 확인하기
24. 함수가 실행되었습니다.
20. 함수 : 즉시실행 함수
즉시 실행 함수(IIFE, Immediately Invoked Function Expression)는 JavaScript에서 사용되는 함수 패턴 중 하나로, 함수를 정의하자마자 즉시 실행하는 방식을 말합니다. 이 패턴은 함수 내부의 코드를 외부에서 접근할 수 없도록 만들고, 지역 스코프를 생성하여 변수 충돌을 방지하거나 모듈 패턴을 구현하는 데 자주 사용됩니다.
{
(function (){
console.log("25. 함수가 실행되었습니다.");
})();
(() => {
console.log("26. 함수가 실행되었습니다.");
})();
}
1. 스코프 분리: 즉시 실행 함수 내에서 선언된 변수와 함수는 해당 함수의 지역 스코프에 속합니다. 이는 함수 내부에서 정의된 변수와 함수가 전역 스코프를 오염시키지
않도록 합니다.
2. 모듈 패턴: 즉시 실행 함수를 사용하여 모듈을 구현할 수 있습니다. 모듈 패턴을 사용하면 비공개 및 공개 멤버를 정의하여 정보 은닉과 재사용성을 높일 수 있습니다.
3. 변수 충돌 방지: 다른 스크립트나 라이브러리와 함께 사용할 때 변수 충돌을 방지하기 위해 즉시 실행 함수를 사용할 수 있습니다. 이로 인해 전역 네임스페이스의 오염을
방지할 수 있습니다.
4. 코드 블록: 즉시 실행 함수 내에서 임시로 사용되는 코드 블록을 생성할 수 있습니다. 이를 통해 코드 구조를 더 간결하게 유지하거나 조건부로 코드를 실행할 수
있습니다.
결과 확인하기
26. 함수가 실행되었습니다.
21. 함수 : 파라미터 함수
파라미터 함수(Parameterized Function)란 함수를 호출할 때 함수 내부로 데이터를 전달하기 위한 메커니즘을 가리킵니다. 파라미터 함수는 함수의 정의 부분에서 매개변수(Parameter)를 선언하고, 함수를 호출할 때 실제 값(argument)을 전달하여 함수 내에서 사용할 수 있도록 합니다.
{
function func(str = "27. 함수가 실행되었습니다."){
console.log(str);
}
func();
const func1 = (str = "28. 함수가 실행되었습니다.") => {
console.log(str);
}
func1();
}
1. 매개변수 정의: 함수 정의 시, 함수의 매개변수를 정의합니다. 매개변수는 함수에 전달된 값의 이름이며, 함수 내부에서 사용할 수 있습니다.
2. 인자 전달: 함수를 호출할 때, 매개변수에 실제 값을 전달합니다. 이러한 값을 함수 호출 시 "인자(argument)"라고 합니다.
3. 다양한 입력 처리: 파라미터 함수를 사용하면 다양한 입력을 처리할 수 있습니다. 함수가 호출될 때마다 인자의 값이 달라질 수 있습니다.
4. 함수의 재사용: 동일한 함수 정의를 여러 곳에서 호출하여 재사용할 수 있습니다. 각 호출마다 다른 인자를 사용하여 다른 결과를 얻을 수 있습니다.
결과 확인하기
28. 함수가 실행되었습니다.
22. 함수 : 재귀 함수 : 자기 자신을 호출하는 함수
재귀 함수(Recursive Function)는 자신을 호출하는 함수를 의미합니다. 즉, 함수 내에서 자기 자신을 다시 호출하는 것을 말합니다. 이러한 재귀 호출은 일반적으로 함수가 동일한 작업을 반복하면서 작업을 해결하는 데 사용됩니다. 재귀 함수는 특히 반복적인 작업을 간결하게 표현할 때 유용합니다.
{
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. 재귀 함수는 반드시 하나 이상의 기본 사례(base case)를 가져야 합니다. 기본 사례는 재귀 호출을 중단하고 반환할 때 사용되며, 무한 루프를 방지합니다.
2. 재귀 함수는 자기 자신을 호출하는 부분이 필요합니다. 이 부분에서 작업을 분할하고, 작업의 크기를 줄여가며 기본 사례를 향해 진행합니다.
3. 재귀 함수는 함수 호출 스택을 사용하므로 재귀 호출이 많이 일어날 경우 스택 메모리를 소모할 수 있습니다. 따라서 깊은 재귀 호출을 피하려면 주의가 필요합니다.
결과 확인하기
30. 함수가 실행되었습니다.
23. 콜백 함수 : 다른 함수로 실행되는 함수
콜백 함수(callback function)는 다른 함수 내에서 호출되거나 사용되는 함수를 가리킵니다. 콜백 함수는 JavaScript에서 일반적으로 비동기 작업을 처리하거나 함수의 동작을 확장하기 위해 사용됩니다.
{
// 01. 이벤트 콜백 함수
function func(){
console.log("31. 함수가 실행되었습니다.");
}
btn.addEventListerner("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);
}
func1 함수:
func1 함수는 가장 간단한 형태의 콜백 함수입니다.
이 함수는 "32. 함수가 실행되었습니다."라는 메시지를 콘솔에 출력하는 역할을 합니다.
func2 함수 내에서 func1 함수가 콜백으로 사용되어 실행됩니다.
func2 함수:
func2 함수는 다른 함수를 인자로 받아 실행하는 함수입니다.
callback 매개변수로 다른 함수를 받고, 이 함수를 실행하는 역할을 합니다.
func2 함수 내에서 callback(); 코드를 통해 전달된 함수(여기서는 func1)가 실행됩니다.
func3 함수:
func3 함수는 숫자(num)를 매개변수로 받아 해당 숫자를 콘솔에 출력하는 역할을 합니다.
func4 함수:
func4 함수는 두 개의 매개변수를 받습니다. 첫 번째 매개변수(callback)는 콜백 함수를 받습니다.
func4 함수 내에서 for 반복문을 사용하여 숫자 범위를 생성하고, 각 숫자를 callback 함수에 인자로 전달하여 함수를 호출합니다.
이를 통해 func3 함수가 여러 번 호출되면서 다양한 숫자가 출력됩니다.
결과 확인하기
32. 함수가 실행되었습니다.
33. 함수가 실행되었습니다.
34. 함수가 실행되었습니다.
35. 함수가 실행되었습니다.
36. 함수가 실행되었습니다.
37. 함수가 실행되었습니다.
38. 함수가 실행되었습니다.
24. 함수 : 비동기 함수 : 콜백 함수
콜백 함수(callback function)는 다른 함수 내에서 호출되거나 사용되는 함수를 가리킵니다. 콜백 함수는 JavaScript에서 일반적으로 비동기 작업을 처리하거나 함수의 동작을 확장하기 위해 사용됩니다.
{
// 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();
});
});
});
}
}
func1 함수:
func1 함수는 가장 간단한 형태의 콜백 함수입니다.
이 함수는 "32. 함수가 실행되었습니다."라는 메시지를 콘솔에 출력하는 역할을 합니다.
func2 함수 내에서 func1 함수가 콜백으로 사용되어 실행됩니다.
func2 함수:
func2 함수는 다른 함수를 인자로 받아 실행하는 함수입니다.
callback 매개변수로 다른 함수를 받고, 이 함수를 실행하는 역할을 합니다.
func2 함수 내에서 callback(); 코드를 통해 전달된 함수(여기서는 func1)가 실행됩니다.
func3 함수:
func3 함수는 숫자(num)를 매개변수로 받아 해당 숫자를 콘솔에 출력하는 역할을 합니다.
func4 함수:
func4 함수는 두 개의 매개변수를 받습니다. 첫 번째 매개변수(callback)는 콜백 함수를 받습니다.
func4 함수 내에서 for 반복문을 사용하여 숫자 범위를 생성하고, 각 숫자를 callback 함수에 인자로 전달하여 함수를 호출합니다.
이를 통해 func3 함수가 여러 번 호출되면서 다양한 숫자가 출력됩니다.
결과 확인하기
32. 함수가 실행되었습니다.
33. 함수가 실행되었습니다.
34. 함수가 실행되었습니다.
35. 함수가 실행되었습니다.
36. 함수가 실행되었습니다.
37. 함수가 실행되었습니다.
38. 함수가 실행되었습니다.
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)
})
}
1. 비동기 작업의 성공 또는 실패 여부를 나타냅니다.
2. 성공한 경우, 작업의 결과를 저장합니다.
3. 실패한 경우, 오류 정보를 저장합니다.
4. 연속적인 비동기 작업을 순차적으로 실행하거나 병렬로 실행할 수 있습니다.
결과 확인하기
funcA가 실행되었습니다.
funcB가 실행되었습니다.
funcC가 실행되었습니다.
funcD가 실행되었습니다.
26. 함수 : 비동기 함수 : asyne/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/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 (error){
console.log(error);
}
}
func4();
}
1. async 함수: async 키워드를 함수 앞에 사용하여 해당 함수가 비동기 함수임을 선언합니다. 이렇게 선언된 함수는 항상 Promise를 반환합니다.
2. await 표현식: await는 비동기 함수 내에서만 사용할 수 있으며, Promise가 처리될 때까지 실행을 일시 중단하고 해당 Promise의 결과를
반환합니다.
await 표현식을 사용하면 비동기 코드를 동기적으로 작성하는 것과 같은 느낌을 가질 수 있습니다.
결과 확인하기
47. 함수가 실행되었습니다.
TOP