[자바스크립트의 시작] (8) Javascript 객체 기본

객체지향

객체 : 서로 연관된 변수와 함수를 그룹핑하고 이름을 붙인것.

객체 지향 : 객체들을 서로 상호작용하게 만드는것.

 

 

객체의 생성 / 수정 / 삭제

각각의 데이터가 어떤 데이터 인지를 풍부하게 설명해야 하는 경우 객체를 사용한다.

 

목록만 있는 경우 배열을 사용한다.

데이터에 관한 설명이 필요한 경우 객체를 사용한다.

 

객체의 생성

객체의 생성

 

 

객체의 수정

객체의 수정

 

 

객체의 삭제

객체의 삭제

 

 

 

객체의 반복문

배열에서의 반복문

 

 

 

객체에서의 반복문

객체의 반복문은 for-in을 사용한다.

 

반복문을 통한 출력시 객체 값이 undefined로 나온다.

 

ArrObject. 뒤에는 변수가 올 수 없다. 객체 각각의 이름이 와야한다. 따라서 ArrObject[name]으로 바꿔줘야한다.

 

 

Javascript 내장 객체

Math 내장 객체

표준 내장 객체 - JavaScript | MDN (mozilla.org)

표준 내장 객체 - JavaScript | MDN

 

 

객체 직접 만들기

객체 안에 포함된 함수는 메소드라고 부른다.

객체 직접 만들기

 

객체를 사용하지 않을 경우

객체를 사용하지 않는경우

 

객체를 사용하면 관련기능을 그룹화 하여 편리하게 사용할 수 있다.

 

 

 

this

  : 어떤 메소드에서 그 메소드가 속해있는 객체를 가리키는 특수한 키워드 this 라 한다.

this - JavaScript | MDN (mozilla.org)

this - JavaScript | MDN

 

 

아래 코드는 이미 객체 내부에서 first와 second 값을 알고 있다. 하지만 호출할때 한번 더 언급하고있다.

 

 

밑 코드에서 sum메소드의 first와 second는 kim객체의 속성(property)이다. 따라서 kim.first+kim.second 바꿔줘야 한다.

 

만약 kim 객체의 이름이 k로 바뀐다면 에러가 발생할 것이다.

이를 방지하고 코드의 유연성을 갖기 위해 this를 사용한다.

 

 

객체의 생성자(constructor) : 함수를 양산화 한다.

Date를 사용한 constructor 예시

var d1 = new Date('2021-8-24'); // 2021년 8월 24일의 값을 가지는 Date 객체를 생성한다.
console.log('d1.getFullYear()', d1.getFullYear()); // 해당 객체의 년도를 출력한다.
console.log('d1.getMonth()', d1.getMonth()); // 0부터 카운트 하여 해당 객체의 월을 출력한다.

 

Date는 내장된 함수이다.

 

 

객체 생성 함수 만들기

  new 라는 키워드를 붙일 경우 객체를 생성하는 생성자(constructor)가 된다.

function Person(){
    this.name = 'kim';
    this.first = 10;
    this.second = 20;
    this.third = 30;
    this.sum = function(){
    	return this.first+this.second+this.third
    }
}

console.log("Person()", Person()); // underfined
console.log("new Person()", new Person()); // 객체 생성

new 키워드를 이용해 객체를 생성한다.

 

생성자를 이용해 새로운 객체를 생성

 

객체가 각각의 값 갖게 하기

 

 

 

프로토 타입(prototype)

자바스크립트는 Prototype based language 라고도 한다.

 

 

아래 코드는 생성자 함수에서 새로운 객체가 생성될 때 마다 sum 이라는 내부 메소드가 새롭게 생성된다.

function Person(name, first, second){
    this.name = name;
    this.first = first;
    this.second = second;
    this.sum = function(){
        retun this.first + this.second;
	}
}

 var kim = new Person("kim", 10, 20);
 var lee = new Person("lee", 10, 10);

새로운 객체가 생성될 때마다 내부 메소드가 새롭게 생성되므로 메모리의 낭비가 발생하고, 성능은 떨어진다.

 

 

sum 이라는 메소드의 내용을 수정하고 싶은 경우

function Person(name, first, second){
    this.name = name;
    this.first = first;
    this.second = second;
    this.sum = function(){
        retun this.first + this.second;
	}
}

 var kim = new Person("kim", 10, 20);
 kim.sum = function(){
 	retun 'modified : '+(this.first+this.second);
 }
 var lee = new Person("lee", 10, 10);

