JavaScript 3

kim_memo·2021년 1월 25일

JavaScript

목록 보기

3/5

Object 객체의 개념 정리

자바스크립트는 거의 모든 것은 객체라고 생각하면 된다. 객체가 아닌 것들은 정해져 있다. 바로 기본 데이터 타입인 boolean, number, string과 특별한 값인 null, undefined이다. 그 이외에 함수, 배열 등 자바스크립트의 요소는 다 객체이다.

객체란 무엇일까?

객체 = '{key:value}'형태의 프로퍼티들을 저장하는 컨테이너

프로퍼티 : 자바스크립트에서 객체는 프로퍼티로 구성되며, "키":"값"의 형식으로 지정해주며, 함수도 지정할 수 있다. 객체에 함수를 지정할 경우 이를 메소드라고 칭한다.

const Data = {
	car: 'pontiac',
    animal: 'Egyptian vulture',
    color: 'green'
}

여기서 key는 car, animal, color이고 value는 pontiac, egyptian vulture, green이다.

파일 철을 담고 있는 박스가 곧 Data. 그리고 그 Data안에는 3개의 파일이 있다. 이 파일이 바로 key이다. car, animal, color라는 이름의 파일이 컨테이너 안에 들어가있다. 그리고 그 안에는 여러 value들이 들어가 있다.
우리는 이 잘 정리된 객체를 통해 수없이 많은 value들을 key인덱스에 담아 빠르고 정확하게 찾을 수 있다.

Object 객체 읽고 쓰고 수정하기

1) 객체 작성

const Data = {};
Data.car = 'Pontiac';
Data.animal = 'Egytian vulture';
Data.color = 'green';

Data
'Pontiac'
'Egytian vulture'
'Green'
{ car:'Pontiac', animal: 'Egytian vulture', color:'green' }

Data를 {}중괄호 안에 선언해주었다. (객체라는 뜻) 이 빈 객체에 각각의 key를 .온점을 찍어 표현하고 콜론 뒤에 'value'를 적어주었다.

2) 객체 읽기

const Data = {
	car: 'pontiac',
    animal: 'Egytian vulture',
    color: 'green'
}
Data.car
Data.animal
Data.color
or
Data['car']
Data['animal']
Data['color']

만들어진 객체의 value를 불러올 때에는 .온점과 []대괄호를 사용한다.

.온점 : 객체를 만들 때와 마찬가지로 value를 불러올 수 있다.
[]대괄호 : 스페이스가 포함된 키는 대괄호로 접근하고, 숫자로 된 키값은 대괄호로 접근해야 한다. 반드시 따옴표를 넣어주어야 한다.

3) 객체에 키와 벨류값 추가하기

배열은 추가할 수 있을까? 객체는 추가할 수 있을까? 모두 가능하다.

const Data = {
	car: 'pontiac',
    animal: 'Egytian vulture',
    color: 'green'
}

Data.array = '[1,2,3]'
Data.person = {}; // person이라는 객체를 객체 안에 생성 
Data.person.name='Edie' // person이라는 객체 안에 key+value 추가 
Data.person.gender = 'female' // person이라는 객체 안에 key+value 추가

'[1,2,3]'
{}
'Edie'
'female'

const Data = {
	...
    array: [1,2,3]
    person: {name: 'Edie', gender: 'female'}
}

만들어진 Data에 array키를 만들어 배열에 넣어준다. 그리고 다시 객체를 넣기 위해서 person이라는 키를 객체로 선언한 후, 다시 person이라는 객체 안에 key와 value값을 넣어 준다.

여기서 주의할 점은, Data.person이라는 key를 객체로 선언하지 않고 Data.person.name을 바로 만들 순 없다. 객체로 먼저 선언을 해 주어야 한다.

4) 모든 key, value 불러오기

객체를 읽을 때 한 번에 처리하고 싶다면? for in을 사용하자.

for (key in Data) {
	console.log(key) // 'car', 'animal', 'green'
    value = Data[key]
    console.log(value) // 'Pontiac', 'Egyptian vulture', 'green'
}

5) 객체 관련 메소드

Object관련 메소드를 사용할 수 있다!

Object.keys()
해당 객체 메소드는 인자로 전달된 객체의 모든 키들을 배열로 보여준다.
['car', 'animal', 'color']
Object.values()
모든 value들을 배열로 보여준다.
['Pontiac', 'Egytian vulture', 'Green']
Object.assign(target, source)
인자로 받은 객체들을 합쳐준다. 객체 3개 이상을 넣어줘도 모두 합쳐준다. source 없이 target만 써준다면 target을 그대로 클로닝 해준다.

const DataCopy = {name: 'Ann', gender: 'female'}
const newData = Object.assign(Data, DataCopy);
console.log(newData)

{...
name: 'Ann'
gender: 'female'
}

6) 객체는 레퍼런스로 저장된다

