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. 화살표 함수(선언적 함수)
선언적함수의 화살표함수 형태이다.
{
// function func(){
// document.write("함수가 실행되었습니다.5");
// }
// func();
func = () => {
document.write("함수가 실행되었습니다.5");
}
func();
// func = () => document.write("함수가 실행되었습니다.5");
// func();
}
결과보기
06. 화살표 함수(익명 함수)
익명 함수의 화살표함수 형태이다.
{
//const func=()=>{
// document.write("함수가 실행되었습니다.6");
// }
// func();
const func = () =>{
document.write("함수가 실행되었습니다.6");
}
func();
// const func = () =>document.write("함수가 실행되었습니다.6");
// func();
}
결과보기
07. 화살표 함수(매개변수 함수)
매개변수 함수의 화살표함수 형태이다.
{
// let 생략
// function func(str){
// document.write(str);
// func("함수가 실행되었습니다.7");
func = (str) =>{document.write(str);
} ;
func("함수가 실행되었습니다.7");
// func() = (str) =>document.write(str);
// func("함수가 실행되었습니다.7");
// const있어도 ㄱㅊ
// 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. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 + 괄호 생략
09번의 형태에서 괄호까지 생략해준 형태이다.
{
const func = str => {
return str;
}
document.write(func("함수가 실행되었습니다.10"));
}
결과보기
11. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴생략
10번의 형태에서 리턴까지 생략해준 형태이다.
{
const func = str => str;
document.write(func("함수가 실행되었습니다.11"));
}
결과보기
12. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴생략
11번에서 좀더 축약해준 형태이다.
{
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 youCom1 = "실행";
func(youNum1, youStr1, youCom1);
func(youNum2, youStr2, youCom1);
func(youNum3, youStr3, youCom1);
}
결과보기
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. 즉시 실행 함수
{
(() =>{
document.write("함수실행");
})();
}
결과보기
21. 파라미터함수
{
// 파라미터함수
function func(str = "함수가 실행"){
document.write(str);
}
func();
}
결과보기
22. arguments 함수
{
// auguments함수
function func(a, b){
document.write(arguments[0])
document.write(arguments[1])
}
func("함수가실행", "함수가 실행");
}
결과보기
23. 재귀함수 : 자기 자신을 호출
// 23. 재귀함수
{
// 반복적으로
function func(num){
if( num<= 1 ){
document.write("함수가 실행되었습니다." + num);
} else {
document.write("함수가 실행되었습니다." + num);
func(num - 1);
}
}
func(10);
// 애니메이션
// function func(){
// document.write("함수가 실행되었습니다.");
// requestAnimationFrame(animation);
// }
// animation();
}
결과보기
24. 콜백함수 : 다른 함수에 인수로 넘겨지는 함수
// 24. 콜백함수
{
function func(){
document.write("함수가 실행되었습니다.2");
}
function callback(str){
document.write("함수가 실행되었습니다.1");
str();
}
// 재귀 : 동시에 여러개 실행
// 콜백 : 첫번째 함수가 실행 -> 두번째 함수가 실행
callback(func);
}
결과보기
25. 콜백함수 반복문
// 25. 콜백함수 10번반복
{
function func(index){
document.write("함수가 실행되었습니다." + index);
}
function callback(num){
for( let i=1; i<=10; i++){
num(i);
}
}
callback(func);
}
결과보기
26. 콜백함수 : 동기/비동기
// 26. 콜백 함수 : 동기/비동기
{
function funcA() {
document.write("funcA가 실행되었습니다.");
}
function funcB() {
document.write("funcB가 실행되었습니다.");
}
funcA();
funcB();
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(callback) {
setTimeout(() => {
console.log("funcD가 실행되었습니다.");
}, 1000);
}
funcA(function(){
funcB(function(){
funcC(function(){
funcD();
});
});
});
}
결과보기
27. promise 함수
결과보기
28. 내부 함수 : 스코프, 클로져
// 28. 스코프, 클로져
{
function func(){
function funcA(){
document.write("함수가 실행되었습니다.")
};
funcA();
function funcB(){
document.write("함수가 실행되었습니다.")
};
funcB();
}
func();
}
결과보기
29. 클래스
// 29
{
class study {
constructor(num, name, job){
this.num = num;
this.name = name;
this.job = name;
}
result(){
document.write(this.num + ". 내 이름은" + this.name + "이며, 직업은" + this.job + "입니다.");
}
}
const info1 = new study("1", "웹쓰", "웹퍼블리셔");
const info2 = new study("2", "웹스토리보이", "프론트앤드 개발자");
info1.result();
info2.result();
}
결과보기
30. 클래스 상속
// 30 클래스 상속
{
class study {
constructor(num, name, job){
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;
}
result2(){
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();
}