01. 선언적 함수
선언적 함수는 함수를 선언할 때 이름을 붙여주는 함수를 말한다.
즉, 따로 변수에 넣어주지 않고 선언할 대 붙여준 이름으로 호출하면 된다.
function func(){
document.write("함수가 실행되었습니다.1
") //브라우저 객체
}
func();
결과 보기
02. 익명 함수
익명함수는 말그대로 이름이 없는 함수이다.
따라서 익명함수를 선언하고 사용하기 위해서는 변수에 넣어서 사용하여야 한다.
선언적 함수는 웹브라우저가 가장 먼저 읽고,
익명함수는 그 뒤에 코드를 차례로 읽을 때 읽는다는 차이점이 있다.
const func = function(){
document.write("함수가 실행되었습니다.2")
}
func();
결과 보기
03. 매개변수 함수
함수를 호출할 때 (소괄호)안에 값이나 변수등의
인자값을 주입하는것을 매개변수라고 한다.
함수를 호출하는 쪽과 정의된 함수를 연결하는 매개가 되는 변수이므로
매개변수라는 이름을 사용한 것이다.
function func(str){
document.write(str)
}
func("함수가 실행되었습니다.3");
결과 보기
04. 리턴값 함수
return 키워드는 함수가 실행되는 도중에 함수를 호출한 곳으로 돌아가라는 의미이다. 따라서 return 키워드를 사용하면 값을 지정하지 않아도 함수를 호출한 곳으로 돌아간다.
function func(){
const str = "함수가 실행되었습니다.4
";
return str;
}
document.write(func());
결과 보기
05. 화살표 함수 : 선언적 함수
화살표 함수 표현(arrow function expression)은 전통적인 함수표현(function)의 간편한 대안입니다.
하지만, 화살표 함수는 몇 가지 제한점이 있고 모든 상황에 사용할 수는 없습니다.
ECMAscript6(ES6)에서 화살표 함수, let, const 기능이 추가 되었다.
//function func(){
// document.write("함수가 실행되었습니다.5
")
// }
// func();
// func = () => {
// document.write("함수가 실행되었습니다.5
");
// }
// func();
func = () => document.write("함수가 실행되었습니다.5
");
func();
결과 보기
06. 화살표 함수 : 익명 함수
익명 함수를 화살표 함수로 표현할 수 있다.
//const func = function(){
// document.write("함수가 실행되었습니다.6
");
// }
// func();
// const func = () => {
// document.write("함수가 실행되었습니다.6
");
// }
// func();
const func = () => document.write("함수가 실행되었습니다.6
");
func();
결과 보기
07. 화살표 함수 : 매개변수 함수
매개변수 함수를 화살표 함수로 표현할 수 있다.
//function func(str){
// document.write(str)
// }
// func("함수가 실행되었습니다.7");
// func = (str) => document.write(str);
func = str => document.write(str);
func("함수가 실행되었습니다.7");
결과 보기
08. 화살표 함수 : 리턴값 함수
리턴값 함수를 화살표 함수로 표현할 수 있다.
// function func(){
// const str = "함수가 실행되었습니다.8";
// return str
// }
// document.write(func());
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", "제이쿼리", "실행");
결과 보기
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 youCom = "실행";
func(youNum1, youStr1, youCom);
func(youNum2, youStr2, youCom);
func(youNum3, youStr3, youCom);
// 1. 함수가실행되었습니다.
// 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);
결과 보기
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();
결과 보기
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 info1 = new func("1", "함수", "실행");
const info2 = new func("2", "자바스크립트", "실행");
const info3 = new func("3", "제이쿼리", "실행");
//실행
info1.result();
info2.result();
info3.result();
결과 보기
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();
결과 보기
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();
결과 보기
20. 즉시 실행 함수
---
(function func(){
document.write("함수실행")
}());
//화살표함수
(() => {
document.write("함수실행")
})();
결과보기
2. 자바스크립트가 실행되었습니다.
3. 제이쿼리가 실행되었습니다.
21. 파라미터 함수
---
function func(str){
document.write(str)
}
func("함수가 실행되었습니다.")
function func(str = "함수가 실행되었습니다."){
document.write(str)
}
func()
결과보기
2. 자바스크립트가 실행되었습니다.
3. 제이쿼리가 실행되었습니다.
22. 아규먼트 함수
---
function func(a, b){
document.write(arguments[0]);
document.write(arguments[1]);
}
func("함수가 실행되었습니다.", "함수가 실행되었습니다.");
결과보기
2. 자바스크립트가 실행되었습니다.
3. 제이쿼리가 실행되었습니다.
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();
결과 보기
24. 콜백 함수 : 다른 함수에 인수로 넘겨지는 함수
//재귀함수 : 동시에 여러개 실행
//콜백함수 : 첫번째 함수가 실행 -> 두번째 함수가 실행
function func(){
document.write("함수가 실행되었습니다.2");
}
function callback(str){
document.write("함수가 실행되었습니다.1");
str();
}
callback(func);
결과 보기
25. 콜백 함수 : 반복문
//재귀함수 : 동시에 여러개 실행
//콜백함수 : 첫번째 함수가 실행 -> 두번째 함수가 실행
function func(index){
document.write("함수가 실행되었습니다." + index);
}
function callback(num){
for(let i=1; <=10; i++){
num(i);
}
}
callback(func);
결과 보기
26. 콜백 함수 : 동기/비동기
{
// function funcA(){
// setTimeout(()=>{
// console.log("funcA가 실행되었습니다.
");
// },1000);
// }
// function funcB(){
// console.log("funcB가 실행되었습니다.
");
// }
// funcA();
// funcB();
//b
//a
// function funcA(callback){
// //api를 먼저 실행하기 위해
// 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(callback){
setTimeout(() => {
console.log("funcD가 실행되었습니다.
");
callback();
},1000);
}
funcA(function(){
funcB(function(){
funcC(function(){
funcD();
});
});
});
}
결과 보기
funcB가 실행되었습니다.
funcC가 실행되었습니다.
funcD가 실행되었습니다.
27. promise
결과 보기
28. 내부 함수 : 스코프,클로져
function func(){
function funcA(){
let a = "0";
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", "웹스토리보이", "프론트앤드 개발자");
info1.result();
info2.result();
결과 보기
30. 클래스 상속
---
class study{
constructor(num, name){
this.num = num;
this.name = name;
this.job = name;
}
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;
}
result(){
document.write(this.num + ",내 이름은 "+this.name+"이며, 직업은"+this.job+"이며, 나이는"+this.age+"살 입니다.");
};
}
const info1 = new study("1", "웹쓰", "웹퍼블리셔");
const info2 = new study2("2", "웹쓰", "웹퍼블리셔", 100);
info1.result();
info2.result();
info2.result2();