01. 함수 : 선언적 함수
선언적 함수는 function키워드를 통해 선언합니다.
function func(){
document.write("함수가 실행되었습니다. 1");
}
func();
결과보기
02. 함수 : 익명함수
익명함수는 함수의 이름을 짓지 않고 사용하는 함수 입니다.
func = function(){
document.write("함수가 실행되었습니다. 2");
}
func();
결과보기
03. 함수 : 매개변수 함수
함수의 인자로 매개변수를 전달하면 함수의 지역변수로 사용할 수 있습니다.
function func(str){
document.write(str);
}
func("함수가 실행되었습니다. 3");
결과보기
04. 함수 : 리턴값함수
함수에서 return키워드를 통해서 값을 반환할 수 있습니다.
function func(){
const str = "함수가 실행되었습니다. 4";
return str;
}
document.write(func());
결과보기
05. 화살표 함수 : 선언적함수
화살표 함수로 더욱 간편하게 함수를 선언할 수 있습니다.
func = () =< document.write("함수가 실행되었습니다. 5");
func();
결과보기
06. 화살표함수 : 익명함수
화살표함수의 이름을 짓지 않고 변수에 담아서 사용합니다.
const func = () =< {
document.write("함수가 실행되었습니다. 6");
}
func();
결과보기
07. 화살표함수 : 매개변수 함수
화살표 함수에도 매개변수를 전달할 수 있습니다. 매개변수가 한개인 경우에는 괄호를 생략할 수 있습니다.
const func = str =< document.write(str);
func("함수가 실행되었습니다. 7");
결과보기
08. 화살표 함수 : 리턴값 함수
화살표 함수도 마찬가지로 return키워드를 사용해서 값을 반환할 수 있습니다. 함수의 실행문이 return값 하나일 때 중괄호를 생략할 수 있습니다.
const func = () =< {
const str = "함수가 실행되었습니다. 8";
return str;
}
document.write(func());
결과보기
09. 화살표 함수 : 익명함수 + 매개변수 + 리턴 값
다음은 화살표 함수를 이용해서 매개변수와 리턴값 모두 있는 함수입니다.
const func = (str) =< {
return str;
}
document.write(func("함수가 실행되었습니다. 9"));
결과보기
10. 화살표 함수 : 익명함수 + 매개변수 + 리턴 값 + 괄호 생략
다음은 화살표 함수에서 매개변수 + 리턴값이 있는형태에서 매개변수의 괄호를 생략해보겠습니다.
const func = str =< {
return str;
}
document.write(func("함수가 실행되었습니다. 10"));
결과보기
11. 화살표 함수 : 익명함수 + 매개변수 + 리턴 값 + 괄호 생략 + 리턴 생략
화살표 함수는 매개변수 뿐 아니라 리턴문도 생략할 수 있습니다. (모두 한줄일 경우에만)
const func = str =< str;
document.write(func("함수가 실행되었습니다. 11"));
결과보기
12. 화살표 함수 : 선언적 함수 + 매개변수 + 리턴 값 + 괄호 생략 + 리턴 생략
다음은 선언적 함수에 여태까지 했던 형태를 적용해 보겠습니다.
func = str =< str;
document.write(func("함수가 실행되었습니다. 12"));
결과보기
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. 함수 유형 : 함수와 배열, 객체를 이용한 형태
배열에 객체를 담아서 함수를 호출해 보겠습니다.
const info = [
{
num: "1",
name: "함수",
com: "실행",
},
{
num: "2",
name: "자바스크립트",
com: "실행",
},
{
num: "3",
name: "제이쿼리",
com: "실행",
},
];
function func(num, str1, str2) {
// document.write(num + ", " + str1 + "가" + str2 + "되었습니다.");
}
func(info[0].num, info[0].name, info[0].com);
func(info[1].num, info[1].name, info[0].com);
func(info[2].num, info[2].name, info[0].com);
결과보기
2, 자바스크립트가 실행되었습니다.
3, 제이쿼리가 실행되었습니다.
16. 함수 유형 : 객체 안에 변수와 함수를 이용한 형태
객체 안에 함수를 포함해서 실행해보는 함수입니다.
const info = {
num1: 1,
name1: "함수",
word1: "실행",
num2: 2,
name2: "자바스크립트",
word2: "실행",
num3: 3,
name3: "제이쿼리",
word3: "실행",
result1: function () {
document.write(this.num1 + ", " + this.name1 + "가" + this.word1 + "되었습니다.");
},
result2: function () {
document.write(this.num2 + ", " + this.name2 + "가" + this.word2 + "되었습니다.");
},
result3: function () {
document.write(this.num3 + ", " + this.name3 + "가" + this.word3 + "되었습니다.");
console.log(this)
},
}
info.result1();
info.result2();
info.result3();
결과보기
2, 자바스크립트가 실행되었습니다.
3, 제이쿼리가 실행되었습니다.
17. 함수 유형 : 객체 생성자 함수
생성자 함수에 대해 알아보겠습니다.
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 info = new Func("1", "함수", "실행");
const info2 = new Func("2", "자바스크립트", "실행");
const info3 = new Func("3", "제이쿼리", "실행");
info.result();
info2.result();
info3.result();
결과보기
2, 자바스크립트가 실행되었습니다.
3, 제이쿼리가 실행되었습니다.
18. 함수 유형 : 프로토타입 함수
프로토 타입을 이용해서 함수를 추가 시키는 과정입니다.
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 info = new Func("1", "함수", "실행");
const info2 = new Func("2", "자바스크립트", "실행");
const info3 = new Func("3", "제이쿼리", "실행");
info.result();
info2.result();
info3.result();
결과보기
2, 자바스크립트가 실행되었습니다.
3, 제이쿼리가 실행되었습니다.
19. 함수 유형 : 객체 리터럴 함수
함수가 여러개일 경우 객체 리터럴 함수를 이용해서 추가하겠습니다.
function Func(num, name, word) {
this.num = num;
this.name = name;
this.word = word;
}
Func.prototype = {
result1 : function () {
document.write(this.num + ", " + this.name + "가" + this.word + "되었습니다.");
},
result2 : function () {
document.write(this.num + ", " + this.name + "가" + this.word + "되었습니다.");
},
result3 : function () {
document.write(this.num + ", " + this.name + "가" + this.word + "되었습니다.");
},
}
const info = new Func("1", "함수", "실행");
const info2 = new Func("2", "자바스크립트", "실행");
const info3 = new Func("3", "제이쿼리", "실행");
info.result1();
info2.result2();
info3.result3();
결과보기
2, 자바스크립트가 실행되었습니다.
3, 제이쿼리가 실행되었습니다.
20. 즉시 실행 함수
함수를 선언과 즉시 실행시킬 수 있습니다.
(function () {
// document.write("함수가 실행되었습니다.")
})();
(() =< {
// document.write("함수가 실행되었습니다.")
})();
결과보기
21. 파라미터 함수
디폴트 매개변수를 설정할 수 있습니다. 매개변수에 값이 없으면 설정한 값으로 설정됩니다.
function func(str = "함수가 실행되었습니다.") {
document.write(str);
}
// func();
결과보기
22. 아규먼트 함수
함수는 arguments라고 하는 특수한 배열을 갖습니다. 이는 함수의 매개변수를 담고 있습니다.
function func(a, b) {
document.write(arguments[0]);
document.write(arguments[1]);
}
// func("함수가 실행되었습니다.", "함수가 실행되었습니다.");
결과보기
함수가 실행되었습니다.
23. 재귀 함수
함수본인을 본인 내부에서 실행하는 형태입니다.
function func(num) {
if(num <= 1){
document.write('함수가 실행되었습니다.', num);
}
else {
document.write('함수가 실행되었습니다.', num);
func(num - 1);
}
}
func(10);
// function animation() {
// document.write('함수가 실행되었습니다.');
// requestAnimationFrame(animation);
// }
// animation();
결과보기
함수가 실행되었씁니다. 9
함수가 실행되었씁니다. 8
함수가 실행되었씁니다. 7
함수가 실행되었씁니다. 6
함수가 실행되었씁니다. 5
함수가 실행되었씁니다. 4
함수가 실행되었씁니다. 3
함수가 실행되었씁니다. 2
함수가 실행되었씁니다. 1
24. 콜백함수
다른 함수의 인수값으로 함수를 전달합니다.
function func() {
document.write("함수가 실행되었습니다.1");
}
function callback(str) {
document.write("함수가 실행되었습니다.2");
str();
}
callback(func);
결과보기
함수가 실행되었습니다.1
25. 콜백함수 : 반복문
다른 함수의 인수값으로 함수를 전달합니다.
function func(index) {
document.write("함수가 실행되었습니다." + index);
}
function callback(num) {
for(let i = 1; i <= 10; i++){
num(i)
}
}
callback(func);
결과보기
함수가 실행되었습니다.2
함수가 실행되었습니다.3
함수가 실행되었습니다.4
함수가 실행되었습니다.5
함수가 실행되었습니다.6
함수가 실행되었습니다.7
함수가 실행되었습니다.8
함수가 실행되었습니다.9
함수가 실행되었습니다.10
26. 콜백함수 : 동기 / 비동기
비동기 상황의 콜백함수를 살펴보겠습니다.
function funcA(callback) {
setTimeout(() =< {
console.log("funcA가 실행되었습니다.");
callback();
}, 1000);
}
function funcB() {
console.log("funcB가 실행되었습니다.");
}
// funcA(function() {
// funcB();
// });
funcA(funcB);
결과보기
funcB가 실행되었습니다.
27.
비동기 상황의 콜백함수를 살펴보겠습니다.
결과보기
funcB가 실행되었습니다.
28. 내부함수 : 스코프, 클로저
함수안의 함수, 내부함수를 살펴보죠
function func() {
function funcA() {
document.write("함수가 실행되었습니다.");
};
funcA();
function funcB(){
document.write("함수가 실행되었습니다.");
};
funcB();
}
func();
결과보기
함수가 실행되었습니다.
29. 클래스
함수의 집합체
class Study {
constructor(num, name, job) {
this.num = num;
this.name = name;
this.job = job;
}
result() {
document.write(`${this.num}. 내 이름은 ${this.name} 이고, 직업은 ${this.job} 입니다.`);
}
}
const info1 = new Study(1, 'kim', 'millionaire');
const info2 = new Study(2, 'lee', 'billionaire')
info1.result();
info2.result();
결과보기
2. 내 이름은 lee 이고, 직업은 billionaire 입니다.
30. 클래스 - 상속
함수의 집합체
class Study {
constructor(num, name, job) {
this.num = num;
this.name = name;
this.job = job;
}
result() {
document.write(`${this.num}. 내 이름은 ${this.name} 이고, 직업은 ${this.job} 입니다.`);
}
}
class Study2 extends Study {
constructor(num, name, job, age) {
super(num, name, job);
this.age = age;
}
result2() {
document.write(`${this.num}. 내 이름은 ${this.name} 이고, 직업은 ${this.job} 입니다. 나이는 ${this.age}살 이에요.`);
}
}
const info1 = new Study2(1, 'kim', 'billionaire', 27);
info1.result();
info1.result2();
결과보기
1. 내 이름은 kim 이고, 직업은 billionaire 입니다. 나이는 27살 이에요.