객체를 비교할 수 있을까? 같은 key, value를 각각 다른 변수명으로 저장ㅇ했다.
그 안에서 Data.color==Data.name은 같은 value를 지녔으므로 true.
다만 key, value를 담은 변수 자체를 비교하면 false가 나온다.

why? 변수에 객체 리터럴 자체를 저장하는 것이 아닐, 객체가 담긴 어느 메모리의 refernece를 저장하기 때문에 실제 Data와 DataCopy가 갖고 있는 진짜 값은 다른 것이다.

Object 객체의 개념과 사용 출처

Class란?

클래스는 객체 지향 프로그래밍의 핵심이다. '객체 지향 프로그래밍'이라는 단어에서 '객체'는 JavaScript의 데이터 타입을 말하는 것이 아니라, 말 그대로 사물을 뜻한다.

하지만 클래스는 결국 key와 value를 갖는 object를 잘 설계하기 위한 틀을 맞다. 그런데 이 객체는 특정로직을 갖고 있는 행동(method)과 변경 가능한 상태(멤버 변수) 를 갖는다.

큰 규모의 객체 혹은 비슷한 모양의 객체를 만들어야 한다면, 객체를 매번 만들어서 사용하는 것이 아니라 class라는 큰 설계도를 통해 만들 수 있다.

let ray = {
	name: 'Ray',
    price: 20000,
    getName: function(){
    	return this.name;
    },
    getPrice: function(){
    	return this.price;
    },
    applyDiscount: function(discount){
    	return this.price*discount;
    }
}

해당 클래스를 보면 프로퍼티 value에 함수가 있다. 위에서 getPrice()라는 함수를 불러오기 위해서는, ray.getPrice()처럼 객체에 접근하듯 불러올 수 있다.

접근 방식: 객체.프로퍼티

객체 내부에서, 해당 객체의 프로퍼티에 접근하려면 'this'라는 키워드를 사용한다.
그래서 getPrice메소드에서 this.price로 price키에 접근할 수 있고 20,000을 가져온다.

생성자 Constructor

객체(object)의 설계도인 클래스(class)는 문법이 비슷하다. 대신 클래스는 constructor 라는 생성자 함수가 있다. 클래스에서 constructor 이름을 갖는 메소드는 하나여야 한다.

const 변수명 = new 클래스명(key, value)

이렇게 클래스로 객체를 생성하는 과정을 '인스턴스화' 라고 부른다. 그리고 그 클래스를 통해 생성된 객체를 인스턴스라고 부른다.
*인스턴스: 클래스의 복제본

const mornig = new CarePosition('morning', 2000000);

class Car {
	constructor(name, price);
    this.name = name;
    this.price = price;
}

Car는 클래스의 이름이다. 항상 대문자, CamelCase로 작성.
Car 클래스의 instance를 생성할 때마다 consturctor 메소드가 호출된다.
constructor() 메소드는 name, price라는 인자를 받는다.
constructor() 메소드에서 this 키워드를 사용하는데, class의 실행범위(context)에서 this는 해당 객체(instance)를 의미한다.
contructor()에서 인자로 넘어오는 name, price를 사용해 Car instance의 name, price 프로퍼티에 값을 할당한다.
이렇게 클래스 내에서 name, price와 같이 변경 가능한 상태값이자 class 내의 컨텍스트 어느 곳에서나 사용할 수 있는 변수를 '멤버 변수'라고 부른다.
멤버 변수는 'this'라는 키워드로 접근한다.

인스턴스 instance

위에서 class instance를 생성했다.

인스턴스
클래스를 통해 생성된 객체.
클래스의 프로퍼티 이름과 메소드를 갖는 객체이다.
인스턴스 마다 모두 다른 프로퍼티 값을 갖고 있다.

인스턴스는 class 이름에 new를 붙여서 생성한다.
클래스 이름 우측에 () 괄호를 열고 닫고, 내부에는 constructor에서 필요한 정보를 인자로 넘겨준다.
Car클래스의 instance를 morning이라는 변수에 저장한다.
다시 Car클래스의 새로운 instance를 생성하기 위해서는 new라는 키워드가 필요한데, new 키워드는 constructor()메소드를 호출하고 새로운 instance를 return 해준다.
'Morning' 이라는 string과 2000000이라는 number를 Car 생성자에게 넘겨 주었고, name, price 프로퍼티에 각각의 값이 할당된다.

메소드 method

메소드는 함수다. 그런데 객체가 프로퍼티 값으로 갖고 있는 것을 메소드라 부른다. Class의 method는 Object(객체)의 문법과 똑같다. 다만 객체는 프로퍼티마다 ,(comma)로 구분해줘야 했지만, 클래스는 그렇지 않다.

class Car {
	constructor(name, price){
    	this.name=name;
        this.price=price;
        this.department = '선릉지점';
    }
    
    applyDiscount(discount) {
    	return this.price*discount;
    }
    changeDepartment(departmentName){
    	this.department=departmentName;
    }
}

JavaScript Class

10. 프로토타입과 클래스

객체 생성자

