01. 선언적 함수
함수를 호출할 때 함수의 앞 또는 뒤에서 호출이 가능합니다.
{
function func(){
document.write("실행되었습니다.
"); //실행문이 있어야함
}
func(); //가장 기본적인 함수
}
결과 확인하기
02. 익명 함수
변수에 함수 데이터를 저장하여 변수를 마치 함수처럼 사용할 수 있도록 만들어 줍니다.
{
const func = function(){
document.write("실행되었습니다.
")
}
func();
}
결과 확인하기
03. 매개변수 함수
함수를 호출할 때 전달하는 변수를 '매개변수'라고 합니다.
{
//let str = "실행되었습니다.
";
//function func(str){
// document.write(str);
//}
//func(str);
//}
// 위와같은값
{
function func(str){
document.write(str);
}
func("실행되었습니다.
");
}
결과 확인하기
04. 리턴값 함수
함수를 통해 처리된 결과를 반환시켜 주는 명령어입니다.
{
function func(){
const str = "실행되었습니다.";
return str;
}
document.write(func());
}
결과 확인하기
05. 화살표 함수 : 선언적 함수
''=>'를 이용하여 함수를 간결하게 표현할 때 사용합니다.
{
func = () => {
document.write("실행되었습니다.
");
}
func();
}
결과 확인하기
06. 화살표 함수 : 익명 함수
''=>'를 이용하여 함수를 간결하게 표현할 때 사용합니다.
{
const func = () => { //화살표 함수는 function을 쓰지않음 function생략
document.write("실행되었습니다.
");
}
func();
}
결과 확인하기
07. 화살표 함수 : 매개함수
''=>'를 이용하여 함수를 간결하게 표현할 때 사용합니다.
{
func = (str) => {
document.write(str);
}
func("실행되었습니다.
");
}
결과 확인하기
08. 화살표 함수 : 리턴함수
''=>'를 이용하여 함수를 간결하게 표현할 때 사용합니다.
{
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. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴 생략
화살표 함수로 익명함수와 매개변수, 리턴값을 같이 사용하고 괄호를 생략하고 리턴도 생략할 수 있습니다.
{
const func = str => str; //괄호생략 + 리턴생략
document.write(func("실행되었습니다."));
}
결과 확인하기
12. 화살표 함수 : 선언적 함수 + 매개변수 + 리턴값 + 괄호 생략
화살표 함수를 통해 선언적 함수와 매개변수 리턴값을 같이 사용해 괄호를 생략할 수 있습니다.
{
func = str => str;
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);
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]);
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);
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);
Func(info[1].num, info[1].name, info[1].word);
Func(info[2].num, info[2].name, info[2].word);
}
결과 확인하기
2. 자바스크립트가 실행되었습니다.
3. 리엑트가 실행되었습니다.
18. 함수 유형 : 객체안에 함수를 이용한 형태
객체 내부에 함수를 포함시킬 수 있다.
객체 내부에 함수를 포함시키면 해당 함수는 객체의 포로퍼티가 되며, 객체를 통해 호출할 수 있다.
{
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. 함수 유형 : 객체생성자 함수(제일중요❗)
객체를 생성하기 위한 함수이다. 이 함수를 사용하여 객체를 생성할 때, 일반적으로 템플릿과 같은 역할을 수행한다.
{
function Func(num, name, word){
// let aa = num;
// let bb = name;
this.num = num;
this.name = name;
this.word = word;//따로 지정해주지않아도 1도 들어가고 2도 들어간다 그게this
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. 리엑트가 실행되었습니다.
{
function func(num, name, com){
this.num = num;
this.name = name;
this.com = com;
this.result = function(){
document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.
`)
}
}
//인스턴스
const info1 = new func("100", "함수", "실행");
const info2 = new func("200", "자바스크립트", "실행");
const info3 = new func("300", "리엑트", "실행");
//실행문
info1.result();
info2.result();
info3.result();
}
결과 확인하기
200. 자바스크립트가 실행되었습니다.
300. 리엑트가 실행되었습니다.
20. 함수 유형 : 프로토타입(Prototype Function) 함수
객체를 생성할 때 사용되는 템플릿으로, 객체의 공통적인 속성과 메서드를 정의하는데 사용된다.
{
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. 리엑트가 실행되었습니다.
{
function func(num, name, com){
this.num = num;
this.name = name;
this.com = com;
};
func.prototype.result = function(){
document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.
`)
};
//인스턴스
const info1 = new func("100", "함수", "실행");
const info2 = new func("200", "자바스크립트", "실행");
const info3 = new func("300", "리엑트", "실행");
//실행문
info1.result();
info2.result();
info3.result();
}
결과 확인하기
200. 자바스크립트가 실행되었습니다.
300. 리엑트가 실행되었습니다.
21. 함수 유형 : 객체리터럴 함수
객체를 생성하는 방법 중 하나이다. 중괄호 안에 key-value 쌍의 형태로 프로퍼티를 정의하는 방법이다. 객체 리터럴 방식은 쉽고 간편하게 객체를 생성할 수 있고, 다양한 용도로 활용된다.
{
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. 리엑트가 실행되었습니다.
{
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("100", "함수", "실행");
const info2 = new func("200", "자바스크립트", "실행");
const info3 = new func("300", "리엑트", "실행");
//실행문
info1.result1();
info2.result2();
info3.result3();
}
결과 확인하기
200. 자바스크립트가 실행되었습니다.
300. 리엑트가 실행되었습니다.
22. 함수 종류 : 즉시 실행 함수
객체를 생성할 때 사용되는 템플릿으로, 객체의 공통적인 속성과 메서드를 정의하는데 사용된다.
{
// function func(){
// document.write("함수가 실행되었습니다.");
// }
// func();
(function (){
document.write("500.함수가 실행되었습니다.
");
})();
(() => {
document.write("501.함수가 실행되었습니다.
");
})();
}
결과 확인하기
501.함수가 실행되었습니다.
23. 함수 종류 : 파라미터 함수
함수가 인수를 받아들이는 변수를 포함하는 함수를 말한다. 즉, 함수를 호출할 때 전달하는 인수가 함수의 파라미터를 통해 함수 내부로 전달되어 처리된다.
{
function func(str = "600.함수가 실행되었습니다.
"){
document.write(str);
}
func();
}
결과 확인하기
24. 함수 종류 : 아규먼트 함수
인자로 받아들이는 함수를 말한다. 함수를 값으로서 다른 함수에 전달하여 사용하는 것이다.
{
function func(str1, str2){
document.write(arguments[0]);
document.write(arguments[1]);//배열 설정하지 않았는데 자동으로 입력된
}
func("함수실행1","함수실행2");
}
결과 확인하기
25. 함수 종류 : 재귀 함수
자기 자신을 호출하는 함수이다. 함수를 호출하면 반복문을 사용하는 것보다 더 간결하고 가독성이 좋은 코드를 작성할 수 있다.
재귀 함수는 대개 기본단계, 재귀단계로
구성된다.
기본단계는 자기 자신을 호출하지 않고 반환하는 부분을 말한다.
재귀단계는 자기 자신을 호출하는 부분을 말한다. 기본단계에 도달하면 재귀함수는
종료된다.
{
function func(num){
if(num<=1){
document.write("함수가 실행되었습니다.");
} else {
document.write("함수가 실행되었습니다.");
func(num-1);
}
}
func(10);
//요즘 쓰는 방식
// function animation(){
// document.write("애니메이션이 실행되었습니다.");
// requestAnimationFrame(animation);
// }
// animation();
}
결과 확인하기
//애니메이션이 실행되었습니다.(무한)
26. 함수 종류 : 콜백 함수(callback function)
콜백함수는 다른 함수의 인수로 전달되는 함수이다. 이를 통해 함수의 동작을 조작하거나 확장할 수 있다.
어떤 함수에 콜백 함수를 전달하면 그 함수는 작업이 끝난 후에
콜백 함수를 호출하여 결과를 반환할 수 있다.
{
// 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);
}
결과 확인하기
2. 함수 실행
27. 함수 종류 : 콜백 함수(반복문)
반복문에서 사용되는 콜백함수의 경우, 일반적으로 배열의 각 요소에 대해 적용됩니다. 예를 들어 javascript에서 forEach()메서드를 사용해 배열의 각 요소를 반복하면 콜백함수가 호출됩니다.
콜백함수의 인자로는 현재 요소, 해당 요소의 인덱스, 배열 전체가 전달됩니다.
{
function func(index){
console.log("함수실행"+index);
}
function callback(num){
for(let i=1; i<=10; i++){
num(i);
}
}
callback(func);
}
결과 확인하기
함수 실행 2
함수 실행 3
함수 실행 4
함수 실행 5
함수 실행 6
함수 실행 7
함수 실행 8
함수 실행 9
함수 실행 10
28. 함수 종류 : 콜백 함수(동기/비동기)
동기적 콜백 함수는 호출된 함수가 콜백 함수의 실행이 끝날 때까지 기다립니다. 이 경우 콜백함수는 호출된 함수와 동기적으로 작동하며, 호출된 함수가 실행 중일 때 다른 코드가 실행되지 않습니다.
ex) Array.prototype.forEach()
비동기적 콜백 하뭇는 호출된 함수의 실행과 독립적으로 작동합니다. 호출된 함수가 작업을 완료할 때까지 콜백함수는 기다리지 않고 다른 코드를 실행합니다.
ex) setTimeout(), Node.js의 fs.readaFile()
{
//01
function funcA(){
console.log("funcA가 실행되었습니다.");
}
function funcB(){
console.log("funcB가 실행되었습니다.");
}
funcA();
funcB();
//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(){
setTimeout(() => {
console.log("funcD가 실행되었습니다.");
}, 1000);
}
funcA(function(){
funcB(function(){
funcC(function(){
funcD();
});
});
});
}
결과 확인하기
funB가 실행되었습니다.
funcB가 실행되었습니다.
funcA가 실행되었습니다.
funcA가 실행되었습니다.
funB가 실행되었습니다.
funcA가 실행되었습니다.
funB가 실행되었습니다.
funC가 실행되었습니다.
funD가 실행되었습니다.