자바스크립트 학습 27일차

# 자바스크립트 학습

# 자바스크립트 특징

## 자바스크립트의 특징

• 자바스크립트는 스크립팅(Scripting) 언어이다.
• 스크립팅 언어의 특징

소스 파일의 코드를 사전에 컴파일하여 실행 파일을 만들지 놓지 않고,
사용하는 시점에 컴파일하고 실행한다.

var value = 123;

var book = function() {
	var point = 456;
    var getPoint = function() {
    	return point;
    };
    
    getPoint();
};

book();

•  컴파일 순서

소스 파일의 위에서부터 아래로 컴파일.

function 키워드를 만나면 function 오브젝트를 생성.

이때, 함수 안의 코드는 컴파일하지 않음, 함수가 호출되었을 때, 위의 방법으로 컴파일한다.

## 자바스크립트의 객체지향

• 객체 지향 프로그래밍 언어 (OOP : Object Oriented Programming)
• 자바스크립트는 객체 지향 언어이다.
• 자바스크립트 OOP 구현

다른 언어의 OOP 구현과 차이가 잇으므로 비교하는 것은 의미 없다.
자바스크립트 특징이 반영된 OOP 구현

## OOP와 객체

• 객체(Object)

개념적 접근
행위(Behavior)와 속성(Attribute)으로 구성
행위 : 먹다, 마시다 등
속성 : 밥, 사이다 

• 객체를 형상화 하면

행위가 메소드가 되고,
속성이 프로퍼티가 된다.
객체가 클래스가 된다.

• 클래스(Class)

행위와 속성을 정의한 것으로 인스턴스로 생성하여 프로그램에서 사용한다.

 

# 자바스크립트 객체 형태

## 자바스크립트 객체 형태

• Object 오브젝트 형태

var book = {
	read: function(param){코드}
};

• 오브젝트 형태는 인스턴스를 생성할 수 없다.
• Function 오브젝트 형태

function readBook(param){코드};

객체이지만, OOP의 객체라고 하기에는 부족하다.
객체에 메소드가 하나 있는 모습.

## prototype

• 자바스크립트의 OOP 구현 방법

prototype에 메소드를 연결한다.

• prototype에 연결하여 작성한다.

var Book = function(){};

Book.prototype.getBook = function() {
	return "JS북";
};

=>
Book 함수 작성
Book.prototype에 getBook 메소드 연결
prototype이 오브젝트이므로
{이름: 메소드} 형태로 연결할 수 있다.

• 다른 언어는 class 안에 메소드와 프로퍼티를 작성하지만, 자바스크립트는 prototype에 메소드를 연결하여 작성한다.
• ES6에서 class에 메소드를 작성한다. 하지만 자바스크립트 내부에서는 prototype에 연결한다.

class Book {
	constructor(title) {
    	this.title = title;
    }
    getBook() {
    	return this.title;
    }
};

 

# 자바스크립트 인스턴스

## 인스턴스

• Instance란 Class를 new 연산자로 생성한 것이다.
• 인스턴스의 목적

Class에 작성된 메소드를 사용하는 것.
인스턴스마다 프로퍼티 값을 유지하는 것.

예)
축구 경기에서
각 팀 적용되는 규칙은 같지만(메소드),
팀마다 점수는 다르다.(프로퍼티 값)

## new 연산자

구분	데이터(값)
constructor	생성자
파라미터	값opt
반환	생성한 인스턴스

• 인스턴스를 생성하여 반환한다.

new Book("JS책");

인스턴스를 생성하므로 Book()을 생성자 함수라고 부른다.

코딩 관례로 첫 문자를 대문자로 작성한다.

• 파라미터의 경우 생성자 함수로 넘겨 줄 값을 소괄호()에 작성한다.

var Book = function(point) {
	this.point = point;
};

Book.prototype.getPoint = function() {
	return this.point + 100;
};

var oneInstance = new Book(200);

log(oneInstance.getPoint());

=>
300

new Book(200)으로 인스턴스 생성
oneInstance가 인스턴스 이용
파라미터 값을 생성하는 인스턴스에 설정
따라서 인스턴스마다 고유의 값을 가질 수 있음
oneInstance.getPoint() 형태로 prototype에 연결된 getPoint() 메소드 호출

## Instanceof

• 오브젝트로 생성한 인스턴스 여부를 반환
• instance가 object로 생성한 인스턴스이면 true, 아니면 false 반환

instance instatnceof object

instance 위치에 인스턴스 작성.
object 위치에 비교 기준 오브젝트 작성.

var Book = function(point) {
	this.point = point;
};

Book.prototype.getPoint = function() {
	return this.point + 100;
};

var oneInstance = new Book(200);

log(oneInstance instanceof Book);

=>
true

new Book()으로 인스턴스 생성
oneInstance instanceof Book
oneInstance가 Book()으로 생성한 인스턴스이므로 true 반환

 

# 메소드 형태

## 메소드 호출 형태

• 데이터 형태가 아래처럼 배열로 만들어져 있을 때

배열 : ["book", "책", 123]

• OOP의 일반적인 형태는 아래와 같다.

var data = ["book", "책", 123];

var obj = new Array();

var result = obj.concat(data);

log(result);

=>
[book, 책, 123]

new Array()로 인스턴스 생성.
obj.concat(data);
obj 인스턴스의 concat() 호출
데이터를 파라미터로 넘겨 준다.
자바스크립트는 일반적으로 이 방법을 사용하지 않는다.

• 자바스크립트의 형태1 - 데이터로 메소드 호출

var data = ["book", "책", 123];
var result = data.concat();
log(result);

=>
[book, 책, 123]

data.concat();
엔진이 data 타입에 따라 오브젝트 결정
data가 배열이므로 Array의 concat() 호출 data를 파라미터로 넘겨 준다.

• 자바스크립트 형태2 - 오브젝트의 함수 호출

var data = ["Book", "책", 123];
var bookObj = {
	concat: function(data) {
    	return data.concat();
    }
};
log(bookObj.concat(data));

=>
[book, 책, 123]

• 자바스크립트 형태3 - 인스턴스의 메소드 호출

var data = ["Book", "책", 123];
var Book = function(data) {
	this.data = data;
};
Book.prototype.concat = function() {
	return this.data.concat();
};

var oneInstance = new Book(data);

log(oneInstance.concat());

=>
[book, 책, 123]

• Object 확장

네임스페이스로 사용.
Book = {};
Book.Javascript = {}; Book.Html = {};

## 메소드 사용 팁

• 메소드를 알 수 없을 때

MDN을 활용한다.

MDN에서 "오브젝트 이름" 으로 검색한다.

왼쪽의 리스트에서 메소드 이름을 찾는다.

메소드 이름이 시맨틱을갖고 있으므로, 메소드 이름으로 기능 예측이 가능하다.

• 메소드를 알고 있을 때

기능을 정확하기 사용하기 위해 사용한다.