프로토타입과 클래스에 대해서 알아보기 전에 우선 객체 생성자라는 것을 알아보자.
객체 생성자는 함수를 통해서 새로운 객체를 만들고 그 안에 넣고 싶은 값 혹은 함수들을 구현할 수 있게 해준다.

function Animal(type, name, soound) {
	this.type = type;
    this.name = name;
    this.sound = sound;
    this.say = function() {
    	console.log(this.sound);
    }
}

const dog = new Aniaml('dog', 'bow', 'bowwow');
const cat = new Animal('cat', 'miya', 'miyaaaa');

dog.say();
cat.say();

객체 생성자를 사용 할 때는 보통 함수의 이름을 대문자로 시작하고, 새로운 객체를 만들 때에는 new라는 키워드를 앞에 붙여주어야 한다.

dog가 가지고 있는 say함수와 cat이 가지고 있는 수행하는 코드가 똑같음에도 불구하고 객체가 생성 될 때 마다 함수도 새로 만들어져서 this.say로 설정이 되고 있다.

같은 객체 생성자 함수를 사용하는 경우, 특정 함수 또는 값을 재사용 할 수 있는데 그게 바로 프로토타입이다.

프로토 타입

프로토 타입은 다음과 같이 객체 생성자 함수 아래에 .prototype.[원하는키] = 코드를 입력하여 설정할 수 있다.

function Animal(type, name, sound){
	this.type=type;
    this.name=name;
    this.sound=sound;
}

Animal.prototype.say=function(){
	console.log(this.sound);
}

Animal.prototype.sharedValue=1;

const dog = new Animal('dog', 'bowwow', 'bow');
const cat = new Animal('cat', 'miya', 'miyaa');

console.log(dog.sharedValue);
console.log(cat.sharedValue);

객체 생성자 상속받기

예를 들어, 우리가 Cat과 Dog라는 새로운 객체 생성자를 만든다고 가정해보자. 해당 객체 생성자들에서 Animal의 기능을 재사용한다면, 이렇게 구현할 수 있다.

function Animal(type, name, sound){
	this.type=type;
    this.name=name;
    this.sound=sound;
}

Animal.prototype.sharedValue=1;

function Dog(name, sound){
	Animal.call(this, 'dog', name, sound);
}
Dog.prototype=Animal.prototype;

function Cat(name, sound){
	Animal.call(this, 'cat', name, sound);
}
Cat.prototype=Animal.prototype;

const dog = new Dog('bowwow', 'bow');
const cat = new Cat('cat', 'miya'):

dog.say();
dog.cat();

새로 만든 Dog와 Cat함수에서 Animal.call을 호출해주고 있는데요, 여기서 첫번째 인자에는 this를 넣어주어야 하고 그 이후에는 Animal객체 생성자 함수에서 필요로 하는 파라미터를 넣어주어야 합니다.

추가적으로 prototype을 공유해야 하기 때문에 상속받은 객체 생성자 함수를 만들고 나서 prototype 값을 Animal.prototype으로 설정한다.

클래스

클래스는 프로그래밍 언어안에 있는 기능이지만, 자바스크립트에는 포함되지 않았기 때문에 ES5에서는 위와 같이 객체 생성자 함수를 사용하여 비슷한 작업을 구현해 왔다.

ES6에서는 class라는 문법이 추가되었는데, 우리가 객체 생성자로 구현했던 코드를 조금 더 명확하고, 깔끔하게 구현할 수 있으며 추가적으로 상속도 쉽게 가능하다.

class Animal{
	constructor(type, name, sound){
    	this.type = type;
        this.name = name;
        this.sound = sound;
    }
    say(){
    	console.log(this.sound);
    }
}

const dog = new Animal('dog', 'bow', 'bowwow');
const cat = new Animal('cat', 'miya', 'miyaaa');

dog.say();
cat.say();

//bowbwow
//miyaaa

class 사용시, 다른 클래스를 쉽게 상속할 수 있다.

class Animal{
	constructor(type, name, sound){
    	this.type=type;
        this.name=name;
        this.sound=sound;
    }
    say(){
    	console.log(this.sound);
    }
}

class Dog extends Animal{
	constructor(name, sound){
    	super('dog', name, sound)
    }
}

class Cat extends Animal{
	construtor(name, sound){
    	super('cat', name, sound);
    }
}

const dog = new Dog('bow', 'bowwow')
const cat = new Cat('miya', 'miyaaa')

dog.say();
cat.say();

practice!

class Food{
	constructor(name){
    	this.name=name;
        this.brands = [];
    }
    addBrand(brand){
    	this.brands.push(brand);
    }
    print(){
    	console.log(`${this.name}을 파는 음식점들:`)
        console.log(this.brands.join(', '));
    }
}

const pizza = new Food('피자');
pizza.addBrand('파파존스');
pizza.addBrand('도미노');

const coffee = new Food('커피');
coffee.addBrand('starbucks');
coffee.addBrand('커피빈');