01. 함수 : 선언적 함수
자바스크립트(JavaScript)에서 함수는 프로그램 내에서 재사용 가능한 코드 블록을 나타내는 중요한 개념입니다. 함수를 사용하면 특정 작업을 수행하는 코드를 논리적으로 묶어서 호출하고 실행할 수 있습니다. 이를 통해 코드의 재사용성을 증가시키고 유지보수를 용이하게 만들 수 있습니다. 함수는 자체 스코프 내에서 변수를 선언하고, 매개변수를 통해 입력을 받아 작업을 수행하며, 결과를 반환할 수 있습니다.
{
function func(){
var x = 100;
var y = 200;
var z = "javascript";
console.log(x);
console.log(y);
console.log(z);
};
func();
}
선언적 함수(Declarative Function)란 프로그래밍에서 어떤 작업을 수행하는 데 중점을 두는 대신에 "무엇(What)"을 수행하는지를 설명하는 스타일의 함수입니다.
결과 확인하기
200
javascript
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
javascript
03. 함수 : 매개변수 함수
매개변수 함수(Parameter Function)란 함수를 정의할 때 함수 내부에서 사용할 매개변수(파라미터)를 지정하는 부분을 말합니다. 이러한 매개변수는 함수 내부에서 사용되는 값들을 외부에서 전달할 수 있는 매커니즘을 제공합니다. 함수를 호출할 때 전달한 값들은 매개변수를 통해 함수 내부로 전달되어 사용됩니다.
{
function func(x, y, z){
console.log(x);
console.log(y);
console.log(z);
};
func(100, 200, "javascript");
}
함수를 정의할 때 어떤 매개변수를 사용하고, 그 매개변수에 어떤 값을 전달할지 결정하는 것은 프로그래밍의 중요한 부분 중 하나입니다.
결과 확인하기
200
javascript
04. 함수 : 리턴값 함수
리턴값 함수(Return Value Function)란 함수 내부에서 연산, 계산, 처리 등을 수행한 뒤, 그 결과 값을 함수 외부로 반환하는 함수를 말합니다. 함수가 어떤 값을 반환하게 되면 해당 값을 호출한 곳에서 활용할 수 있습니다. 이렇게 반환된 값은 함수를 호출한 부분에서 변수에 저장하거나 다른 연산에 사용할 수 있습니다.
{
function func(){
const x = 100;
const y = 200;
const z = "javascript";
return x + y;
};
console.log(func());
}
함수의 리턴값을 적절하게 활용하여 코드의 가독성을 높이고 유지보수를 용이하게 할 수 있습니다.
리턴값(결과/종료)이 있는 함수는 return 제어문을 사용해서 함수의 연산 결과 중 원하는 값을 지정해서 호출위치로 복구시키는 기능을 말합니다.
결과 확인하기
05. 함수 : 매개변수 + 리턴값 함수
자바스크립트 함수에서 매개변수 함수와 리턴값 함수를 섞을 수 있습니다.
{
function func(x){
return x;
}
console.log(func(100));
const func1 = function(x){
return x;
}
console.log(func1(100));
}
익명 함수로 바꿔 사용 할 수도있습니다.
결과 확인하기
console.log(func1(100))의 결과 100
06. 화살표 함수 : 선언적 함수
화살표 함수(arrow function)는 ES6(ES2015)에서 도입된 새로운 함수 표현 방식입니다.
{
func = () => {
const x = 600;
console.log(x);
}
func();
}
선언적 함수를 화살표 함수로 변경하였습니다.
결과 확인하기
07. 화살표 함수 : 익명 함수
화살표 함수는 함수를 간결하게 표현하며, 주로 익명 함수를 대체하는 용도로 사용됩니다.
{
const func = () => {
const x = 700;
console.log(x);
}
func();
}
익명 함수를 화살표 함수로 변경하였습니다.
결과 확인하기
08. 화살표 함수 : 매개변수 함수
화살표 함수는 함수를 간결하게 표현하며, 주로 익명 함수를 대체하는 용도로 사용됩니다.
{
func = (x) => {
console.log(x);
}
func(800);
}
매개변수 함수를 화살표 함수로 변경하였습니다.
결과 확인하기
09. 화살표 함수 : 리턴값 함수
일반적인 함수 선언문보다 짧은 문법으로 함수를 작성할 수 있습니다.
{
func = () => {
const x = 900;
return x;
}
console.log(func());
}
리턴값 함수를 화살표 함수로 변경한것입니다.
결과 확인하기
10. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 함수
화살표 함수(arrow function)는 ES6(ES2015)에서 도입된 새로운 함수 표현 방식입니다.
{
const func = (x) => {
return x;
}
document.write(func("함수가 실행되었습니다.10
"));
// 매개변수 한개일때 괄호 생략 가능
const func2 = x => {
return x;
}
document.write(func2("함수가 실행되었습니다.10-2
"));
// 리턴 생략
const func3 = x => x;
document.write(func3("함수가 실행되었습니다.10-3
"));
// 선언적 함수
func4 = x => x;
document.write(func4("함수가 실행되었습니다.10-4
"));
}
익명 함수 + 매개변수 + 리턴값 함수를 화살표 함수로 변경했습니다.
결과 확인하기
함수가 실행되었습니다.10-2
함수가 실행되었습니다.10-3
함수가 실행되었습니다.10-4
11. 함수 유형 : 함수와 매개변수를 이용한 형태
함수의 유형중 함수와 매개변수를 이용한 예제입니다.
{
function func(num, str){
console.log(`${num}. ${str}`)
}
func(11, "함수가 실행되었습니다.");
}
매개변수 값에 num과 str을 지정하고 매개변수에 11과 "함수가 실행되었습니다."를 대입했습니다.
결과 확인하기
12. 함수 유형 : 함수와 변수를 이용한 형태
함수 유형 중 함수와 변수를 이용한 예제입니다.
{
const num = 12;
const str = "함수가 실행되었습니다.";
function func(num, str){
console.log(`${num}. ${str}`)
}
func(num, str);
}
변수 num에 12를 선언하고 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]);
}
변수 num과 str에 각각 배열을 선언하고, 매개변수에 배열안의 값을 차례대로 지정합니다.
결과 확인하기
14. 함수가 실행되었습니다.
14. 함수 유형 : 함수와 객체 이용한 형태
함수 유형 중 함수와 객체를 이용한 예제입니다.
{
const info = {
num : 15,
str : "함수가 실행되었습니다."
}
function func(num, str){
console.log(`${num}. ${str}`);
}
func(info.num, info.str);
}
변수 info에 객체를 선언하고 객채 안의 값을 함수 func의 매개변수에 지정합니다.
결과 확인하기
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에 배열(객체가 들어있는)을 선언한 뒤, 변수 안의 값들을 함수 func의 매개변수에 지정합니다.
결과 확인하기
17. 함수가 실행되었습니다.
16. 함수 유형 : 함수와 객체 안에 함수를 이용한 형태
함수 유형 중 함수와 객체 안에 함수를 이용한 예제입니다.
{
const info = {
num: 18.,
str: "함수가 실행되었습니다.",
result: () => {
console.log(`${info.num}. ${info.str}`);
}
}
info.result();
}
변수 info에 객체를 선언하고 그 안에 함수 result를 생성한 뒤 실행시킵니다.
결과 확인하기
17. 함수 유형 : 객체 생성자 함수
객체 생성자 함수에 대한 예제입니다.
{
function Func(num, str){
this.num = num;
this.str = str;
this.result = () => {
console.log(`${this.num}. ${this.str}`);
}
}
// 인스턴스 생성
const info = new Func(19, "함수가 실행되었습니다.");
const info2 = new Func(20, "함수가 실행되었습니다.");
// 호출
info.result();
info2.result();
}
JavaScript 객체 생성자 함수는 JavaScript에서 사용되는 객체를 만들기 위한 템플릿 또는 클래스와 유사한 역할을 하는 함수입니다.
객체 생성자 함수를 사용할 때는 인스턴스를 먼저 생성한뒤, 호출합니다.
객체 생성자 함수 내에서 this는 새로운 객체를 가리키는 특수한 키워드입니다. 객체 생성자 함수를 사용하여 객체를 생성할 때,
this를 사용하여 새로운 객체의 속성을 설정하거나 메서드를 추가할 수 있습니다.
결과 확인하기
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();
}
프로토타입 함수, 또는 프로토타입 메서드는 모든 객체가 공유하는 메서드입니다.
객체의 프로토타입(prototype)은 객체 지향 프로그래밍에서 클래스와 유사한 역할을 하며, 모든 객체가 이를 통해 공통의 메서드와 속성을 상속받을
수 있습니다.
Func함수 바깥에 함수를 선언한 경우에는 화살표 함수를 사용할 수 없습니다.
결과 확인하기
22. 함수가 실행되었습니다.
19. 함수 유형 : 객체 리터럴 함수
객체 리터럴 함수에 관한 예제입니다.
{
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();
}
객체 리터럴 함수란, 객체를 생성하고 초기화하기 위해 중괄호 {}를 사용하여 객체를 정의하고 반환하는 함수를 의미합니다.
결과 확인하기
24. 함수가 실행되었습니다.
20. 함수 : 즉시실행 함수
즉시 실행 함수에 관한 예제입니다.
{
(function(){
console.log("25. 함수가 실행되었습니다.");
})();
(() => {
console.log("26. 함수가 실행되었습니다.");
})();
}
두 함수는 코드 실행 시점에 즉시 호출되므로, 페이지 로드 후에 바로 실행됩니다. 이런 방식은 변수 범위(scope)를 제한하고 코드를 모듈화할 때 유용하며, 전역 스코프를 오염시키지 않고 독립적으로 사용할 수 있습니다.
결과 확인하기
26. 함수가 실행되었습니다.
21. 함수 : 파라미터 함수
파라미터 함수에 관한 예제입니다.
{
function func(str = "27. 함수가 실행되었습니다."){
console.log(str);
}
func();
const func1 = (str = "28. 함수가 실행되었습니다.") => {
console.log(str);
}
func1();
}
파라미터 함수(parameterized function)란 함수가 호출될 때 값을 전달받을 수 있는 함수입니다.
결과 확인하기
28. 함수가 실행되었습니다.
22. 함수 : 재귀 함수
재귀 함수에 관한 예제입니다.
{
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);
}
두 함수는 서로 다른 반복 방식을 사용하고 있습니다. func 함수는 단순한 반복문을 사용하여 메시지를 여러 번 출력하고, func1 함수는 재귀 함수를 사용하여 숫자가 감소하면서 메시지를 출력합니다.
결과 확인하기
(10)29. 함수가 실행되었습니다.
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);
}
첫번째 함수: 이벤트가 발생하면 func 함수가 실행되며, "31. 함수가 실행되었습니다." 메시지가 콘솔에 출력됩니다.
두번째 함수: func1 함수를 정의하고, func2 함수를 정의합니다. func2 함수는 콜백 함수(callback)를 매개변수로 받습니다.
func2 함수를 호출할 때 func1 함수를 인자로 전달하여 func1 함수를 실행합니다.
세번째 함수: func4 함수를 호출할 때 func3 함수를 인자로 전달하여, 33부터 38까지의 값을 매개변수로 사용하여 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(callback){
setTimeout(() => {
console.log("funcD가 실행되었습니다.");
}, 1000);
}
funcA(function(){
funcB(function(){
funcC(function(){
funcD();
});
});
});
}
}
첫 번째 예제(동기적인 함수):
순차적으로 함수가 호출됩니다.
두 번째 예제(비동기적인 함수):
func3 함수는 setTimeout() 함수를 사용하여 1초 뒤에 실행되도록 예약됩니다.
그러므로 func4 함수는 func3 함수가 실행될 때까지 기다리지 않고 즉시 실행됩니다.
세 번째 예제(비동기적인 콜백 함수):
func5 함수는 setTimeout()을 사용하여 1초 뒤에 실행되도록 예약됩니다.
그리고 콜백 함수(func6)를 실행하기 전에 "43. 함수가 실행되었습니다."를 출력합니다.
func5를 호출할 때 콜백 함수가 전달되어 func6 함수가 func5 함수 실행 이후에 호출됩니다.
네 번째 예제(콜백 지옥):
이 부분에서는 콜백 함수를 사용하여 함수 호출을 연쇄적으로 실행하고 있습니다.
이러한 구조는 "콜백 지옥"이라고도 불리며,
코드가 복잡해지고 가독성이 떨어지는 문제를 일으킬 수 있습니다.
결과 확인하기
39. 함수가 실행되었습니다.
40. 함수가 실행되었습니다.
두 번째 예제 결과:
42. 함수가 실행되었습니다.
41. 함수가 실행되었습니다.
세 번째 예제 결과:
43. 함수가 실행되었습니다.
44. 함수가 실행되었습니다.
네 번째 예제 결과:
funcA가 실행되었습니다.
funcB가 실행되었습니다.
funcC가 실행되었습니다.
funcD가 실행되었습니다.
25. 함수 : 비동기 함수 : 프로미스
비동기 함수 중 프로미스에 관한 예제입니다.
{
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);
})
}
첫번째 예제:
만약 data가 true이면 resolve가 호출되어 "45. 함수가 실행되었습니다"라는 메시지가 반환됩니다.
그렇지 않으면 reject가 호출되어 오류 메시지가 반환됩니다.
then 메서드를 사용하여 Promise가 성공적으로 해결될 때 수행할 작업을 지정합니다. 이 경우, result를 받아와서 콘솔에 출력합니다.
두번째 예제(콜백지옥을 프로미스로 변환):
funcA를 호출하고, then 메서드를 사용하여 funcB, funcC, funcD를 연쇄적으로 호출합니다. 이렇게 하면 각 함수가 순차적으로 실행됩니다.
결과 확인하기
45. 함수가 실행되었습니다
두번째 예제 결과:
funcA가 실행되었습니다.
funcB가 실행되었습니다.
funcC가 실행되었습니다.
funcD가 실행되었습니다.
26. 함수 : 비동기 함수 : async/await
비동기 함수 중 async와 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/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);
}
}
}
첫 번째 함수:
func 함수를 정의하고, 해당 함수를 호출하여 "46. 함수가 실행되었습니다." 메시지를 콘솔에 출력합니다.
두 번째 함수:
async 키워드를 사용하여 비동기 함수 func2를 정의합니다.
그러나 await를 사용하지 않으므로 이 함수는 동기적으로 동작합니다.
"47. 함수가 실행되었습니다." 메시지가 즉시 콘솔에 출력됩니다.
세 번째 함수:
async 함수 func3에서 fetch를 사용하여 원격 JSON 데이터를 가져옵니다.
await 키워드를 사용하여 비동기 작업이 완료될 때까지 기다립니다.
데이터를 받아온 후에 JSON 데이터를 파싱하고 콘솔에 출력합니다.
네 번째 함수:
async 함수 func4에서는 try-catch 구문을 사용하여 예외 처리를 수행합니다.
fetch 및 JSON 파싱 과정에서 예외가 발생하면 catch 블록이 실행되고 에러를 콘솔에 출력합니다.
결과 확인하기
46. 함수가 실행되었습니다.
두 번째 함수 결과:
47. 함수가 실행되었습니다.
세 번째 함수 결과:
Array(60)
네 번째 함수 결과:
Array(60)