181112 - TIL

---

주제: 자바스크립트

강의: 자바스크립트 부트캠프

날짜: 2018.11.12

강의자: 김민태님

---

객체는 순서가 없는 값의 집합

객체를 만드는 가장 기본적인 방법 - 객체 리터럴

let box = {};//객체 리터럴

Function a(){//함수사용 객체생성, 인자로 값을 받아 객체에서 변수로 사용.

    let box = {}

    Return box;

}

결과는 객체리터럴 방법과 함수사용법과 동일하다

Let a = {};

Let b = {};

위 객체는 내용적으론 둘다 값이 없다로 같지만,

자바스크립트의 객체는 내용적으론 같아도 물리적으로는 다르다!

각 객체는 유일하다.

New 연산자 사용

함수형객체 생성방식을 조금 더 쉽게 사용할 수 있도록.

객체리터럴방식과 함수사용 방식을 이해해야 new연산자 사용방식을 이해할 수 있다

function CreateBox(width, height, borderRadius, backgroundColor) {

this.width = width;

this.height = height;

this.borderRadius = borderRadius;

this.backgroundColor = backgroundColor;

}//return문이 없다.

let box = new CreateBox(200, 200, 5, 'red');

console.log(box);

리터럴방식의 단점

값이 고정되기 때문에 같은구조의 객체를 만들 때 여러번 작성되어야한다.

이러한 단점을 보완하기 위해 함수형방식을 사용.

new연산자 뒤에 함수를 호출을 하게 되면 자바스크립트는

1. 빈 객체를 생성한다{}
2. 이 빈 객체는 자바스크립트가 생성한 것이기 때문에 이 객체를 지시할 수 있는 키워드가 this 이다. This =={} 와 같다.
3. 자바스크립트 객체 특징 중 어떠한 값을 접근하려고 할때 값이 없으면 언디파인드. 값이 없는데 이름을 주고 값을 대입하면 만들어서 집어넣는다.(자바스크립트의 동적바인딩) 대입문이 없다면 undefined!!!
4. new연산자와 함께 호출된 함수는 리턴이 명시적으로 있건없건 new연산자로 생성된 객체를 리턴한다.

함수사용법과 new연산자 객체와의 차이점은 함수사용법은 어떤 함수에서 만들어진 객체인지 문법적으로 확인이 불가능. Instance of를 활용하여 어떤 함수로 만들어졌는지 확인이 가능.

-> 어떤 함수에서 객체가 만들어진건지 왜 알아야할까? —> 소프트웨어가 커지면서 값을 검증하거나 오류처리할때 사용한다. 유효성검증.

### 동적바인딩

객체 생성시에도 객체 속성 생성이 가능. 객체 생성 후에도 추가, 삭제가 가능.

삭제할 땐 delete 객체.키명;

### 객체키에 접근하는 방법.

기존까지 객체키에 접근하는 방법은 

box.width;

이렇게 코드에 박혀있는데 값으로 넣고 빼고싶을때에는 아래와 같은 방식을 쓴다.

객체의 속성명을 값으로 사용하는 방법이 box.[] 브라켓을 사용한다.

let box = {

width: 200,

height: 200

};

box['borderRadius'] = 5;

box['backgroundColor'] = 'red';

box['border-color'] = 'blue’;//식별자로 꺼낼 수 없다!

console.log(box);

위와같이 사용했을 때 얻는 형태적이득이 있다.

box.backgroundColor = 5; 형태로 사용시에는 . 뒤가 식별자이기 때문에 식별자 명명 규칙이 적용된다. 

하지만 computed생성방법을 사용할때에는 [‘backgroundColor’]식으로 사용시에는 식별자가 아니기 때문에 -, 숫자로 시작 등 모두 사용이 가능하다

단 이렇게 작성시에는 식별자로 꺼내올 수 없다.

### 메소드

function calcArea(r) {

return r * r * Math.PI;

}

let circle = {

radius: 200,

backgroundColor: 'blue',

area: function() {

return this.radius * this.radius * Math.PI;

}

};

let area1 = calcArea(circle.radius);

let area2 = circle.area();

console.log(area1, area2);

함수방식의 장점. 어떠한 원이든 값만 넣으면 계산해서 값을 리턴한다. 범용성이 있다.

객체방식은 전용성이 있다. 객체안에 있는 함수이기 때문에 자기가 속한 객체의 반지름 값만 계산할 수 있다.

로직을 숨기고 싶다면 객체안의 메소드 방식으로 사용.

객체 안의 타입을 딱 두가지로 나눈다면 데이터, 함수, 데이터는 단순 값이지만 함수는 로직을 담고 있다.

함수는 기능적으로 작동하는 코드를 가지고 있다. 객체 스스로 자신의 활동을 노출시켜줄수 있는 장치.

데이터를 가지고 있는 것을 속성이라고 부르고

로직을 가지고 있는 것을 메소드라고 부른다.

위의 예제에서 radius, backgroundColor는 속성.

area는 메소드.

### 값의 참조와 복사

메모리관리. 메모리에 주소를 메긴다. 이 메모리를 한번에 읽어올수 있는 크기를 32비트, 64비트.

프로그램이나 데이터를 저장장치에서 실행가능한 메모리에 적재하는것을 load라고 한다.

값이 작아서 메모리에 직접 들어가는 것을 값의 복사

값이 너무 커서 메모리에 안들어가고 메모리에는 그 데이터가 있는 주소값이 있을 때는 참조

A = 10;

B = A; //b = 10;

B = 20;// a == 10, b == 20;

a= 너무나도 큰수;

b = a;//b에는 a가 들어있는 위치값이 들어간다.

a와 b가 가르키는 값이 같다.

만약 b = 너무나도 크크크크큰수; 

a= 너무나도 크크크크큰수;

모든 객체는 참조!! 복사가 일어나지 않는다.(숫자, 문자열, 블리언, 언디파인트를 제외한 것은 싹다 객체라고 본다. 함수, 배열, 객체는 모두 객체)

객체가 아닌 기본값 데이터타입은 복사된다.

function double(v, o) {

v = v * 2;

o = {value : 0};

}

let p1 = 100;

let p2 = { value: 100 };

double(p1, p2);

console.log(p1, p2);//200, { value :100 }

### 색이다른 박스 고르기 게임만들기

---

---

초보 퍼블리셔의 공부정리 블로그입니다.

내용에 오류가 있거나 수정사항이 있다면 꼭 댓글 부탁드립니다