자바스크립트 - 자바스크립트 객체와 함수

 

자바스크립트 에서의 객체

기본적으로 자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다.

자바스크립에서의 객체는 키(key) 와 그에 매칭되는 값(데이터, 즉 속성(property)), 혹은 동작(method) 의 집합이다.

 

자바스크립트 에서의 객체 구조

object = {
    key1 : 'key1 에 매칭되는 데이터(property)',
    key2 : 'key2 에 매칭되는 데이터(property)',
    method1 : function(){
        // method 는 함수로 정의한다.
    }
}

- 키의 이름은 문자열, 또는 문자로 해석될 수 있는 기호여야 한다.

- 속성 값에는 모든 자료형이 올 수 있다.

 

자바스크립트 에서의 함수

자바스크립트 에서의 함수 표기법은 다음과 같다.

function 함수이름 (인자1, 인자2, ...) {
    // 함수 동작코드
    return 리턴값
}

- 여기서 함수의 이름을 생략하여 표기하는 것이 가능하다.

- 이를 익명함수 라고 하며, 익명 함수의 경우 함수를 바로 실행해야 하는 경우 사용한다.

 

- 익명 함수 예시

(function(){
    console.log("함수 실행");
})();

- 첫 소괄호 : 실행하고자 하는 익명 함수

 

함수로서 객체를 만드는 법

직접 다양한 객체를 만드는 방법은 비슷한 구조의 객체를 여러개 만들어야 할 때 굉장히 번거로워 질 수 있다.

키 값은 같고 데이터만 다르다면 키 값을 공통적으로 가지고 있는 객체를 함수로서 만들어 줄 수 있다.

위와 같은 식으로 객체를 만들어주는 함수를 생성자 함수라고 한다.

(자바에서의 생성자 메소드와 동일한 개념)

function ComputerClass(name, professor, classno){
    this.name = name;
    this.professor = professor;
    this.classno = classno;
    this.printInfo = function(){
        console.log(this.name + '강의 ' + this.classno + '분반 입니다. 교수님은 ' + this.professor + '입니다.');
    }
}

var class1 = new ComputerClass('운영체제', '이동희', '2');
class1
typeof class1

-> ComputerClass {name: "운영체제", professor: "이동희", classno: "2", printInfo: ƒ}

-> "object"

- 생성자 함수에서 좌변의 this 키워드가 붙은 변수와 우변의 this 키워드가 붙지 않은 변수는 서로 다른 변수이다.

- 좌변은 생성자 함수 안에서 존재하는 함수 내부의 변수, 우변은 함수 인자를 통해 외부에서 들어온 변수이다.

- 자바스크립트 에서는 변수 내부에 함수를 선언해 주는 것이 가능하다. 자바스크립트 에서는 함수 또한 객체의 한 종류로 취급되기 때문이다.

 

 

객체로서의 함수

자바스크립트에서는 함수를 객체의 일종으로 취급하기 때문에 다음과 같은 특성을 가지고 있다.

1. 변수에 대입이 가능하다.(예시 : 위에서의 printInfo 변수에 함수가 적재되어 있다.)

var add = function addSum(num1, num2){
    return num1 + num2;
}

typeof add
add(1,2)

-> "function"

-> 3

- 물론 여기서 addSum 같은 함수의 이름을 생략하는 것이 가능하다.

 

2. 다른 함수의 인자나 리턴값으로 활용이 가능하다.

console.log("두 수의 합계는 ", add(1,2), " 입니다.");

-> 두 수의 합계는 3 입니다.

 

3. 배열, 객체 등의 자료구조에 대입이 가능하다.

var sub = function(num1, num2){
    return num1 - num2;
}

var calculator = [add, sub]; // 배열에 함수를 넣는 경우

calculator[0](2,3)
calculator[1](2,3)

Calculator = {add, sub}; // 객체에 함수를 인자로 넣는 경우
Calculator.add(2,6)
Calculator.sub(2,6)

-> 5

-> -1

-> 8

-> -4

 

 

참고 : https://edu.goorm.io/learn/lecture/19879/%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC%EB%A5%BC-%EC%9C%84%ED%95%9C-javascript-es6

프레임워크를 위한 JavaScript ES6 - 구름EDU