01. 선언적 함수
선언적 함수는 함수를 선언할 때 이름을 붙여주는 함수를 말합니다.
즉, 따로 변수에 넣어주지 않고 선언할 대 붙여준 이름으로 호출하면 됩니다.
{
function func() {
document.write("함수가 실행되었습니다.");
}
func();
}
결과보기
02. 익명 함수
익명함수는 말그대로 이름이 없는 함수입니다. 따라서 익명함수를 선언하고 사용하기 위해서는 변수에 넣어서 사용하여야 합니다.
const func = function() {
document.write("함수가 실행되었습니다.");
}
func();
결과보기
03. 매개변수 함수
함수의 매개변수(parameter)란 함수를 호출할 때 인수로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수입니다.
또한, 함수의 인수(argument)란 함수가 호출될 때 함수로 값을 전달해주는 변수를 가리킵니다.
function func(str) { //변수, 배열, 객체도 가능
document.write(str);
}
func("함수가 실행되었습니다."); //변수, 배열, 객체도 가능
결과보기
04. 리턴값 함수
리턴값이란 함수가 어떠한 기능을 수행하고 그 결과를 호출한 곳으로 돌려주는 값을 말합니다.
function func() {
const str = "함수가 실행되었습니다."
return str;
}
document.write(func());
결과보기
05. 화살표 함수
화살표 함수 표현(arrow function expression)은 전통적인 함수표현(function)의 간편한 대안입니다.
하지만, 화살표 함수는 몇 가지 제한점이 있고 모든 상황에 사용할 수는 없습니다.
*this나 super에 대한 바인딩이 없고, methods 로 사용될 수 없습니다.
*new.target키워드가 없습니다.
*일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없습니다.
*생성자(Constructor)로 사용할 수 없습니다.
*yield를 화살표 함수 내부에서 사용할 수 없습니다.
// 선언적 함수
// function func() {
// document.write("함수가 실행되었습니다.");
// }
// 화살표함수
// func = () => { document.write("함수가 실행되었습니다."); }
// 화살표함수(중괄호 생략)
func = () => document.write("함수가 실행되었습니다.");
func();
결과보기
06. 화살표 함수 (익명 함수)
화살표 함수는 익명 함수로 사용할 수 있습니다.
// 익명 함수
// const func = function() {
// document.write("함수가 실행되었습니다.");
// }
// 화살표 익명함수
// const func = () => { document.write("함수가 실행되었습니다."); }
// 화살표 익명함수(중괄호 생략)
const func = () => document.write("함수가 실행되었습니다.");
func();
결과보기
07. 화살표 함수 (매개변수 함수)
화살표 함수는 매개변수 함수로 사용할 수 있습니다.
let result = "함수가 실행되었습니다"
// 선언적 매개변수 함수
// function func(str) {
// document.write(str);
// }
// 화살표 매개변수 함수
// func = (str) => { document.write(str); }
// 화살표 매개변수 함수(중괄호 생략)
// func = (str) => document.write(str);
// 화살표 매개변수 함수(매개변수 괄호 생략)
// func = str => document.write(str);
// 익명 매개변수 함수
// const func = function(str) {
// document.write(str);
// }
// 익명 화살표 매개변수 함수
// const func = (str) => { document.write(str); }
// 익명 화살표 매개변수 함수(중괄호 생략)
// const func = (str) => document.write(str);
// 익명 화살표 매개변수 함수(매개변수 괄호 생략)
const func = str => document.write(str); // 매개변수가 두개 이상이면 생략안됨.
func(result);
결과보기
08. 화살표 함수 (리턴값 함수)
화살표 함수는 리턴값 함수로 사용할 수 있습니다.
// 선언적 리턴값 함수
// function func() {
// let str = "함수가 실행되었습니다.";
// return str;
// }
// 화살표 리턴값 함수
// func = () => {
// let str = "함수가 실행되었습니다.";
// return str;
// }
// 익명 리턴값 함수
// const func = function() {
// let str = "함수가 실행되었습니다.";
// return str;
// }
// 익명 화살표 리턴값 함수
const func = () => { // 실행문이 두줄이상이 되면 중괄호를 써야한다.
let 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. 함수 유형 : 함수와 매개변수를 이용한 형태
함수는 매개변수를 이용하여 재활용을 할수 있습니다.
let result = document.querySelector(".sample13_result").innerHTML;
function func(num, str1, str2) {
result.innerHTML += num + ", " +str1 + "가 "+ str2 + " 되었습니다.";
}
func("1", "함수", "실행");
func("2", "자바스크립트", "실행");
func("3", "제이쿼리", "실행")
결과보기
2, 자바스크립트가 실행 되었습니다.
3, 제이쿼리가 실행 되었습니다.
14. 함수 유형 : 함수와 변수를 이용한 형태
함수와 변수를 이용하여 함수를 재활용할수있습니다.
let result = document.querySelector(".sample14_result").innerHTML;
function func(num1, str1, com) {
result.innerHTML += num1 + ", " +str1 + "가 "+ com + " 되었습니다.";
}
const youNum1 = 1;
const youNum2 = 2;
const youNum3 = 3;
const youStr1 = '함수';
const youStr2 = '자바스크립트';
const youStr3 = '제이쿼리';
const youCom = '실행';
func(youNum1, youStr1 ,youCom);
func(youNum2, youStr2 ,youCom);
func(youNum3, youStr3 ,youCom);
결과보기
2, 자바스크립트가 실행 되었습니다.
3, 제이쿼리가 실행 되었습니다.
15. 함수 유형 : 함수와 변수를 이용한 형태
함수와 변수를 이용하여 함수를 재활용할수있습니다.
let result = document.querySelector(".sample15_result").innerHTML;
function func(num1, str1, com) {
result.innerHTML += num1 + ", " +str1 + "가 "+ com + " 되었습니다.";
}
const youNum1 = 1;
const youNum2 = 2;
const youNum3 = 3;
const youStr1 = '함수';
const youStr2 = '자바스크립트';
const youStr3 = '제이쿼리';
const youCom = '실행';
func(youNum1, youStr1 ,youCom);
func(youNum2, youStr2 ,youCom);
func(youNum3, youStr3 ,youCom);
결과보기
2, 자바스크립트가 실행 되었습니다.
3, 제이쿼리가 실행 되었습니다.
16. 함수 유형 : 객체 안에 변수하고 함수를 이용한 형태
객체 안에 변수를 설정하고 함수를 이용하여 좀더 재사용을 편하게 했습니다.
let result = document.querySelector(".sample15_result").innerHTML;
function func(num, name, com) {
result.innerHTML += num + ", " +name + "가 "+ com + " 되었습니다.";
}
const info = [
{
num : 1,
name : "함수",
com : '실행'
},
{
num : 2,
name : "자바스크립트",
com : '실행'
},
{
num : 3,
name : "제이쿼리",
com : '실행'
}
]
func(info[0].num, info[0].name, info[0].com);
func(info[1].num, info[1].name, info[1].com);
func(info[2].num, info[2].name, info[2].com);
결과보기
2, 자바스크립트가 실행 되었습니다.
3, 제이쿼리가 실행 되었습니다.
17. 함수 유형 : 객체 생성자 함수
객체안에 생성자 함수를 생성하여 좀더 편하게 재사용을 할수 있습니다.
let result = document.querySelector(".sample17_result").innerHTML;
function func(num, name, word) {
this.num = num;
this.name = name;
this.word = word;
this.result = function() {
result.innerHTML += 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, 제이쿼리가 실행 되었습니다.
18. 함수 유형 : 함수 유형 : 프로토타입 함수
생성자 함수의 메모리 사용 단점을 프로토타입 함수로 대체하여 메모리 사용량을 줄였습니다.
let result = document.querySelector(".sample18_result").innerHTML;
function func(num, name, word) {
this.num = num;
this.name = name;
this.word = word;
func.prototype.result = function() {
result.innerHTML += 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, 제이쿼리가 실행 되었습니다.
19. 함수 유형 : 함수 유형 : 객체 리터럴 함수
프로토타입 함수가 많아질수록 복잡해지기때문에 객체로 묶어서 사용하기 편리하게 했습니다.
let result = document.querySelector(".sample19_result").innerHTML;
function func(num, name, word) {
this.num = num;
this.name = name;
this.word = word;
func.prototype = {
result1 : function() {
result.innerHTML += this.num + ", " + this.name + "가 "+ this.word + " 되었습니다.";
},
result2 : function() {
result.innerHTML += this.num + ", " + this.name + "가 "+ this.word + " 되었습니다.";
},
result2 : function() {
result.innerHTML += this.num + ", " + this.name + "가 "+ this.word + " 되었습니다.";
}
}
}
//인스턴스 생성
const info1 = new func("1", "함수", "실행");
const info2 = new func("2", "자바스크립트", "실행");
const info3 = new func("3", "제이쿼리", "실행");
info1.result1();
info2.result2();
info3.result3();
결과보기
2, 자바스크립트가 실행 되었습니다.
3, 제이쿼리가 실행 되었습니다.
20. 즉시실행함수
프로토타입 함수가 많아질수록 복잡해지기때문에 객체로 묶어서 사용하기 편리하게 했습니다.
(function func(){
console.log("함수 가실행 되었습니다.");
})();
(( )=> {
console.log("함수가 실행 되었습니다.");
})();
결과보기
함수가 실행 되었습니다.
21. 파라미터 함수
프로토타입 함수가 많아질수록 복잡해지기때문에 객체로 묶어서 사용하기 편리하게 했습니다.
function func( str = "함수가 실행 되었습니다.") {
console.log(str);
}
func();
결과보기
22. 아규먼트 함수
프로토타입 함수가 많아질수록 복잡해지기때문에 객체로 묶어서 사용하기 편리하게 했습니다.
function func(a, b) {
console.log(arguments[0]);
console.log(arguments[1]);
}
func("함수가 실행되었습니다.", "함수가 실행되었을까요?");
결과보기
함수가 실행되었을까요?
23. 재귀 함수
함수가 자신을 다시 호출하는 구조로 만들어진 함수입니다.
재귀함수는 종료조건이 있어야 하며, 종료조건을 설정해주지 않으면 무한 반복을 하게됩니다.
재귀함수로 작성이 되는 코드는 반복문으로도 작성할 수 있습니다.
//반복적으로
function func(num) {
if (num <= 1) {
console.log("함수가 실행되었습니다. " + num);
} else {
console.log("함수가 실행되었습니다. " + num);
func(num - 1);
}
}
func(10);
//애니메이션
function animation() {
console.log("함수가 실행되었습니다.");
requestAnimationFrame(animation); //1초에 60번 실행
}
// animation();
결과보기
함수가 실행되었습니다. 9
함수가 실행되었습니다. 8
함수가 실행되었습니다. 7
함수가 실행되었습니다. 6
함수가 실행되었습니다. 5
함수가 실행되었습니다. 4
함수가 실행되었습니다. 3
함수가 실행되었습니다. 2
함수가 실행되었습니다. 1
24. 콜백 함수
다른 함수의 인자로써 넘겨진 후 특정 이벤트에 의해 호출되는 함수입니다.
function func() {
console.log("콘솔이 실행되었습니다.1");
}
function callback(str) {
console.log("콘솔이 실행되었습니다.2");
str();
}
callback(func);
결과보기
함수가 실행되었습니다. 2
25. 콜백 함수 : 반복문
다른 함수의 인자로써 넘겨진 후 특정 이벤트에 의해 호출되는 함수입니다.
function callback(num) {
console.log("hi");
for (let i = 1; i <= 10; i++) {
num(i);
}
console.log("hi");
}
callback(func);
결과보기
1
2
3
4
5
6
7
8
9
10
hi
26. 콜백 함수 : 동기/비동기
동기 방식은 서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있습니다.
즉 A작업이 모두 진행 될때까지 B작업은 대기해야합니다.
비동기 방식은 반대로 요청을 보냈을 때 응답 상태와 상관없이 다음 동작을 수행 할 수 있습ㄴ디ㅏ.
즉 A작업이 시작하면 동시에 B작업이 실행된다. A작업은 결과값이 나오는대로 출력됨니다.
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();
});
});
});
결과보기
27. promise 함수
결과보기
28. 내부 함수 : 스코프, 클로저
function func() {
function funcA() {
console.log("함수가 실행되었습니다.");
}
funcA();
function funcB() {
console.log("함수가 실행되었습니다.");
}
funcB();
}
func();
결과보기
함수B가 실행되었습니다.
29. 클래스 함수
class study {
constructor(num, name, job) {
this.num = num;
this.name = name;
this.job = job;
}
result() {
console.log(this.num + "이름 : " + this.name + "직업 : " + this.numjob);
}
}
const info1 = new study("1", "중호", "개발자");
const info2 = new study("2", "호중", "퍼블리셔");
info1.result();
info2.result();
결과보기
2 이름 : 호중 직업 : 퍼블리셔
30. 클래스 함수 : 상속
class study {
constructor(num, name, job) {
this.num = num;
this.name = name;
this.job = job;
}
result() {
console.log(this.num + " 이름 : " + this.name + " 직업 : " + this.job + "");
}
}
class study2 extends study {
constructor(num, name, job, age) {
super(num, name, job, age);
this.age = age;
}
result2() {
console.log(this.num + " 이름 : " + this.name + " 직업 : " + this.job + " 나이 : " + this.age + "");
}
}
const info1 = new study("1", "중호", "개발자");
const info2 = new study2("2", "호중", "퍼블리셔", "26");
info1.result();
info2.result();
info2.result2();
결과보기
2 이름 : 호중 직업 : 퍼블리셔
2 이름 : 호중 직업 : 퍼블리셔 나이 : 26