[Javascript] Javascript의 특징

Javascript의 특징

1. Javascript는 Scripting 언어

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

var value = 123;
var book = function() {		// function object로 오브젝트 생성.
  /* 컴파일 ✕
  var point = 456;
  var getPoint = function(){
    return point;
  };
  getPoint();
  */
};
book();				// 컴파일 후 실행

✏️ 컴파일 순서

✓ 소스파일의 위에서 아래로 컴파일
✓ function 키워드를 만나면 function 오브젝트를 생성
🚨 이때, 함수 안의 코드는 컴파일 ✕

---

2. OOP : Object Oriented Programming (객체 지향 프로그래밍 언어)

✏️ Object (객체)

✓ 개념적 접근
✓ Behavior(행위)와 Attribute(속성)으로 구성

✏️ Object (객체)를 형상화

✓ 행위 ⇨ 메소드
✓ 속성 ⇨ 프로퍼티
✓ 객체 ⇨ 클래스

✏️ Class (클래스)

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

---

3. JS 객체 형태

✏️ Object 오브젝트 형태

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

// 인스턴스를 생성할 수 없음.

✏️ Function 오브젝트 형태

function readBook(param) { 코드 };

// 인스턴스를 생성할 수 없음.
// 객체이지만, OOP의 객체라고 하기에는 부족
// 객체에 메소드가 하나 있는 모습

---

4. prototype

✓ JS의 OOP 구현 방법 : prototype에 메소드 연결
✓ prototype 형태

✓ prototype에 연결하여 작성

var Book = function(){};		// Book 함수 작성

Book.prototype.getBook = function(){	// Book.protype에 getBook 메소드 연결
  return "JS";				// prototype이 오브젝트이므로 {이름 : 메소드} 형태로 연결 가능
}

✏️ getBook 함수 연결 확인

✓ prototype에 메소드를 연결하여 작성
✓ (다른 언어는 class 안에 메소드와 프로퍼티 작성)

✓ ES6에서 class에 메소드 작성
✓ (but, 내부에서 prototype에 연결)

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

---

5. Instance

✓ Instance : Class를 new 연산자로 생성한 것
✓ 생성 목적
→ Class에 작성된 메소드 사용
→ 인스턴스마다 프로퍼티 값 유지

✏️ new 연산자

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

✓ 인스턴스를 생성하여 반환
✓ 파라미터 : 생성자 함수로 넘겨줄 값을 소괄호()에 작성

var Book = function(point){
  this.point = point;
};
Book.prototype.getPoint = function(){
  return this.point + 100;
};
var book1 = new Book(200);
/*
1. new Book(200)으로 인스턴스 생성 (book1이 인스턴스 이름)
2. 파라미터 값을 생성하는 인스턴스에 설정
3. 따라서 인스턴스마다 고유의 값을 가질 수 있음
4. book1.getPoint() 형태로 prototype에 연결된 getPoint() 메소드 호출
*/

console.log(book1.getPoint());

[실행 결과]
300

---

✏️ instanceof

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

console.log(book1 instanceof Book);

[실행 결과]
true

---

6. 메소드 호출 형태

✏️ Javascript 형태

✓ 데이터로 메소드 호출
✓ 오브젝트의 함수 호출
✓ 인스턴스의 메소드 호출

✏️ Object 확장

// NameSpace로 사용
Book = {};
Book.Javascript = {};
Book.Html = {};