Javascript

01. 선언적 함수

선언적 함수는 함수명이 있는 함수입니다.

function func(){
    document.write("함수가 실행되었습니다.1")
}
func();

02. 익명 함수

익명 함수는 말 그대로 함수의 이름이 없으며, 변수의 이름을 쓴 함수입니다. 함수를 재사용하지 않을 경우, 익명함수를 만들어서 사용합니다.

const func = function(){
    document.write("함수가 실행되었습니다.2
");
}
func();

03. 매개변수 함수

함수의 매개변수란 함수를 호출할 때 인수로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수입니다. 또한, 함수의 인수는 함수가 호출될 때 함수로 값을 전달해주는 변수를 가리킵니다.

function func(str){           //str=변수, func의 값을 전달받았다는 의미
    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 = () => {  //함수 function을 화살표 기호로 생략
    document.write("함수가 실행되었습니다.5")
}
func();

func = () => document.write("함수가 실행되었습니다.5");  //중괄호 생략하여 한줄로 함수 선언 가능
func();

06. 화살표 함수 : 익명 함수

화살표 함수를 이용하여 익명 함수를 보다 간략한 방법으로 선언할 수 있습니다.

/* const func = function(){
    document.write("함수가 실행되었습니다.6");
}
func(); */
    
const func = () => document.write("함수가 실행되었습니다.6
");
func();

07. 화살표 함수 : 매개변수 함수

화살표 함수를 이용하여 매개변수 함수를 보다 간략한 방법으로 선언할 수 있습니다.

/* function func(str){           //str=변수, func의 값을 전달받았다는 의미
    document.write(str)
}
func("함수가 실행되었습니다.7"); */

func = (str) => document.write("함수가 실행되었습니다.7")
func();

func = str => document.write("함수가 실행되었습니다.7")  //변수가 하나이면 괄호 생략 가능
func();

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 => {          //(str)
    return str;
}
document.write("함수가 실행되었습니다.10
");

11. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴 생략

앞서 화살표 함수를 응용한 방법에서, 괄호와 리턴(return)을 생략할 수 있습니다.

const func = str => str;          //중괄호와 return 생략하여 한 줄로 선언 가능
document.write("함수가 실행되었습니다.11")

12. 화살표 함수 : 선언적 함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴 생략

같은 방법으로, 익명 함수가 아닌, 선언적 함수도 응용할 수 있습니다.

func = str => str;
document.write(func("함수가 실행되었습니다.12
"))

13. 함수 유형 : 함수와 매개변수를 이용한 형태

자바스크립트에서 함수의 특징은 실행문의 집합체라는 점과, 재활용이 가능하다는 점입니다. 함수와 매개변수를 이용하면, 다음과 같이 함수를 재활용할 수 있습니다.

function func(num, str1, str2){
    document.write(num + ". " + str1 + "가 " +str2 + "되었습니다.
")
}
func("1", "함수", "실행");  // 매개변수를 str1, str2로 전달
func("2", "자바스크립트", "실행");
func("3", "제이쿼리", "실행");

14. 함수 유형 : 함수와 변수를 이용한 형태

같은 방법으로, 변수를 일일이 선언할 수도 있습니다.

function func(num, str1, str2){
    document.write(num + ". " + str1 + "가 " + str2 + "되었습니다.
")
}
const num1 = 1;
const num2 = 2;
const num3 = 3;
const str1 = "함수";
const str2 = "자바스크립트";
const str3 = "제이쿼리";
const com1 = "실행";

func(num1, str1, com1);
func(num2, str2, com1);
func(num3, str3, com1);

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. 함수 유형 : 객체 생성자 함수

위와 같은 방법은 간편하지만, 재활용이 불가능하여 일일이 함수를 입력해줘야 한다는 불편함이 있습니다. 그 불편을 해소하기 위해 객체와 함수를 합치는 방법으로, const 대신 this로 변수를 선언할 수 있습니다. 이 때는 필수적으로 인스턴스를 생성해 주어야 합니다.

function func(num, name, word){
    this.num = num;  // const를 생략하고 this 작성
    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. 즉시 실행 함수

즉시실행함수 (IIFE, Immediately Invoked Function Expression)는 정의되자마자 즉시 실행되는 함수를 말합니다. 즉시실행함수는 다음과 같이 소괄호( () )로 함수를 감싸서 실행하는 문법을 사용합니다.

(function func(){
    document.write("함수가 실행되었습니다.")
})();

(() => {
    document.write("함수가 실행되었습니다.2")
})();

21. 파라미터 함수(매개변수 함수)

함수의 매개변수(parameter)란 함수를 호출할 때 인수로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수입니다.

function func(str = "함수가 실행되었습니다."){
    document.write(str);
}
func();    

22. 아규먼트 함수

argument는 우리말로 '인수' 라고 번역되는데, 함수를 호출할 때 사용하게 되는 일련의 값들을 말합니다. 다음 예시에서 a, b를 아규먼트라고 할 수 있습니다.

function func(a, b){
    document.write(arguments[0]); //a
    document.write(arguments[1]); //b
}
func("함수가 실행되었을까요?", "함수가 실행되었습니다.")

23. 재귀 함수 : 자기 자신을 호출

재귀 함수는 의미 그대로, 자기 자신을 호출하는 함수입니다. 재귀 함수의 유형은 여러 가지가 있지만, 여기에서는 두 가지만 작성하도록 하겠습니다.

// 1. 반복적으로
function func(num) {
    if (num <= 1) {
        document.write("함수가 실행되었습니다." + num);
    } else {
        document.write("함수가 실행되었습니다." + num);
        func(num - 1);
    }
}
func(10);

// 2. 애니메이션 적용시 : 무한적으로 실행되지만, 버벅임이 없음
// function animation() {
//     document.write("함수가 실행되었습니다.");
//     requestAnimationFrame(animation);
// }
// animation();

24. 콜백 함수 : 다른 함수에 인수로 넘겨지는 함수

콜백 함수란, 함수에 파라미터로 들어가는 함수를 말합니다. 각각의 함수를 순차적으로 실행하고 싶을 때 사용합니다.
재귀 함수가 동시에 여러 개의 함수를 실행시킨다면, 콜백 함수는 순서대로 함수를 실행시킨다고 할 수 있습니다.

function func() {
    document.write("함수가 실행되었습니다.1");
}

function callback(str) {
    document.write("함수가 실행되었습니다.2");
    str();
}

callback(func);

25. 콜백 함수 : 반복문

콜백 함수 안에서 반복문을 사용할 수 있습니다.

function func(index) {
    document.write("함수가 실행되었습니다." + index);
}
function callback(num) {
    for (let i = 1; i <= 10; i++) {
        num(i);
    }
}
callback(func);

26. 콜백 함수 : 동기/비동기 (synchronous/Asynchronous)

데이터를 받는 방식에서 동기/비동기는 동시에 일어나는/동시에 일어나지 않는다는 것을 의미합니다. 일반적으로 사용하는 함수들은 대부분 동기적 방식으로 데이터를 처리하지만, setTimeout() 함수는 비동기적 방식으로 데이터를 처리합니다.

function funcA() {
    document.write("funcA가 실행되었습니다.
");
}
function funcB() {
    document.write("funcB가 실행되었습니다.
");
}
funcA();
funcB();

위 예제의 결과는 무엇일까요? 당연히 funcA, funcB의 차례로 출력됩니다.

function funcA() {
    setTimeout(() => {
        console.log("funcA가 실행되었습니다.
");
    }, 1000);
}
function funcB() {
    console.log("funcB가 실행되었습니다.
");
}
funcA();
funcB();

위 예제의 결과는 어떨까요? funcA를 먼저 실행시키기 때문에 funcA가 먼저 출력될 것 같지만, funcB, funcA의 차례로 출력됩니다. funcA에서 사용된 비동기적 함수인 setTimeout()은 비동기적 API를 제외한 모든 코드가 실행된 이후, 결과를 출력하기 때문입니다. funcA를 먼저 출력하려면 어떻게 해야 할까요?

function funcA(callback) {
    setTimeout(() => {
        console.log("funcA가 실행되었습니다.
");
        callback();
    }, 1000);
}
function funcB() {
    console.log("funcB가 실행되었습니다.
");
}
funcA(function () {
    funcB();
});

위 예제처럼, funcA 함수의 내부에 funcB을 입력해 주면, funcA, funcB의 순서로 출력됩니다.

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();
        });
    });
});

여러 개의 콜백 함수를 순차적으로 실행하려면, 위와 같이 작업해주면 됩니다. 그러나 콜백 지옥에 빠지지 않으려면 남용하지는 않는 것이 좋습니다.

27. promise 함수의 빈자리...

28. 내부 함수 : 스코프, 클로저

내부 함수란 다음과 같이 함수 안에서 또 다른 함수를 선언하는 것입니다. 스코프, 클로저 개념에 대해서는 다음 기회에 자세히 설명하도록 하겠습니다.

function func() {
    function funcA() {
        document.write("함수가 실행되었습니다.");
    }
    funcA();

    function funcB() {
        document.write("함수가 실행되었습니다.");
    }
    funcB();
}
func();

29. 클래스(Class)

클래스는 객체를 생성하기 위한 템플릿입니다. class 선언을 이용해 정의할 수 있습니다.

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 자식클래스 extends 부모클래스" 형식으로 작성합니다.

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.age + "세 입니다."
        );
    }
}

const info1 = new study("1", "웹쓰", "웹퍼블리셔");
const info2 = new study2("2", "웹스토리보이", "프론트앤드 개발자", 100);
info1.result();
info2.result();
info2.result2();