만들어진 객체만큼 수정작업을 반복해야 하는 문제가 발생한다. 즉 생산성이 떨어진다.

이를 보완하기 위해 생성자를 이용한 객체를 생성한다.

 

생성자를 이용한 객체 생성

객체의 속성들(변수들)은 생성자 함수 안에 넣는것이 일반적.

객체의 메소드 들은 생성자의 prototype에 추가하는 것이 일반적.

function Person(name, first, second){
    this.name = name;
    this.first = first;
    this.second = second;
}

Person.prototype.sum = function(){
    return "prototype : " +(this.first+this.second)
}

 

생성자를 이용한 객체 생성은 생성자 함수 안에 메소드를 정의하는 코드 들어 있지 않아서

메소드를 객체가 생성될 때마다 호출하지 않고 한번만 생성한다. 따라서 메모리 절약 가능.

 

만약 메소드의 내용을 수정해야 될 경우 한번만 수정하면 된다.

여러개의 객체가 하나의 함수를 공유하므로 성능을 높이고 메모리 절약이 가능하다.

 

하나의 객체에서만 sum 이라는 함수를 다르게 동작 시키고 싶을 경우

function Person(name, first, second){
    this.name = name;
    this.first = first;
    this.second = second;
}

Person.prototype.sum = function(){
    return "prototype : "+(this.first+this.second);
}

var kim = new Person("kim", 10, 20);

kim.sum = function(){
    return "this : "+(this.first+this.second);
}
var lee = new Person("lee", 10, 10);

console.log("kim.sum()", kim.sum());
console.log("lee.sum()", lee.sum());

kim과 lee에서 각각 sum의 호출이 다르게 나온다.

 

 

자바스크립트는 객체에서 어떠한 메소드 또는 속성을 출력할때,

해당 객체가 그 메소드 또는 속성을 갖고 있는지를 확인하고, 가지고 있다면 객체 내의 메소드 또는 속성을 호출

없다면 객체의 생성자의 prototype에 해당하는 메소드 또는 속성이 정의 되어 있는지를 확인한다.

 

 

 

classes

다른 언어들은 객체를 만드는 공장으로써 class를 지원 해왔다. 즉 class는 constructor의 대체재라 할 수 있다.

class는 ECMA script 6로 부터 도입된 문법이다.

의사결정은 통계를 기반으로 해야 한다. 통계를 제공하는 사이트는 https://caniuse.com/ 이다.

 

 

자바스크립트에 새롭게 도입된 문법은 이미 존재하던 기능을 변형한 문법이다.

기존에 존재하는 문법으로 똑같은 기능을 낼 수 있다.

https://babeljs.io/ 를 통해 새로운 문법을 기존의 문법으로 치환 가능하다.

 

 

class를 이용한 객체 생성

Person 생성자 함수와 동일하게 동작하는 class 정의.

생성자 함수의 역할은 두가지다.

1. 객체를 만든다.
2. 객체의 초기 상태를 정의한다.

 

객체를 생성

객체를 생성한다.

 

class의 초기화 constructor 함수

•   class는 객체의 초기값을 지정하기 위해 객체가 생성될 때 실행되는 constructor 함수가 있다.
• constructor 함수를 통해 객체의 초기값을 설정할 수 있다.
• 자바스크립트는 객체를 생성할때 자동으로 constructor 함수를 호출한다.

 

constructor() 은 약속된 이름이므로 바꿔서는 안된다.

 

constructor 함수에 입력을 받아 객체의 초기값 설정.

 

 

class의 메소드 만들기

1. prototype을 이용한 추가.
2. class 내부에 정의하기.

1. prototype을 이용한 추가

prototype을 이용한 추가.

 

2. class 내부에 정의

class 내부에 정의.

class 내부에 함수를 정의 할때 function() 은 필요 없다.

 

 

특정 객체의 메소드만 수정하고 싶은 경우

기존과 같은 방법을 사용하면 된다.

 

어떤 객체의 특성을 호출하면 자바스크립트는 그 객체가 해당하는 특성을 갖고 있는지 확인하고,

있다면 그 특성을 호출, 없다면 그 객체가 속해있는 class에서 해당 특성을 가져와 호출한다.