- 01. 선언적 함수
- 02. 익명 함수
- 03. 매개변수 함수
- 04. 리턴값 함수
- 05. 화살표 함수 : 선언적 함수
- 06. 화살표 함수 : 익명함수
- 07. 화살표 함수 : 매개변수 함수
- 08. 화살표 함수 : 리턴값 함수
- 09. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 함수
- 10. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 + 괄호생략
- 11. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 + 괄호생략 + 리턴 생략
- 12. 화살표 함수 : 선언적 함수 + 매개변수 + 리턴값 + 괄호생략 + 리턴 생략
- 13. 내부 함수
- 14. 즉시실행 함수
- 15. 파라미터 함수
- 16. 아규먼트 함수
- 17. 재귀함수
- 18. 콜백 함수
- 19. 객체생성자 함수
- 20. 프로토타입 함수
- 21. 객체 리터럴 함수
- 22. 클래스
01. 선언적 함수
{
function func( ){ //함수 선언
document.write("함수가 실행되었습니다.");
}
func( ); //함수 호출
}
결과보기
함수가 실행되었습니다.
02. 익명 함수
{
const func = function ( ) { //함수를 변수로 지정.
document.write("함수가 실행되었습니다.");
}
func( );
}
결과보기
함수가 실행되었습니다.
03. 매개변수 함수
{
function func(str) {
document.write(str);
}
func("함수가 실행되었습니다.");
}
결과보기
함수가 실행되었습니다.
04. 리턴값 함수
{
function func( ) {
const str = "함수가 실행되었습니다.";
return str;
}
document.write(func( ));
}
결과보기
함수가 실행되었습니다.
05. 화살표 함수 : 선언적 함수
{
func = ( ) => { //function을 생략하고 화살표로 표시
document.write("함수가 실행되었습니다.");
}
func( );
}
결과보기
함수가 실행되었습니다.
06. 화살표 함수 : 익명 함수
{
const func = ( ) => {
document.write("함수가 실행되었습니다.");
}
func( );
}
결과보기
함수가 실행되었습니다.
07. 화살표 함수 : 매개변수 함수
{
func = (str) => {
document.write(str);
}
func("함수가 실행되었습니다.");
}
결과보기
함수가 실행되었습니다.
08. 화살표 함수 : 리턴값 함수
{
func= ( ) =>{
const str = "함수가 실행되었습니다.";
return str;
}
document.write(func( ));
}
결과보기
함수가 실행되었습니다.
09. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 함수
{
const func = (str) => {
return str;
}
document.write(func("함수가 실행되었습니다."));
}
결과보기
함수가 실행되었습니다.
10. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 함수 + 괄호 생략
{
const func = str => { //매개변수가 하나일 경우 괄호 생략 가능.
return str;
}
document.write(func("함수가 실행되었습니다."));
}
결과보기
함수가 실행되었습니다.
11. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 함수 + 괄호 생략 + 리턴 생략
{
const func = str => str;
document.write(func("함수가 실행되었습니다."));
}
결과보기
함수가 실행되었습니다.
12. 선언적 함수 : 익명함수 + 매개변수 + 리턴값 함수 + 괄호 생략 + 리턴 생략
{
func = str => str;
document.write(func("함수가 실행되었습니다."));
}
결과보기
함수가 실행되었습니다.
13. 내부함수
{
function func(){
function funcA(){
document.write("함수가 실행되었습니다.");
}
funcA();
function funcB(){
document.write("함수가 실행되었습니다.");
}
funcB();
}
func();
}
결과보기
함수가 실행되었습니다.함수가 실행되었습니다.
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("함수가 실행되었습니다.", "함수가 실행되었습니다.");
}
결과보기
함수가 실행되었습니다.함수가 실행되었습니다.
17. 재귀함수
{
// function func(){
// document.write("함수가 실행되었습니다.");
// func();
// }
// func(); 이렇게되면 무한 반복 실행이 됩니다.
function func(num){
if(num <=1){
document.write("함수가 실행되었습니다.");
} else {
document.write("함수가 실행되어습니다.");
func(num-1);
}
}
func(5);
}
결과보기
함수가 실행되었습니다. (다섯번 실행)
18. 콜백함수 : 다른 함수에 인수로 넘겨지는 함수
{
function func(){
document.write("함수가 실행되었습니다.2");
}
function callback(str){
document.write("함수가 실행되었습니다.1");
str();
}
callback(func);
//콜백 함수 반복문
function func(){
document.write("함수가 실행되었습니다.");
}
function callback(num){
for(let i =1; i<=5; i++){
num(i);
}
}
callback(func);
//콜백 함수 동기/비동기
function funcA(){
document.write("funcA가 실행되었습니다.");
}
function funcB(){
document.write("funcB가 실행되었습니다.");
}
funcA();
funcB();
function funcC(){
setTimeout(()=>{
console.log("C");
},1000)
}
function funcD(){
console.log("D")
}
funcC();
funcD();
function funcE(callback){
setTimeout(()=>{
console.log("E");
callback();
},1000);
}
function funcF(){
console.log("F");
}
funcE(function(){
funcF();
})
}
결과보기
함수가 실행되었습니다.
funcA가 실행되었습니다.
funcB가 실행되었습니다.
funcA가 실행되었습니다.
funcB가 실행되었습니다.
19. 객체 생성자 함수
{
함수 유형 : 객체 안에 변수와 함수를 이용한 형태
const info = {
num1: 1,
name1: "gwni",
job1: "student",
num2: 2,
name2: "GWNI",
job2: "developer",
result1: function(){
document.write(this.num1+ ". 내이름은 "+ this.name1 + "이며, 직업은" +this.job1+"입니다.")
},
result2: function(){
document.write(this.num2+ ". 내이름은 "+ this.name2 + "이며, 직업은" +this.job2+"입니다.")
}
}
info.result1();
info.result2();
//객체 생성자 함수
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","gwni","student");
const info2 = new func("2","GWNI","developer");
info1.result();
info2.result();
}
결과보기
1. 내이름은 gwni이며, 직업은student입니다.
2. 내이름은 GWNI이며, 직업은developer입니다.
2. 내이름은 GWNI이며, 직업은developer입니다.
20. 프로토타입 함수
{
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","gwni","student");
const info2 = new func("2","GWNI","developer");
info1.result();
info2.result();
}
결과보기
1. 내이름은 gwni이며, 직업은student입니다.
2. 내이름은 GWNI이며, 직업은developer입니다.
2. 내이름은 GWNI이며, 직업은developer입니다.
21. 객체 리터럴 함수
{
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","gwni","student");
const info2 = new func("2","GWNI","developer");
info1.result1();
info2.result2();
}
결과보기
1. 내이름은 gwni이며, 직업은student입니다.
2. 내이름은 GWNI이며, 직업은developer입니다.
2. 내이름은 GWNI이며, 직업은developer입니다.
22. 클래스 : 함수의 집합체
{
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","gwni","student");
const info2 = new study("2","GWNI","developer");
info1.result();
info2.result();
//클래스의 상속
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","gwni","student");
const info2 = new study2("2","GWNI","developer",100);
info1.result();
info2.result();
info2.result2();
}
결과보기
1. 내이름은 gwni이며, 직업은student입니다.
2. 내이름은 GWNI이며, 직업은developer입니다.
2. 내이름은 GWNI이며, 직업은developer이며 나이는 100살입니다.
2. 내이름은 GWNI이며, 직업은developer입니다.
2. 내이름은 GWNI이며, 직업은developer이며 나이는 100살입니다.