[JavaScript] TWIL : Scope, Closure, 객체지향 (20/08.04~08.09)

자바스크립트의 핵심 개념인 Scope, Closure, 객체지향을 학습했다.

1. Scope는 변수에 접근할 수 있는 범위를 뜻하고, 전역(Global) Scope와 지역(Local) Scope 두 종류가 존재한다.
   1-1. Global Scope는 어느 Scope 안이 아닌 전역의 범위이며, Grobal Scope에서 변수를 선언하면 어느 곳에서든지 변수에 접근할 수 있다.
   1-2. Local Scope는 중괄호({})로 묶인 범위가 한정되어 있는 범위를 뜻한다. 간단한 예시로 function Scope가 대표적인 Local Scope 라고 할 수 있겠다.
   ( ex. function () {} / block Scope : {} )
   
   

2. 여기 Scope에 따라 다르게 작동하는 변수 선언문 'let' vs 'const' vs 'var' 가 있다.
   2-1. let은 Local Scope안에서 선언시, Block Scope까지 유효하다. 재할당은 가능하나, 재선언은 불가능하다.
   2-2. const는 Local Scope안에서 선언시, 역시 Block Scope까지 유효하다. 재할당도 불가능하고, 재선언도 불가능하다. 그러므로 절대변수나 상수 선언에 사용하면 유용하다.
   2-3. var는 Local Scope안에서 선언시, function Scope까지 유효하다. 재할당도 가능하며, 재선언 또한 가능하다.
   2-3-1. var에 대해서 : 코드 작성 시 같은 이름의 변수를 재할당하거나 재정의 하는 일은 극히 드물어야 할 것이다. 그래서 가급적 사용을 적게 하는 것이 좋겠다.
   
   

3. Closure는 외부 함수의 변수에 접근할 수 있는 내부함수 또는 이런 작동 원리를 뜻한다.
   3-1. 클로저가 왜 필요할까? 클로저는 직접호출 없이 외부함수 호출시에만 그 즉시 작동하므로 함수나 변수의 은닉에 유용하다고 한다.
   
   

4.객체지향 Javascript
4-1. 객체지향 프로그래밍(OOP : Object Oriented Programming)이란, 하나의 모델이 되는 청사진(class)를 만들고, 그 청사진을 바탕으로 한 각각의 객체(instance)를 만드는 프로그래밍 패턴이다. class에 속성과 메소드를 정의하고, instance에 이용한다.
4-2. class는 함수로 정의하거나, class라는 키워드를 이용해서 정의할 수 있다. (class 이름 첫글자는 대문자로 사용하는 것이 국룰!)
4-2-1. class를 함수로 정의하는 법

function Student(ID, name, sex, age) {
  this.ID = ID;
  this.name = name;
  this.sex = sex;
  this.age = age;
};

4-2-2. class를 class라는 키워드를 이용해서 정의하는 법 (constructor는 instance가 초기화 될 때 실행하는 생성자 함수이다.)

class Student {
  constructor(ID, name, sex, age) {
    this.ID = ID;
    this.name = name;
    this.sex = sex;
    this.age = age;
  };
};

4-2-3. 여기서 ID, name, sex, age가 속성이다. this는 함수가 실행될 때, 해당 scope마다 생성되는 고유한 실행 context다. (this에 대해서는 추후에 충분히 공부해야 할 것이다.)


4-3. class의 메소드는 prototype에 정의한다.

// Student Class를 정의하고 난후 ,

Student.prototype.entrance = function () {
  return this.name + '님, 반갑습니다!'
};

4-4. instance를 생성하고 메소드를 이용하는 법 (new라는 키워드를 통해 instance를 생성한다.)

// instance 생성
let CHO = new Student(1234, '정빈', 'female', 26)

// entrance 메소드 이용
CHO.entrance() ; // --> '정빈님, 반갑습니다!'