01. 선언적 함수
선언적 함수는 function 키워드와 함수 이름을 사용하여 선언된다.
function func(){
document.write("김현빈");
};
func();
결과 확인하기
02. 익명 함수
익명 함수는 함수 이름 대신 변수에 함수를 할당하는 방식으로 작성됩니다. 이러한 함수는 일회성으로 사용되는 경우에 유용하다
const func=function(){
document.write("김현빈");
};
func();
결과 확인하기
03. 매개변수 함수
함수를 호출할 떄 전달하는 변수를 '매개변수' 라고 한다.
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 =()=>{
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. 함수유형 : 함수와 변수를 이용한 형태
함수와 변수를 조합하여 전역 변수(Global Variable)를 생성할 수도 있고, 함수 내부에서 지역 변수(Local Variable)를 생성하여 데이터를 보호할 수도 있습니다.
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 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.리액트가실행되었습니다.
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. 함수유형 : 함수와 객체안 함수를 이용한 형태
자바스크립트에서 함수와 객체 안의 함수를 이용하여 다양한 형태의 프로그래밍을 할 수 있습니다. 예를 들어, 객체 안에 함수를 정의하여 해당 객체를 조작할 수 있는 메서드를 구현할 수 있습니다. 또는 함수 안에 함수를 정의하여 클로저(Closure)를 이용한 데이터 은닉을 구현할 수 있습니다
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. 함수유형 : 객체 생성자 함수------표준 많이 씀
객체 생성자 함수(Object Constructor Function)는 자바스크립트에서 객체를 생성하는 함수를 말합니다. 객체 생성자 함수를 사용하면, 비슷한 구조를 가진 객체를 반복해서 생성할 수 있습니다.
function Func(num, name, word){
this.num =num;
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", "리액트1", "실행");
info1.result();
info2.result();
info3.result();
결과 확인하기
2.자바스크립트가실행되었습니다.
3.리액트1가실행되었습니다.
20. 함수유형 : 프로토타입 함수
프로토타입 함수(Prototype Function)는 자바스크립트에서 객체의 프로토타입(Prototype)에 메서드를 추가하여 해당 객체의 모든 인스턴스가 공유해서 사용할 수 있는 함수를 말합니다.
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", "리액트1", "실행");
info1.result();
info2.result();
info3.result();
결과 확인하기
2.자바스크립트가 실행되었습니다.
3.리액트1가 실행되었습니다.
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("101","함수","실행");
const info2 = new func("202","자바스크립트","실행");
const info3 = new func("303","리액트","실행");
//실행문
info1.result1();
info2.result2();
info3.result3();
결과 확인하기
2.202.자바스크립트가 실행되었습니다.
3.303.리액트가 실행되었습니다.
22. 함수종류 : 즉시 실행함수
즉시 실행 함수(IIFE, Immediately Invoked Function Expression)는 함수를 정의하자마자 즉시 실행되는 함수입니다.
(function (){
document.write("500함수가 실행되었습니다")
})();
(() => {
document.write("501함수가 실행되었습니다")
})();
결과 확인하기
2.501.함수가 실행되었습니다.
23. 함수종류 : 파리미터 함수
파라미터(Parameter)는 함수가 호출될 때 함수 내부로 전달되는 값을 받기 위한 변수입니다.
함수를 정의할 때 파라미터를 선언하면, 함수가 호출될 때 해당 파라미터에 인자(argument) 값이 전달됩니다. 파라미터는 함수 내부에서 지역변수(local variable)로 사용될 수 있습니다.
function func(str = "600.함수가 실행되었습니다."){
document.write(str);
};
func();
((str = "601.함수가 실행되었습니다.") =>{
document.write(str);
})();
결과 확인하기
2.601.함수가 실행되었습니다.
24. 함수종류 : 아큐먼트 함수
아큐먼트 함수(Argument function)는 함수 호출 시 인자(argument)를 전달하여 함수가 수행하는 작업을 다르게 할 수 있도록 하는 함수입니다.
function func(str1, str2){
document.write(arguments[0]);
document.write(arguments[1]);
}
func("함수실행1","함수실행2")
결과 확인하기
2.함수실행2
25. 함수종류 : 재귀 함수 (자기자신을 호출)
재귀함수(Recursive function)는 함수 내부에서 자기 자신을 호출하는 함수를 말합니다. 이를 통해 반복문(Loop)과 같은 흐름 제어 구문 없이도 반복적인 작업을 수행할 수 있습니다.
function func(num){
if(num<=1){
document.write("1이랑 같아서 반복 끝");
} else {
document.write("1보다 커서 반복 중");
func(num-1)
}
}
func(10);
결과 확인하기
1보다 커서 반복 중
1보다 커서 반복 중
1보다 커서 반복 중
1보다 커서 반복 중
1보다 커서 반복 중
1보다 커서 반복 중
1보다 커서 반복 중
1보다 커서 반복 중
1이랑 같아서 반복 끝
26. 함수종류 : 콜백 함수
함수를 두번 실행 (다른 함수에 인수로 넘겨지는 함수)
function func(){
document.write("2. 함수 실행")
}
function callback(str){
document.write("1. 함수 실행")
str();
}
callback(func)
결과 확인하기
함수가 실행2
27. 함수종류 : 콜백 함수
함수 (반복문)
function func(index){
console.log("함수가 실행되었습니다."+ index);
}
function callback(num){
for(let i=1; i<=10;i++)
num(i);
}
callback(func)
결과 확인하기
함수가 실행2