함수와 객체

서지우·2023년 7월 17일
0

JavaScript

목록 보기
2/11

앞서 자바로 만들었을 때와 별반 다르지 않다.

그래서 간단히 설명하겠음.

함수

함수 만드는 방법

실습 - s02.html

실습으로 설명하겠다!!

<script>
    // 함수 만드는 방법

    // 기본
    function add(a, b) {
        return a + b;
    }

    // 익명함수 사용
    const add1 = function (a, b) {
        return a + b;
    }

    // 화살표 함수 / 람다 함수
    const add2 = (a, b) => {
        return a + b;
    }

    // 결과 코드가 한 줄이면 중괄호와 return을 생략할 수 있다
    const add3 = (a, b) => a + b;

</script>

실행결과


콜백함수

실습 - s05.html

실습파일의 주석으로 설명..

<script>
    // 함수가 들어가는 메소드

    class Cat {
        constructor(name){
            this.name = name;
        }

        call(func){
            // 함수의 매개변수로 들어가는 함수를
            // 콜백 함수라고 한다
            func(this.name);
        }
    }

    const cat = new Cat("야옹이");

    const hello = (value) => console.log(value + "안녕?"); //야옹이안녕?

    cat.call(hello); 

</script>

실행결과


객체

객체 만드는 방법

실습 - s03.html

실습으로 설명하겠다.

<script>

    // 객체 만드는 방법

    // 클래스 없는 인스턴스
    const obj = {
        // 자바스크립트에서 객체의 변수를 프로퍼티라고 한다
        // 변수명 콜론 값 쉼표
        name : "홍길동",
        age : 12,
        // 아래의 방법으로 메소드 만드는 것을 추천
        getName(){
            return this.name;
        },
        // getName1 : function(){
        //     return this.name;
        // },
        // getName2 : () => this.name,
    };

    // 클래스
    class Cat {
        constructor(name, age){
            // 자바스크립트에서는
            // 생성자에서 this.~~를 사용해서
            // 초기화해주면 프로퍼티가 생성된다
            this.name = name;
            this.age = age;
        }

        // 자바스크립트에서는 접근 제한자가 없음
        getName(){
            return this.name;
        }
    }

    const cat = new Cat("야옹이", 12);
    console.log(cat.name); //야옹이

</script>
profile
미래가 기대되는 풀스택개발자 공부 이야기~~

0개의 댓글