01. 선언적 함수
일반적인 방식. 함수를 선언할 때 이름을 붙여주는 함수를 말합니다.
function func(){
document.write("함수가 실행되었습니다.1");
}
func();
결과보기
02. 익명 함수
코드명에 함수코드를 저장하는 방식
const func = function(){
document.write("함수가 실행되었습니다.2");
}
func();
결과보기
03. 매개변수 함수
호출할 때 인수로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수. 함수의 인수(argument)는 함수가 호출될 때 함수로 값을 전달해주는 변수를 가리킵니다.
function func(str){
document.write(str);
}
func("함수가 실행되었습니다.3");
결과보기
04. 리턴값 함수
함수가 어떠한 기능을 수행하고 그 결과를 호출한 곳으로 돌려주는 값을 말합니다. 함수가 기능을 수행하고 돌려줄 값이 있으면 return 명령을 사용합니다.
function func(){
const str = "함수가 실행되었습니다.4";
return str;
}
document.write(func());
결과보기
05. 화살표 함수 : 선언적 함수
ECMAscript6(es6)때 추가된 화살표 함수'==>'는 함수의 표현 방식을 좀 더 간단히 표현합니다.
func = () => document.write("함수가 실행되었습니다.5");
func();
결과보기
06. 화살표 함수 : 익명 함수
화살표 함수는 함수의 표현 방식을 좀 더 간단히 표현합니다.
const func = () => document.write("함수가 실행되었습니다.6");
func();
결과보기
07. 화살표 함수 : 매개변수 함수
화살표 함수는 함수의 표현 방식을 좀 더 간단히 표현합니다.
func = str => document.write(str);
func("함수가 실행되었습니다.7");
결과보기
08. 화살표 함수 : 리턴값 함수
화살표 함수는 함수의 표현 방식을 좀 더 간단히 표현합니다.
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. 화살표 함수 : 익명 함수 + 매개 변수 + 리턴값 + 괄호 생략 + 리턴 생략
화살표 함수는 함수표현을 간단하게 할 수 있습니다.
익명 함수, 매개 변수, 리턴값 사용할 수 있고, 괄호()생략에 더불어 리턴(return)도 생략 가능합니다.
const func = str => str; //리턴 생략가능 + 중괄호 생략
document.write(func("함수가 실행되었습니다.11
"));
결과보기
12. 화살표 함수 : 선언적 함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴 생략
화살표 함수는 함수표현을 간단하게 할 수 있습니다.
선언적 함수, 매개 변수, 리턴값 사용할 수 있고, 괄호()생략에 더불어 리턴(return)도 생략 가능합니다.
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 youStr4 = "실행";
func(youNum1, youStr1, youStr4);
func(youNum2, youStr2, youStr4);
func(youNum3, youStr3, youStr4);
결과보기
2. 자바스크립트가 실행 되었습니다.
3. 제이쿼리가 실행 되었습니다.
15. 함수 유형 : 함수와 배열, 객체를 이용한 형태
함수와 배열, 객체를 이용해 함수를 재활용 할 수 있습니다.
function func(num, str1, str2){
document.write(num + ". " + str1 + "가 " + str2 + "되었습니다.");
}
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. 제이쿼리가 실행 되었습니다.
16. 함수 유형 : 객체 안에 변수와 함수를 이용한 형태
객체 안에 변수와 함수를 저장할 수 있지만, 함수의 재활용은 안되는 형태입니다.
const info = {
num1 : 1,
name1 : "함수",
word1 : "실행",
num2 : 2,
name2 : "자바스크립트",
word2 : "실행",
num3 : 3,
name3 : "제이쿼리",
word3 : "실행",
result1 : function(){
document.write(info.num1 + ". " + info.name1 + "가 " + info.word1 + "되었습니다.");
},
result2 : function(){
document.write(info.num2 + ". " + info.name2 + "가 " + info.word2 + "되었습니다.");
},
result3 : function(){
document.write(info.num3 + ". " + info.name3 + "가 " + info.word3 + "되었습니다.");
}
}
info.result1();
info.result2();
info.result3();
결과보기
2. 자바스크립트가 실행 되었습니다.
3. 제이쿼리가 실행 되었습니다.
17. 함수 유형 : 객체 생성자 함수
this를 사용해 함수를 재활용 할 수 있도록 한 현태입니다.
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 생략 this로 재활용, 필요없는 함수도 실행됨. 메모리 너무 차지해서 함수 밖으로
//인스턴스 생성 //인스턴스를 꼭 생성해 주어야 실행이 된다.
const info1 = new func("1", "함수", "실행");
const info2 = new func("2", "자바스크립트", "실행");
const info3 = new func("3", "제이쿼리", "실행");
//실행
info1.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 info1 = new func("1", "함수", "실행");
const info2 = new func("2", "자바스크립트", "실행");
const info3 = new func("3", "제이쿼리", "실행");
//실행
info1.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 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(){
document.write("함수가 실행되었습니다.")
}());
(() => {
document.write("함수가 실행되었습니다.")
})();
결과보기
함수가 실행되었습니다. 함수가 실행되었습니다.
21. 파라미터 함수
function func(str = "함수가 실행되었습니다.") {
document.write(str)
}
func()
결과보기
함수가 실행되었습니다.
22. 아규먼트
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);
}
fuanimationnc()
결과보기
함수가 실행되었습니다.10함수가 실행되었습니다.9함수가 실행되었습니다.8함수가 실행되었습니다.7함수가 실행되었습니다.6함수가 실행되었습니다.5함수가 실행되었습니다.4함수가 실행되었습니다.3함수가 실행되었습니다.2함수가 실행되었습니다.1
24. 콜백함수 : 다른 함수에 인수로 넘겨지는 함수
첫번째 함수 실행 후 다음 함수 실행
{
function func() {
document.write("함수가 실행되었습니다.1");
}
function callback(str) {
document.write("함수가 실행되었습니다.2");
str();
}
callback(func); //콜백 먼저 그다음 func 실행
}
결과보기
함수가 실행되었습니다.2함수가 실행되었습니다.1
25. 콜백함수 : 반복문
{
function func(index) {
document.write("함수가 실행되었습니다." + index);
}
function callback(num) {
for (let i = 1; i <= 10; i++) {
num(i)
}
}
callback(func);
}
결과보기
함수가 실행되었습니다.1함수가 실행되었습니다.2함수가 실행되었습니다.3함수가 실행되었습니다.4함수가 실행되었습니다.5함수가 실행되었습니다.6함수가 실행되었습니다.7함수가 실행되었습니다.8함수가 실행되었습니다.9함수가 실행되었습니다.10
26. 콜백함수 : 동기/비동기
{
// function funcA() {
// document.write("funcA가 실행되었습니다.
");
// }
// function funcB() {
// document.write("funcB가 실행되었습니다.
");
// }
// funcA();
// funcB();
// a
// b
// function funcA() {
// setTimeout(() => {
// console.log("funcA가 실행되었습니다.
");
// }, 1000);
// }
// function funcB() {
// console.log("funcB가 실행되었습니다.
");
// }
// funcA();
// funcB();
// b
// a
// function funcA(callback) {
// setTimeout(() => {
// console.log("funcA가 실행되었습니다.
");
// callback();
// }, 1000);
// }
// function funcB() {
// console.log("funcB가 실행되었습니다.
");
// }
// funcA(function () {
// funcB();
// });
// a
// b
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();
});
});
});
}
결과보기
funcA가 실행되었습니다.
funcB가 실행되었습니다.
funcC가 실행되었습니다.
funcD가 실행되었습니다.
27. 콜백함수 : 반복문
결과보기
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", "김이형", "웹퍼블리셔");
const info2 = new study("2", "YH", "프론트엔드 개발자");
info1.result();
info2.result();
}
결과보기
1. 내 이름은 김이형이며, 직업은 웹퍼블리셔입니다.
2. 내 이름은 YH이며, 직업은 프론트엔드 개발자입니다.
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 study("1", "김이형", "웹퍼블리셔");
const info2 = new study2("2", "YH", "프론트엔드 개발자", 100);
info1.result();
info2.result();
info2.result2();
}
결과보기
1. 내 이름은 김이형이며, 직업은 웹퍼블리셔입니다.
2. 내 이름은 YH이며, 직업은 프론트엔드 개발자입니다.
2. 내 이름은 YH이며, 직업은 프론트엔드 개발자이며 나이는 100살 입니다.