01. 선언적 함수
변수에 함수를 저장하는 방법
{
function func(){
document.write("실행되었습니다.
");
}
func();
}
결과 확인하기
실행되었습니다.
선언적 함수
function func(){}
실행문 : func();
02. 익명 함수
변수에 함수를 저장하는 방법입니다.
{
const func = function(){
document.write("실행되었습니다.
");
}
func();
}
결과 확인하기
실행되었습니다.
익명 함수
const func = (){}
실행문 : func();
03. 매개변수 함수
매개변수는 함수나 메서드가 호출될 때 함수에 값을 전달하며, 이러한 값들이 함수 내부에서 사용됩니다.
{
function func(str){
document.write(str);
}
func("실행되었습니다.
");
}
결과 확인하기
실행되었습니다.
매개변수 함수
결과값을 실행문에 적어 매개변수(str)에 전달해주는 방식입니다.
04. 리턴값 함수
return : 반환. 결과를 반환하는 함수입니다.
{
function func(){
const str ="실행되었습니다.";
return str;
}
document.write(func());
}
결과 확인하기
실행되었습니다.
05. 화살표 함수 : 선언적 함수
선언적 함수를 '=,=>'을 이용하여 함수를 간결하게 표현한 방법입니다.
{
func = () => {
document.write("실행되었습니다.
");
}
func();
}
// function func( ){
// document.write("실행되었습니다.");
// };
결과 확인하기
실행되었습니다.
06. 화살표 함수 : 익명 함수
익명 함수를 '=, =>'을 이용하여 함수를 간결하게 표현한 방법입니다.
{
const func = () => {
document.write("실행되었습니다.
");
}
func();
}
// const func = function( ){
// document.write("실행되었습니다.");
// };
결과 확인하기
실행되었습니다.
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. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 + 괄호생략
9번에서 추가적으로 괄호를 생략하는 방법입니다.
const func = str => {
return str;
}
document.write("실행되었습니다.");
결과 확인하기
실행되었습니다.
11. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 + 괄호생략 + 리턴생략
const func = str => str;
document.write("실행되었습니다.");
결과 확인하기
실행되었습니다.
12. 화살표 함수 : 선언적함수 + 매개변수 + 리턴값 + 괄호생략 + 리턴생략
func = str => str;
document.write("실행되었습니다.");
결과 확인하기
실행되었습니다.
13. 함수유형 : 함수와 매개변수를 이용한 형태
function func(num, str1, str2){
document.write(num + "." + str1 + "가 " + str2 + "되었습니다.<br>");
}
func("1","함수","실행");
func("2","자바스크립트","실행");
func("3","리액트","실행");
결과 확인하기
1.함수가 실행되었습니다.
2.자바스크립트가 실행되었습니다.
3.리액트가 실행되었습니다.
2.자바스크립트가 실행되었습니다.
3.리액트가 실행되었습니다.
14. 함수유형 : 함수와 변수를 이용한 형태
function func(num, str1, str2){
document.write(num + "." + str1 + "가 " + str2 + "되었습니다.<br>");
}
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);
결과 확인하기
1.함수가 실행되었습니다.
2.자바스크립트가 실행되었습니다.
3.리액트가 실행되었습니다.
2.자바스크립트가 실행되었습니다.
3.리액트가 실행되었습니다.
15. 함수유형 : 함수와 배열을 이용한 형태
function func(num, str1, str2){
document.write(num + "." + str1 + "가 " + str2 + "되었습니다.<br>");
}
const num = [1, 2, 3];
const info = ["함수", "자바스크립트", "리액트"];
const str = ["실행"];
func(num[0], info[0], str[0]);
func(num[1], info[1], str[0]);
func(num[2], info[2], str[0]);
결과 확인하기
1.함수가 실행되었습니다.
2.자바스크립트가 실행되었습니다.
3.리액트가 실행되었습니다.
2.자바스크립트가 실행되었습니다.
3.리액트가 실행되었습니다.
16. 함수유형 : 함수와 객체를 이용한 형태
function func(num, str1, str2){
document.write(num + "." + str1 + "가 " + str2 + "되었습니다.<br>");
}
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);
결과 확인하기
1.함수가 실행되었습니다.
2.자바스크립트가 실행되었습니다.
3.리액트가 실행되었습니다.
2.자바스크립트가 실행되었습니다.
3.리액트가 실행되었습니다.
17. 함수유형 : 함수와 배열, 객체를 이용한 형태
function func(num, str1, str2){
document.write(num + "." + str1 + "가 " + str2 + "되었습니다.<br>");
}
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);
결과 확인하기
1.함수가 실행되었습니다.
2.자바스크립트가 실행되었습니다.
3.리액트가 실행되었습니다.
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();
결과 확인하기
1.함수가 실행되었습니다.
2.자바스크립트가 실행되었습니다.
3.리액트가 실행되었습니다.
2.자바스크립트가 실행되었습니다.
3.리액트가 실행되었습니다.
19. 함수유형 : 객체 생성자 함수를 이용한 형태
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,"리액트","실행");
info1.result();
info2.result();
info3.result();
결과 확인하기
1.함수가 실행되었습니다.
2.자바스크립트가 실행되었습니다.
3.리액트가 실행되었습니다.
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 + "되었습니다.<br>");
}
const info1 = new Func(1,"함수","실행");
const info2 = new Func(2,"자바스크립트","실행");
const info3 = new Func(3,"리액트","실행");
info1.result();
info2.result();
info3.result();
결과 확인하기
1.함수가 실행되었습니다.
2.자바스크립트가 실행되었습니다.
3.리액트가 실행되었습니다.
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("101", "함수", "실행");
const info2 = new Func("201", "자바스크립트", "실행");
const info3 = new Func("301", "리액트", "실행");
info1.result1();
info2.result2();
info3.result3();
결과 확인하기
101. 함수가 실행되었습니다.
201. 함수가 실행되었습니다.
301. 함수가 실행되었습니다.
201. 함수가 실행되었습니다.
301. 함수가 실행되었습니다.
객체리터럴 함수
22. 함수종류 : 즉시 실행 함수
(function (){
document.write("500. 함수가 실행되었습니다.
")
})();
결과 확인하기
500. 함수가 실행되었습니다.
23. 함수종류 : 파라미터 함수
function func(str = "600. 함수가 실행되었습니다.
"){
document.write(str);
}
func();
결과 확인하기
600. 함수가 실행되었습니다.
24. 함수종류 : 아규먼트 함수
function func(str1, str2){
document.write(arguments[0]);
document.write(arguments[1]);
};
func("함수실행1", "함수실행2");
결과 확인하기
함수실행1
함수실행2
함수실행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. 함수종류 : 콜백 함수
콜백함수를 사용하는 방법
function func(){
document.write("2. 함수 실행")
}
function callback(str){
document.write("1. 함수 실행")
str();
}
callback(func);
결과 확인하기
1.함수실행
2.함수실행