- 01. 선언적 함수
- 02. 익명 함수
- 03. 매개변수 함수
- 04. 리턴값 함수
- 05. 화살표 함수 : 선언적 함수
- 06. 화살표 함수 : 익명 함수
- 07. 화살표 함수 : 매개변수 함수
- 08. 화살표 함수 : 리턴값 함수
- 09. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값
- 10. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 + 괄호 생략
- 11. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴 생략
- 12. 화살표 함수 : 선언적 함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴 생략
- 13. 내부 함수
- 14. 즉시실행 함수
- 15. 파라미터 함수
- 16. 아규먼트 함수
- 17. 재귀 함수
- 18. 콜백 함수 : 다른 함수에 인수로 넘겨지는 함수
- 19. 콜백 함수 : 반복문
- 20. 콜백 함수 : 동기/비동기
- 21. 함수 유형 : 함수와 매개변수를 이용한 형태
- 22. 함수 유형 : 함수와 변수를 이용한 형태
- 23. 함수 유형 : 함수와 배열, 객체를 이용한 형태
- 24. 함수 유형 : 객체 안에 변수와 함수를 이용한 형태
- 25. 함수 유형 : 객체생성자 함수
- 26. 함수 유형 : 프로토타입 함수
- 27. 함수 유형 : 객체 리터럴 함수
- 28. 클래스 : 함수의 집합체
- 29. 클래스 상속
01. 선언적 함수
{
function func(){
document.write("함수가 실행되었습니다.1 ");
}
func();
}
결과보기
함수가 실행되었습니다.1
02. 익명 함수
{
const func = function(){
document.write("함수가 실행되었습니다.2 ");
}
func();
}
결과보기
함수가 실행되었습니다.2
03. 매개변수 함수
{
function func(str){
document.write(str);
}
func("함수가 실행되었습니다.3");
}
결과보기
함수가 실행되었습니다.3
04. 리턴값 함수
{
function func(){
const str = "함수가 실행되었습니다.4 ";
return str;
}
document.write(func());
}
결과보기
함수가 실행되었습니다.4
05. 화살표 함수 : 선언적 함수
{
func = () => {
document.write("함수가 실행되었습니다.5");
}
func();
}
결과보기
함수가 실행되었습니다.5
06. 화살표 함수 : 익명 함수
{
const func = () => {
document.write("함수가 실행되었습니다.6");
};
func();
}
결과보기
함수가 실행되었습니다.6
07. 화살표 함수 : 매개변수 함수
{
func = (str) => {
document.write(str);
}
func("함수가 실행되었습니다.7");
}
결과보기
함수가 실행되었습니다.7
08. 화살표 함수 : 리턴값 함수
{
func = () => {
const str = "함수가 실행되었습니다.8"
return str;
}
document.write(func());
}
결과보기
함수가 실행되었습니다.8
09. 화살표 함수 : 익명함수 + 매개변수 + 리턴값
{
const func = (str) => {
return str;
};
document.write(func("함수가실행되었습니다.9"));
}
결과보기
함수가실행되었습니다.9
10. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 + 괄호 생략
{
const func = str => { // a매개변수가 한개면 괄호 생략가능
return str;
}
document.write(func("함수가 실행되었습니다.10"));
}
결과보기
함수가 실행되었습니다.10
11. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴 생략
{
const func = str => str;
document.write(func("함수가 실행되었습니다.11"));
}
결과보기
함수가 실행되었습니다.11
12. 화살표 함수 : 선언적 함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴 생략
{
func = str => str;
document.write(func("함수가 실행되었습니다.12"));
}
결과보기
함수가 실행되었습니다.12
13. 내부 함수
{
function func(){
function funA(){
document.write("함수가 실행되었습니다.");
}
funA();
function funB(){
document.write("함수가 실행되었습니다.");
}
funB();
}
func();
}
결과보기
내부 함수 funA 실행
내부 함수 funB 실행
내부 함수 funB 실행
14. 즉시 실행 함수
{
(function (){
document.write("즉시실행함수가 실행되었습니다.");
}());
(() => {
document.write("즉시실행화살표함수가 실행되었습니다.");
})();
}
결과보기
즉시 실행 함수 실행
즉시 실행 화살표 함수 실행
즉시 실행 화살표 함수 실행
15. 파라미터 함수
{
function func(str = "함수가 실행되었습니다."){
document.write(str);
}
func();
}
결과보기
함수가 실행되었습니다.
16. 아규먼트 함수
{
function func(a, b){
document.write(arguments[0]);
document.write(arguments[1]);
}
func("0. 함수가 실행되었습니다.
", "1. 함수가 실행되었습니다.");
}
결과보기
0. 함수가 실행되었습니다.
1. 함수가 실행되었습니다.
1. 함수가 실행되었습니다.
17. 재귀함수 : 자기 자신을 다시 호출하는 함수
{
function func(num){
if(num <= 1){
document.write("if함수가 실행되었습니다."+num);
} else {
document.write("else함수가 실행되었습니다."+num);
func(num-1);
}
}
func(5);
}
결과보기
else함수가 실행되었습니다.5
else함수가 실행되었습니다.4
else함수가 실행되었습니다.3
else함수가 실행되었습니다.2
if함수가 실행되었습니다.1
else함수가 실행되었습니다.4
else함수가 실행되었습니다.3
else함수가 실행되었습니다.2
if함수가 실행되었습니다.1
18. 콜백함수 : 다른 함수에 인수로 넘겨지는 함수
{
function func(){
document.write("함수가 실행 되었습니다.2")
}
function callback(str){
document.write("함수가 실행되었습니다.1");
str();
}
callback(func);
}
결과보기
함수가 실행 되었습니다.1
함수가 실행 되었습니다.2
함수가 실행 되었습니다.2
19. 콜백 함수 : 반복문
{
function func(num){
document.write("함수가 실행되었습니다." + num);
}
function callback(num){//인자,파라미터
for(let i=1; i<=5; i++){
num(i);
}
}
callback(func);//인수
}
결과보기
함수가 실행되었습니다.1
함수가 실행되었습니다.2
함수가 실행되었습니다.3
함수가 실행되었습니다.4
함수가 실행되었습니다.5
함수가 실행되었습니다.2
함수가 실행되었습니다.3
함수가 실행되었습니다.4
함수가 실행되었습니다.5
20. 콜백 함수 : 동기/비동기
{
function funcA(){
document.write("funcA가 실행되었습니다.");
}
function funcB(){
document.write("funcB가 실행되었습니다.");
document.write("<br>");
}
funcA();
funcB();
// function funcC(){
// setTimeout(()=>{
// console.log("C");
// },1000)
// }
// function funcD(){
// console.log("D");
// }
// funcC();
// funcD();
function funcE(callback){
setTimeout(()=>{
document.write("E");
callback();
},1000);
}
function funcF(){
document.write("F");
}
funcE(function(){
funcF();
});
}
결과보기
funcA가 실행되었습니다.
funcB가 실행되었습니다.
E
F
funcB가 실행되었습니다.
E
F
21. 함수 유형 : 함수와 매개변수를 이용한 형태
{
function func(num, name, job){
document.write(num + ". 내 이름은 " + name + "이며, 직업은 " + job + "입니다.");
}
func("1", "웹쓰", "웹 퍼블리셔");
func("2", "웹스토리보이", "프론트앤드개발자");
}
결과보기
1. 내 이름은 웹쓰이며, 직업은 웹 퍼블리셔입니다.
2. 내 이름은 웹스토리보이이며, 직업은 프론트앤드개발자입니다.
2. 내 이름은 웹스토리보이이며, 직업은 프론트앤드개발자입니다.
22. 함수 유형 : 함수와 변수를 이용한 형태
{
function func(num, name, job){
document.write(num + ". 내 이름은 " + name + "이며, 직업은 " + job + "입니다.");
}
const youNum1 = "1";
const youName1 = "웹쓰";
const youJob1 = "웹 퍼블리셔";
const youNum2 = "2";
const youName2 = "웹스토리보이";
const youJob2 = "프론트앤드개발자";
func(youNum1, youName1, youJob1);
func(youNum2, youName2, youJob2);
}
결과보기
1. 내 이름은 웹쓰이며, 직업은 웹 퍼블리셔입니다.
2. 내 이름은 웹스토리보이이며, 직업은 프론트앤드개발자입니다.
2. 내 이름은 웹스토리보이이며, 직업은 프론트앤드개발자입니다.
23. 함수 유형 : 함수와 배열, 객체를 이용한 형태
{
function func(num, name, job){
document.write(num + ". 내 이름은 " + name + "이며, 직업은 " + job + "입니다.");
}
const info = [
{
num : "1",
name : "웹쓰",
job : "웹퍼블리셔"
},{
num : "2",
name : "웹스토리보이",
job : "프론트앤드개발자"
}
]
func(info[0].num, info[0].name, info[0].job);
func(info[1].num, info[1].name, info[1].job);
}
결과보기
1. 내 이름은 웹쓰이며, 직업은 웹퍼블리셔입니다.
2. 내 이름은 웹스토리보이이며, 직업은 프론트앤드개발자입니다.
2. 내 이름은 웹스토리보이이며, 직업은 프론트앤드개발자입니다.
24. 함수 유형 : 객체 안에 변수와 함수를 이용한 형태
{
const info = {
num1 : 1,
name1 : "웹쓰",
job1 : "웹퍼블리셔",
num2 : 2,
name2 : "웹스토리보이",
job2 : "프론트앤드개발자",
result1 : function(){
document.write(this.num1 + ". 내 이름은 " + this.name1 + "이며, 직업은 " + this.job1 + "입니다.");
},
result2 : function(){
document.write(this.num2 + ". 내 이름은 " + this.name2 + "이며, 직업은 " + this.job2 + "입니다.");
}
}
info.result1();
info.result2();
}
결과보기
1. 내 이름은 웹쓰이며, 직업은 웹퍼블리셔입니다.
2. 내 이름은 웹스토리보이이며, 직업은 프론트앤드개발자입니다.
2. 내 이름은 웹스토리보이이며, 직업은 프론트앤드개발자입니다.
25. 함수 유형 : 객체 생성자 함수
{
function func(num, name, job){
this.num = num;
this.name = name;
this.job = job;
this.result = function(){
document.write(this.num + ". 내 이름은 " + this.name + "이며, 직업은 " + this.job + "입니다.");
}
}
//인스턴스 생성
const info1 = new func("1", "웹쓰", "웹퍼블리셔");
const info2 = new func("2", "웹스토리보이", "프론트앤드개발자");
info1.result();
info2.result();
}
결과보기
1. 내 이름은 웹쓰이며, 직업은 웹퍼블리셔입니다.
2. 내 이름은 웹스토리보이이며, 직업은 프론트앤드개발자입니다.
2. 내 이름은 웹스토리보이이며, 직업은 프론트앤드개발자입니다.
26. 함수 유형 : 프로토타입 함수
{
function func(num, name, job){
this.num = num;
this.name = name;
this.job = job;
}
func.prototype.result = function(){
document.write("프로토타입함수" + this.num + ". 내 이름은 " + this.name + "이며, 직업은 " + this.job + "입니다.");
}
//인스턴스 생성
const info1 = new func("1", "웹쓰", "웹퍼블리셔");
const info2 = new func("2", "웹스토리보이", "프론트앤드개발자");
info1.result();
info2.result();
}
결과보기
프로토타입함수1. 내 이름은 웹쓰이며, 직업은 웹퍼블리셔입니다.
프로토타입함수2. 내 이름은 웹스토리보이이며, 직업은 프론트앤드개발자입니다.
프로토타입함수2. 내 이름은 웹스토리보이이며, 직업은 프론트앤드개발자입니다.
27. 함수 유형 : 객체 리터럴 함수
{
function func(num, name, job){
this.num = num;
this.name = name;
this.job = job;
}
func.prototype = {
result1 : function(){
document.write("리터럴함수" + this.num + ". 내 이름은 " + this.name + "이며, 직업은 " + this.job + "입니다.");
},
result2 : function(){
document.write("리터럴함수" + this.num + ". 내 이름은 " + this.name + "이며, 직업은 " + this.job + "입니다.");
}
}
//인스턴스 생성
const info1 = new func("1", "웹쓰", "웹퍼블리셔");
const info2 = new func("2", "웹스토리보이", "프론트앤드개발자");
info1.result1();
info2.result2();
}
결과보기
리터럴함수1. 내 이름은 웹쓰이며, 직업은 웹퍼블리셔입니다.
리터럴함수2. 내 이름은 웹스토리보이이며, 직업은 프론트앤드개발자입니다.
리터럴함수2. 내 이름은 웹스토리보이이며, 직업은 프론트앤드개발자입니다.
28. 클래스 : 함수의 집합체
{
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();
}
결과보기
1. 내 이름은 웹쓰이며, 직업은 웹 퍼블리셔입니다.
2. 내 이름은 웹스토리보이이며, 직업은 프론트앤드개발자입니다.
2. 내 이름은 웹스토리보이이며, 직업은 프론트앤드개발자입니다.
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 + "입니다.");
}
}
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();
}
결과보기
1. 내 이름은 웹쓰이며, 직업은 웹 퍼블리셔입니다.
2. 내 이름은 웹스토리보이이며, 직업은 프론트앤드개발자입니다.
2. 내 이름은 웹스토리보이이며, 직업은 프론트앤드개발자이며 나이는 100살 입니다.
2. 내 이름은 웹스토리보이이며, 직업은 프론트앤드개발자입니다.
2. 내 이름은 웹스토리보이이며, 직업은 프론트앤드개발자이며 나이는 100살 입니다.