{
function func(){
document.write("*** 01. 선언적 함수 ***");
document.write("01. 함수가 실행되었습니다.");
}
func();
}
{
const func = function(){
document.write("*** 02. 익명 함수 ***");
document.write("02. 함수가 실행되었습니다.");
}
func();
}
{
function func(str){
document.write("*** 03. 매개변수 함수 ***");
document.write(str);
}
func("03. 함수가 실행되었습니다.");
function func1(str1, str2){
document.write(str1, str2);
}
func1("03. 함수가(str1)", " 실행되었습니다.(str2)");
}
{
function func(){
const str = "함수가 실행되었습니다.";
return str;
}
document.write("*** 04. 리턴값 함수 ***");
document.write(func());
}
{
document.write("*** 05. 화살표 함수 : 선언적 함수 ***");
func = () => {
document.write("함수가 실행되었습니다.!");
}
func();
}
{
document.write("*** 06. 화살표 함수 : 익명함수 ***");
const func = () => {
document.write("함수가 실행되었습니다.!");
}
func();
}
{
document.write("*** 07. 화살표 함수 : 리턴값 함수 ***");
func = () => {
const str = "함수가 실행되었습니다.!";
return str;
}
document.write(func());
}
{
document.write("*** 08. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 ***");
const func = (str) => {
return str;
}
document.write(func("함수가 실행되었습니다.!"));
}
{
document.write("*** 09. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 + 매개변수 괄호생략 ***");
//매개변수가 하나라면 괄호는 생략가능
const func = str => {
return str;
}
document.write(func("함수가 실행되었습니다.!"));
}
{
document.write("*** 10. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 + 매개변수 괄호생략 + 리턴 생략 ***");
const func = str => str;
document.write(func("함수가 실행되었습니다.!"));
}
{
document.write("*** 11. 화살표 함수 : 선언적함수 + 매개변수 + 리턴값 + 매개변수 괄호생략 + 리턴 생략 ***");
func = str => str;
document.write(func("함수가 실행되었습니다.!"));
}
{
document.write("*** 12. 내부 함수 ***");
function func(){
function funA(){
document.write("함수A가 실행되었습니다.")
}
funA();
function funB(){
document.write("함수B가 실행되었습니다.")
}
funB();
}
func();
}
{
document.write("*** 13. 즉시 실행 함수 ***");
// function func(){
// document.write("함수가 실행되었습니다.")
// }
// func();
(function (){
document.write("함수가 실행되었습니다.")
})();
}
{
document.write("*** 14. 파라미터 함수 ***");
// function func(str){
// if( str == null ){
// str = "함수가 실행되었습니다.";
// document.write(str);
// }
// }
// func();
function func(str = "함수가 실행되었습니다."){
document.write(str);
}
func();
}
{
document.write("*** 15. 아규먼트 함수 ***");
function func(strA, strB){
// document.write(strA);
// document.write(strB);
document.write(arguments[0]);
document.write(arguments[1]);
}
func("함수A가 실행되었습니다.", "함수B가 실행되었습니다.");
}
{
document.write("*** 16. 재귀 함수 : 여러번 반복하고 싶을때 ***");
// function func(){
// document.write("함수가 실행되었습니다.");
// func();
// }
// func();
//이런경우 무한루프에 빠짐
function func(num){
if( num <= 1 ){
document.write("함수가 실행되었습니다.");
} else {
document.write("함수가 실행되었습니다.");
func(num-1);
}
}
func(5);
}
{
document.write("*** 17. 콜백 함수 ***");
function funA(){
document.write("함수A가 실행되었습니다.");
}
function funB(str){
document.write("함수B가 실행되었습니다.");
str(); //funA();
}
funB(funA);
}
{
document.write("*** 18. 콜백 함수 : 반복문 ***");
function func(){
document.write("함수가 실행되었습니다.");
}
function callback(str){
for( let i=1; i<=5; i++){
str();
}
}
callback(func);
}
{
document.write("*** 19. 콜백 함수 : 동기/비동기 ***");
function funA(){
document.write("funA가 실행되었습니다.");
} //로딩소스
function funB(){
document.write("funB가 실행되었습니다.");
} //두번째 로딩소스
funB();
funA();
//두번째 방식
// function funC(){
// setTimeout(function(){
// document.write("funC가 실행되었습니다.");
// }, 1000);
// }
function funC(){
setTimeout(() => {
document.write("funC가 실행되었습니다.");
}, 1000);
}
function funD(){
document.write("funD가 실행되었습니다.");
}
funC();
funD();
//세번째 방식
function funE(callback){
setTimeout(() => {
document.write("funE가 실행되었습니다.");
callback();
}, 1000);
}
function funF(){
document.write("funF가 실행되었습니다.");
}
funE(funF);
}
{
}
{
document.write("*** 21. 함수 유형 : 함수와 매개변수를 이용한 형태 ***");
function func(num, name, job){
document.write(num + ". 내 이름은 " + name + "이며, 직업은 " + job + " 입니다.");
}
func("1", "크동", "웹 퍼블리셔");
func("2", "강동재", "프론트앤드 개발자");
}
{
document.write("*** 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);
}
{
document.write("*** 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);
}
{
document.write("*** 24. 함수 유형 : 함수와 객체를 이용한 형태 ***");
function func(num, name, job){
document.write(num + ". 내 이름은 " + name + "이며, 직업은 " + job + " 입니다.");
}
const info = {
num1: 1,
name1: "크동",
job1: "웹 퍼블리셔",
num2: 2,
name2: "강동재",
job2: "프론트앤드 개발자"
}
func(info.num1, info.name1, info.job1);
func(info.num2, info.name2, info.job2);
}
{
document.write("*** 25. 함수 유형 : 함수와 객체(함수)를 이용한 형태 : 객체 생성자 함수 ***");
const info = {
num1: 1,
name1: "크동",
job1: "웹 퍼블리셔",
num2: 2,
name2: "강동재",
job2: "프론트앤드 개발자",
result1 : function(){
document.write(info.num1 + ". 내 이름은 " + info.name1 + "이며, 직업은 " + info.job1 + " 입니다.");
},
result2 : function(){
document.write(info.num2 + ". 내 이름은 " + info.name2 + "이며, 직업은 " + info.job2 + " 입니다.");
}
}
info.result1();
info.result2();
}
{
document.write("*** 26. 함수 유형 : 객체 생성자 함수 ***");
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();
}
{
document.write("*** 27. 함수 유형 : 프로토타입 함수 ***");
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();
}
{
document.write("*** 28. 함수 유형 : 객체 리터럴 함수 ***");
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();
}
{
document.write("*** 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();
}
{
document.write("*** 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", "강동재", "프론트앤드 개발자","30");
info1.result();
info2.result();
info2.result2();
}