01. 선언적 함수
선언적 함수(Declaration function)는 자바스크립트에서 함수를 정의하는 가장 일반적인 방법 중 하나입니다.
함수 이름을 지정하고, 매개 변수를 정의하고, 함수 몸체를 작성하여 함수를 생성합니다. 이 함수를 호출할 때는 함수 이름과 괄호를 사용합니다.
함수의 이름은 "func"이며, 함수 정의는 중괄호({})로 묶여 있습니다. 함수를 호출하려면, 함수 이름 다음에 괄호를 사용하고,
필요한 인수(파라미터)를 괄호 안에 넣습니다. 이 코드에서는 인수가 없는 함수를 호출하고 있습니다.
{
function func(){
document.write("실행되었습니다.");
}
func();
}
결과 확인하기
02. 익명 함수
익명 함수(Anonymous function)는 함수 이름이 없는 함수입니다. 익명 함수는 함수 표현식을 사용하여 정의하며, 변수에 할당하여 사용합니다.
먼저, "func"라는 변수에 함수 표현식을 할당합니다. 이 함수 표현식은 "function()" 키워드를 사용하여 함수를 정의하고, 중괄호({}) 내부에 함수의 코드를 작성합니다.
이후, 변수 이름을 사용하여 함수를 호출합니다.
{
const func = function(){
document.write("실행되었습니다.");
}
func();
}
결과 확인하기
03. 매개변수 함수
자바스크립트 함수에서 매개변수(parameter)는 함수를 호출할 때 함수에 전달되는 값입니다. 함수가 호출될 때, 매개변수는 함수 내부에서 변수로 선언됩니다.
매개변수는 함수 내부에서 함수의 로직을 실행하는 데 필요한 값으로 사용됩니다.function func(str){ ... }는 "func"라는 이름의 함수를 정의하는 것입니다.
함수의 매개변수로 str이라는 값을 받아들이고, 함수의 몸체에 있는 document.write(str)은 str 값을 웹 페이지에 출력하는 역할을 합니다.
{
// let str = "실행되었습니다."; 지워도 실행됩니다.
function func(str){
document.write(str)
};
func("실행되었습니다.")
}
결과 확인하기
04. 리턴값 함수(결과/끝)
자바스크립트 함수에서 return 키워드를 사용하여 값을 반환할 수 있습니다. 함수가 값을 반환하는 것을 리턴값(return value)이라고 합니다.
{
function func(){
const str ="실행되었습니다.";
return str;
}
document.write(func());
}
결과 확인하기
05. 화살표 함수 : 선언적 함수
화살표 함수는 함수 선언문이나 함수 표현식보다 간결하게 작성할 수 있습니다.
일반적인 함수 선언문과 비교해보면, 매개 변수 리스트와 함수 몸체 사이에 => 기호가 있으며 함수 키워드와 함수 이름을 생략할 수 있습니다.
{
func = () => {
document.write("실행되었습니다.")
};
func();
}
결과 확인하기
06. 화살표 함수 : 익명 함수
익명함수의 화살표 함수입니다.
{
const func = () => {
document.write("실행되었습니다.")
}
func();
}
결과 확인하기
07. 화살표 함수 : 매개변수 함수
매개변수 함수의 화살표 함수입니다.
{
func = (str) => {
document.write(str)
};
func("실행되었습니다.")
}
결과 확인하기
08. 화살표 함수 : 리턴값 함수
return함수를 화살표 함수로 변경하였습니다.
{
func = () => {
const str ="실행되었습니다."
return str;
};
document.write(func());
}
결과 확인하기
09. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값
익명함수와 매개변수 리턴함수를 한번에 화살표 함수로 나타내었습니다.
{
const func = (str) => {
return str;
}
document.write(func("실행되었습니다."));
}
결과 확인하기
10. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 + 괄호생략
익명함수와 매개변수 리턴함수를 한번에 화살표 함수로 나타내었습니다. 변수 값이 하나인 경우 괄호도 생략 가능합니다.
{
const func = str => { //변수 값이 하나인 경우 괄호 생략 가능
return str;
}
document.write(func("실행되었습니다."));
}
결과 확인하기
11. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 + 괄호생략 + 리턴생략
익명함수와 매개변수 리턴함수를 한번에 화살표 함수로 나타내었습니다. 리턴을 생략하며 중괄호도 같이 생략하였습니다.
str =< str는 function(str) { return str; }와 같은 의미입니다.
{
const func = str => str;
document.write(func("실행되었습니다."));
}
결과 확인하기
12. 화살표 함수 : 선언적 함수 + 매개변수 + 리턴값 + 괄호생략 + 리턴생략
익명함수 대신 선언적 함수도 매개변수와 리턴값과 함께 화살표 함수를 사용할 수도 있습니다.
{
func = str => str; //단점 this를 사용할 수 없습니다.
document.write(func("실행되었습니다."));
}
결과 확인하기
13. 함수 유형 : 함수와 매개변수를 이용한 형태
함수와 매개변수를 이용한 형태입니다.
{
function func(num, str1, str2){
document.write(num +". "+ str1 + "가 " + str2 + "되었습니다."+"
");
}
func("1", "함수", "실행");
func("2", "자바스크립트", "실행");
func("3", "리액트", "실행");
}
결과 확인하기
2. 자바스크립트 실행되었습니다.
3. 리액트가 실행되었습니다.
14. 함수 유형 : 함수와 변수를 이용한 형태
함수와 변수를 이용한 형태 입니다.
{
function func(num, str1, str2){
document.write(num +". "+ str1 + "가 " + str2 + "되었습니다."+"
");
}
const youNum1 = 1;
const youNum2 = 2;
const youNum3 = 3;
const youStr1 = "함수";
const youStr2 = "자바스크립트";
const youStr3 = "리액트";
const youCom1 = "실행";
func(youNum1, youStr1, youCom1); //상수 youNum1, youStr1, youCom1이 document.write에 입력됩니다.
func(youNum2, youStr2, youCom1);
func(youNum3, youStr3, youCom1);
}
결과 확인하기
2. 자바스크립트 실행되었습니다.
3. 리액트가 실행되었습니다.
15. 함수 유형 : 함수와 배열을 이용한 형태
함수와 배열을 이용한 형태 입니다.
{
function func(num, str1, str2){
document.write(num +". "+ str1 + "가 " + str2 + "되었습니다."+"
");
}
const num = [1,2,3];
const info = ["함수","자바스크립트","리액트","실행"];
func(num[0],info[0],info[3]); // 상수 num의 첫번째 배열 1 상수 info의 첫번째 배열 "함수" 상수 info의 네번째 "실행"이 document.write에 입력됩니다.
func(num[1],info[1],info[3]);
func(num[2],info[2],info[3]);
}
결과 확인하기
2. 자바스크립트 실행되었습니다.
3. 리액트가 실행되었습니다.
16. 함수 유형 : 함수와 객체를 이용한 형태
함수와 객체를 이용한 형태 입니다.
{
function func(num, str1, str2){
document.write(num +". "+ str1 + "가 " + str2 + "되었습니다."+"
");
}
const info = {
num1 : 1,
name1 : "함수",
num2 : 2,
name2 : "자바스크립트",
num3 : 3,
name3 : "리액트",
word : "실행"
}
func(info.num1,info.name1,info.word); 상수 info의 객체 num1, name1, word가 document.write에 입력됩니다.
func(info.num2,info.name2,info.word);
func(info.num3,info.name3,info.word);
}
결과 확인하기
2. 자바스크립트 실행되었습니다.
3. 리액트가 실행되었습니다.
17. 함수 유형 : 함수와 객체,배열을 이용한 형태
함수와 객체, 배열을 이용한 형태 입니다.
{
function func(num, str1, str2){
document.write(num +". "+ str1 + "가 " + str2 + "되었습니다."+"
");
}
const info = [
{
num: 1,
name: "함수",
word: "실행"
},{
num: 2,
name: "자바스크립트",
word: "실행"
},{
num: 3,
name: "리액트",
word: "실행"
}
]
func(info[0].num,info[0].name,info[0].word); // 상수 info의 첫번째 배열info[0] 안의 객체info[0].num 두번째, 세번째도 document.write에 입력됩니다.
func(info[1].num,info[1].name,info[1].word);
func(info[2].num,info[2].name,info[2].word);
}
결과 확인하기
2. 자바스크립트 실행되었습니다.
3. 리액트가 실행되었습니다.
18. 함수 유형 : 객체안에 함수를 이용한 형태
JavaScript에서 함수는 객체입니다. 함수는 속성(property)을 가질 수 있으며,
속성으로 함수를 사용할 수 있습니다. 예를 들어, 다음과 같이 객체 내에 함수를 추가할 수 있습니다.
{
const info = {
num1 : 1,
name1 : "함수",
num2 : 2,
name2 : "자바스크립트",
num3 : 3,
name3 : "리액트",
word : "실행",
result1: function(){
document.write(info.num1 +". "+ info.name1 + "가 " + info.word + "되었습니다."+"
");
},
result2: function(){
document.write(info.num2 +". "+ info.name2 + "가 " + info.word + "되었습니다."+"
");
},
result3: function(){
document.write(info.num3 +". "+ info.name3 + "가 " + info.word + "되었습니다."+"
");
}
}
info.result1();
info.result2();
info.result3();
}
결과 확인하기
2. 자바스크립트 실행되었습니다.
3. 리액트가 실행되었습니다.
19. 함수 유형 : 객체생성자 함수
객체생성자 함수를 사용하면 동일한 속성과 메서드를 가진 객체를 여러 개 생성할 수 있습니다.
객체생성자 함수는 함수를 정의할 때 일반 함수와 동일한 방식으로 정의됩니다. 그러나 일반 함수와 달리, 객체생성자 함수의 이름은 대문자로 시작합니다.
인스턴스는 생성자 함수를 사용하여 생성된 객체를 가리킵니다. 생성자 함수는 일반적인 함수와 마찬가지로 정의할 수 있으며, new 키워드를 사용하여 객체를 생성합니다.
{
function Func(num, name, word){
this.num = num; //this 자기자신
this.name = name;
this.word = word;
this.result = function(){
document.write(this.num +". "+ this.name + "가 " + this.word + "되었습니다."+"
");
}
}
//인스턴스 생성
const info1 = new Func(1, "함수", "실행");
const info2 = new Func(2, "자바스크립트", "실행");
const info3 = new Func(3, "리액트", "실행");
info1.result();
info2.result();
info3.result();
}
결과 확인하기
2. 자바스크립트 실행되었습니다.
3. 리액트가 실행되었습니다.
20. 함수 유형 : 프로토타입 함수
프로토타입 함수는 객체 생성자 함수에 의해 생성된 모든 객체가 공유하는 메서드입니다.
객체 생성자 함수에 메서드를 추가하면, 생성된 모든 객체에서 해당 메서드를 사용할 수 있습니다. 객체 생성자 함수에 메서드를 추가하려면, 생성자 함수의 프로토타입 객체에 메서드를 추가해야 합니다.
{
function Func(num, name, word){
this.num = num;
this.name = name;
this.word = word;
}
Func.prototype.result = function(){
document.write(this.num +". "+ this.name + "가 " + this.word + "되었습니다.");
}
const info1 = new Func(1, "함수", "실행");
const info2 = new Func(2, "자바스크립트", "실행");
const info3 = new Func(3, "리액트", "실행");
info1.result();
info2.result();
info3.result();
}
결과 확인하기
2. 자바스크립트 실행되었습니다.
3. 리액트가 실행되었습니다.
21. 함수 유형 : 객체리터럴 함수
프로토타입 함수는 객체 생성자 함수에 의해 생성된 모든 객체가 공유하는 메서드입니다.
객체 생성자 함수에 메서드를 추가하면, 생성된 모든 객체에서 해당 메서드를 사용할 수 있습니다. 객체 생성자 함수에 메서드를 추가하려면, 생성자 함수의 프로토타입 객체에 메서드를 추가해야 합니다.
{
function func(num, name, com){
this.num = num;
this.name = name;
this.com = com;
}
func.prototype = {
result1: function(){
document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.`);
},
result2: function(){
document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.`);
},
result3: function(){
document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.`);
}
}
// 인스턴스
const info1 = new func("102","함수","실행");
const info2 = new func("202","자바스크립트","실행");
const info3 = new func("302","리액트","실행");
// 실행문
info1.result1();
info2.result2();
info3.result3();
}
결과 확인하기
202 자바스크립트 실행되었습니다.
302 리액트가 실행되었습니다.
22. 함수 종류 : 즉시 실행 함수
즉시 실행 함수는 함수를 선언하자마자 즉시 호출하여 실행하며, 함수 내부에서 생성한 변수나 함수 등이 전역 네임스페이스를 오염시키지 않도록 하기 위해 사용됩니다.
함수를 선언하고, 이를 괄호로 감싸주고 마지막에 한 번 더 괄호를 추가하여 함수를 즉시 실행시켰습니다.
{
// function func(){
// document.write("함수가 실행되었습니다.")
// }
// func();
(function (){
document.write("500. 함수가 실행되었습니다.")
})();
(() => {
document.write("501. 함수가 실행되었습니다.")
})();
}
결과 확인하기
501 자바스크립트 실행되었습니다.
23. 함수 종류 : 파라미터 함수
파라미터 함수는 함수의 매개변수로 전달되는 함수를 말합니다. 이를 이용하여 함수 내에서 다른 함수를 호출하거나, 콜백(callback) 함수를 구현하는 등의 용도로 활용됩니다.
{
function func(str = "600. 함수가 실행되었습니다."){
document.write(str);
}
func();
}
결과 확인하기
24. 함수 종류 : 아규먼트 함수
아규먼트(argument) 함수는 함수를 호출할 때 전달되는 값을 받아 함수 내부에서 사용할 수 있도록 하는 매개변수(parameter)의 일종입니다.
{
function func(str1, str2){
document.write(arguments[0]);
document.write(arguments[1]);
}
func("함수실행1", "함수실행2");
}
결과 확인하기
25. 함수 종류 : 재귀 함수
재귀 함수(Recursive Function)는 자기 자신을 호출하는 함수를 말합니다. 재귀 함수는 반복문과 같이 반복적인 작업을 처리할 수 있습니다.
{
function func(num){
if(num<=1){
document.write("함수가 실행1.")
} else {
document.write("함수가 실행2.")
func(num-1);
}
}
func(10);
function animation(){
document.write("애니메이션이 실행되었습니다.")
requestAnimationFrame(animation);
}
animation();
}
결과 확인하기
애니메이션이 실행되었습니다. 무한반복
26. 함수 종류 : 콜백 함수 : 함수를 두번 실행(다른 함수에 인수로 넘겨지는 함수)
콜백 함수는 다른 함수의 인자로 전달되어, 이 함수 내에서 필요한 시점에 호출되는 함수를 말합니다.
즉, 함수 내에서 다른 함수를 호출하면서 그 함수의 결과값을 다시 자신에게 전달하거나 다른 동작을 수행할 때 사용됩니다.
{
// function func1(){
// document.write("1.함수 실행")
// }
// function func2(){
// document.write("2.함수 실행")
// }
// func1();
// func2();
function func(){
document.write("2.함수 실행");
}
function callback(str){
document.write("1.함수 실행");
str();
}
callback(func);
}
결과 확인하기
27. 함수 종류 : 콜백 함수(반복문)
콜백 함수는 다른 함수의 인자로 전달되어, 이 함수 내에서 필요한 시점에 호출되는 함수를 말합니다.
즉, 함수 내에서 다른 함수를 호출하면서 그 함수의 결과값을 다시 자신에게 전달하거나 다른 동작을 수행할 때 사용됩니다.
{
function func(index){
console.log("함수가 실행되었습니다."+index);
}
function callback(num){
for(let i=1; i<=10; i++){
num(i);
}
}
callback(func);
}
결과 확인하기
28. 함수 종류 : 콜백 함수(동기/비동기)
콜백 함수는 다른 함수의 인자로 전달되어, 이 함수 내에서 필요한 시점에 호출되는 함수를 말합니다.
즉, 함수 내에서 다른 함수를 호출하면서 그 함수의 결과값을 다시 자신에게 전달하거나 다른 동작을 수행할 때 사용됩니다.
{
01
function funcA(){
console.log("funcA가 실행되었습니다.");
}
function funcB(){
console.log("funcB가 실행되었습니다.");
}
funcA();
funcB();
A B
02
function funcA(){
setTimeout(() => {
console.log("funcA가 실행되었습니다.");
},1000)
}
function funcB(){
console.log("funcB가 실행되었습니다.");
}
funcA();
funcB();
03
function funcA(callback){
setTimeout(() => {
console.log("funcA가 실행되었습니다.");
callback();
}, 1000);
}
function funcB(){
console.log("funcB가 실행되었습니다.");
}
funcA(function(){
funcB();
});
04 : 콜백 지옥
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();
});
});
});
}