[자바스크립트] 자바스크립트 소개

- 웹은 물론이고, 하이브리드 앱, 서버사이드(nodejs), 데스크탑(electron) 등에서도 자바스크립트는 사용됨 : 환경의 다양화

         

1) html, css로 이뤄진 정적인 웹을 동적으로 바꾸어주는 역할(웹브라우저를 프로그래밍적으로 제어)로 사용이 되었음

2) 구글의 V8 자바스크립트 엔진(속도 개선)을 기반으로 한 nodejs(웹서버)를 통해 서버사이드 개발 가능해짐

3) 프론트앤드 영역에서 Angular, React, Vue 등 자바스크립트 프레임워크들이 각광을 받고 있음

4) 백엔드 영역에서 nodejs, soketIO, express 등 자바스크립트 프레임워크들이 각광을 받고 있음  

5) Google Apps의 Script 편집기에 자바스크립트를 삽입(문서 제어)하여 사용가능함

- 함수 기반

1) 자바스크립트는 함수 기반 언어이다. 함수(메서드)를 가지고 명령을 제어함 

2) 프로토타입 함수 선언을 할 때에는 첫글자를 대문자로 하는 암묵적 합의가 있음

- 객체지향형 언어 : 클래스가 없어 객체지향이 아니라고 생각하는 사람들이 있지만, 프로토타입 기반 객체지향 방식의 객체지향언어

- 클래스 기반(C++, Java, C#, Ruby 등)과 자바스크립트(함수 프로토타입 기반 객체지향)의 차이

     1) 클래스 기반 언어는 객체(인스턴스, 사람이라는 클래스, 박진형이라는 객체)의 형식이 정의된 클래스 개념을 가지고 있음

     2) 클래스 기반 언어는 클래스 간의 상속 개념(부모 클래스에 기반되어 만들어진 자식 클래스개념)을 가지고 있음

     3) 자바스크립트는 클래스를 사용하지 않는다. 그러나 함수(function)과 new를 통해 클래스 개념을 비슷하게 사용할 수 있음

     4) 자바스크립트는 기존 클래스 기반 언어의 클래스 개념처럼 함수를 사용하지않음. 프로토타입 개념을 사용함

     5) 함수로 객체를 선언하고 같이 만들어진 프로토타입에 공통 속성을 저장하고, new로 객체를 만들어 사용하는 방식임

     6) 함수는 앞으로 new를 통해 만들 존재(객체)들이 하나의 종류로 묶어냄과 동시에 하나의 종류임을 나타내기위해 존재함

     7) 프로토타입(이것도 Prototype이라는 객체)은 객체의 최상위 함수의 공통된 속성을 저장하는 역할을 함

     8) new로 함수의 객체를 만들 수 있음

function Person(){ 
    this.eyes = 2;
    this.nose = 1;
 }
 
var kim = new Person();
var park = new Person();
 
console.log(kim.eyes);
 

1) kim과 park은 eye와 nose를 공통적으로 가지고 있는데, 메모리에는 각각 2개씩 총 4개의 메모리가 할당됨.

2) 프로토타입이 이런 문제를 해결해줌

function Person(){ }
 
Person.prototype.eyes = 2;
Person.prototype.nose = 1;
 
var kim = new Person();
var park = new Person();
 
console.log(kim.eyes);
 

1) 프로토타입을 통해 공통 속성과 값을 지정해둠

2) Person 함수로부터 new로 kim과 park이라는 객체를 만들면 프로토타입으로 선언되어있는 공통 속성, 값을 참조하는 방식

     

     객체를 사용하면서, 메모리를 아낄 수 있음

     어떻게 객체를 사용할 수 있게 되었는지 조금 더 파고 들어서 아래부터 설명할 것이다.

     

- 함수와 객체 선언, 내부적으로 어떻게 동작하나?

     1) 자바스크립트에서 모든 객체(Object)의 조상은 함수(Function)이다.

     2) Object(변수 선언), Array, Math 등 일반적으로 사용되는 객체도 조상은 함수이다.

    

3) 객체의 조상인 함수가 정의될 때 2가지 일이 진행됨 (일러 이미지 넣기)

1) 해당 함수에 Constructor(생성자) 자격 부여 : new를 통해 객체 생성 가능

2) 프로토타입 객체 생성 

- prototype이라는 속성을 통해서 프로토타입 객체에 접근 가능함 

      - 프로토타입 객체의 prototype 속성에 해당 함수의 공통된 속성 선언 및 값 지정(초기화 과정 == constructor)을 할 수 있음 

     3) 프로토타입 객체는 일반적인 객체이므로 속성을 마음대로 추가/삭제할 수 있음

     4) 함수를 만들면 객체를 생성할 수 있고, Prototype 객체를 생성하고 Prototype은 constructor 속성을 기본으로 가지고 있기 때문에 해당

     함수의 초기화 작업을 할 수 있음. 

     5) new로 함수 객체를 만들면 함수를 만들때 생성된 Prototype 객체 속성인 prototype하위 속성(함수의 공통 속성과 값)값을 부여받음

- 부여받을 수 있는 이유는 Prototype 객체의 속성 __proto__ 때문임

- 이를 Prototype Link라 하는데, new를 통해 객체를 만들고 그 결과를 펼쳐보면 똑같은 __proto__를 가지고 있음

          - 예시로 알아보기

          Person 함수를 만들고 같이 만들어진 Prototype 객체의 prototype 속성 하위에 eye, nose 속성값을 넣어두면 new를 통해 kim을 만들

          었을 때 __proto__ 속성에 의해 알아서 연결이 됨.

    

   객체에 그 값이 없다면 상위 Prototype을 탐색함. 그 결과 값이 있을 경우 값을 리턴하고, 없을 경우 undefined를 리턴함

          __proto__ 속성을 통해 new로 생성된 객체와 상위 Prototype이 연결된 형태를 프로토타입 체인(Chain)이라 함

- 향후계획 : 환경보다 언어 자체에 집중해서 공부를 하고, 필요한 환경에 따라 그에 맞춘 공부를 다시할 예정, 포스팅도...!

- 참고자료

     1) [PoiemaWeb 블로그] 자바스크립트란 무엇인가? 무엇을 할 수 있는가? : http://poiemaweb.com/js-introduction

     2) [Medium 블로그 - 오승환] 프로토타입 이해하기 : https://goo.gl/S7Y6yW 

     3) [MDN] 객체지향 자바스크립트 소개 : https://goo.gl/txh4X0

     4) [생활코딩] 자바스크립트 언어 소개 : https://opentutorials.org/course/743/4650