[Js] 자바개발자가 정리하는 자바스크립트

자바스크립트 소개 및 간단한 역사

자바스크립트는 일급 함수를 지원하는 객체 기반의 스크립트 프로그래밍 언어입니다. (일급함수란 함수를 객체, 즉 값으로 다룰 수 있을 때 일급함수라 표현합니다. 함수를 함수 인자로 전달 가능하며, 리턴 값으로도 사용이 가능합니다.)

스크립트 언어란 소스 코드를 컴파일(Compile)하지 않고도 실행할 수 있는 프로그래밍 언어입니다. 예를 들면, C언어나 자바 같은 경우에는 개발자가 작성한 소스 코드를 컴파일러를 통해 기계어 코드로 변경해야 하지만, 스크립트 언어는 별도의 컴파일 없이 내장된 번역기에 의해 번역되므로 바로 실행할 수 있습니다. 이와 같은 스크립트 언어의 예로는 자바스크립트, PHP, ASP(윈도우 서버 기반), 펄(Perl, 유닉스 계열 운영체제에서 사용), 파이썬(Python, 윈도우나 리눅스 등 특정 OS에 의존적이지 않고 독립적) 등이 있습니다.

자바스크립트는 개발 초기엔 모카, Live Script 등으로 불리다가, 자바의 인기를 등에 업어 홍보를 해보자는 초기 개발자들의 의견에 힘입어 자바스크립트로 이름을 바꾸었습니다(헷갈리게 굳이 왜…😫😫). 다들 예상하시겠지만, 자바스크립트는 자바와는 아무런 연관성이 없습니다.
간단한 예로, 타입에 대한 선언이 없는자바스크립트와 달리 자바는 타입의 자료형이 반드시 선언되어야 한다는 차이점이 있습니다.(jdk 10 이후, 자바에도 타입추론이라는 var 개념이 도입되었지만, 컴파일러가 타입을 추측하여 변수에 대한 타입의 안전성을 제공한다는 점은 분명한 차이점입니다.)

JavaScript와 ECMAScript

자바스크립트를 공부하다 보면, javaScript와 ECMAScript 에 대해서 혼동이 생길 수 있습니다.
간단히 설명하자면, ECMAScript란 ECMA International 이라는 정보 통신에 대한 표준을 제정하는 비영리 표준화 기구에서 정의한 범용 스크립트 언어이고, JavaScript란 이 ECMAScript 사양을 준수하는 범용 스크립팅 언어입니다.

둘 다 뒤에 Script라는 키워드가 붙지만, 
자바스크립트는 언어이고,
ECMA 스크립트는 규격, 표준입니다.

ECMAScript2015를 줄여서 ES6이라고 부르며, 그 이후 버전을 통칭하여 ES6+라고 부릅니다. 자바스크립트는 ES6 버전 전후로 많은 부분에서 변화와 혁신이 일어났기 때문에, ES6+ 라는 단어를 많이들 사용하고 있습니다.

자바스크립트의 특징

• 동적 형 변환
  JavaScript는 동적 형 지정 언어입니다.
  이는 변수를 선언할 때 데이터 형을 지정할 필요가 없음을 의미합니다.
  또한 데이터 형이 스크립트 실행 도중 필요에 의해 자동으로 변환 됨을 뜻합니다.
  

  var i = 1
  var ch = 'a'
  console.log(i + ch) // 1a
  ch = 1
  console.log(i + ch) // 2

• 프로토타입 기반 객체 지향(Prototypal Object-Oriented)
  프로토타입 기반 언어를 설명하는 것은 조금 난해한 부분입니다.
  설명할 개념이 많기 때문입니다.
  하지만 장담컨데, 프로토타입을 이해하는 순간 자바스크립트가 재밌어지고, 자바스크립트에 대한 이해도가 급격히 올라가는 것을 느낄 수 있을겁니다.

  (이 섹터를 따로 포스팅을 해야하나, 최대한 간단하게 이 곳에 소개해야하나 고민을 하였으나, 간단히 이 곳에 개념소개를 남기기로 합니다.)

  우선 프로토타입 기반 언어를 위키백과에서 검색해보면,

  
  

  프로토타입 기반 언어는 클래스 기반 언어에서 상속을 사용하는 것과는 다르게, 객체를 원형(프로토타입)으로 하는 복제 과정을 통해 객체의 동작 방식을 재사용 할 수 있게 한다.

  
  

  라고 나와 있습니다.

  하지만 자바스크립트는 이와는 조금 다르게, 복제가 아닌 프로토타입 링크를 통해 원형(객체)를 참조합니다.

  자, 자바스크립트의 객체가 뭔지 알아야 프로토타입 링크의 설명이 가능하니, 객체를 먼저 알아보겠습니다.

  자바스크립트에서 단순 원시 타입(simple primitive)인 문자열, 숫자, 불리언, null, undefined를 제외한 모든 타입은 객체입니다.

  자바스크립트에서 객체는 언제나 함수(Function)로 생성됩니다.

  function Food() {} // 함수
  
  var foodObject = new Food() // 함수로 객체를 생성

  foodObject는 Food라는 함수로 생성된 객체입니다. 우리가 흔히 쓰는 일반적인 객체 생성도 예외는 아닙니다.

  var obj = {}

  이 코드는 사실 다음과 같습니다.

  var obj = new Object()

  자바스크립트에서 이 객체는 원형 객체(조상)으로부터 생성되며, 생성된 객체는 원형 객체에 대한 프로토타입 링크(__proto__)를 가지게 됩니다.

  이 원형 또한 객체이기 때문에 이 원형은 또 다른 객체를 참조하게 될 것이며, 아래와 같이 연속된 프로토타입 링크를 통해 자바스크립트 객체의 최초 조상인 Object.prototype 까지 연결되게 됩니다.

  

  Object.prototype 객체에는 toString, hasOwnProperty 함수 등과 같이 자바스크립트 객체에서 흔히 사용하던 속성들이 정의되어 있고, 그로 인해 모든 객체에서 해당 속성들을 사용할 수 있다.

  이처럼 자바스크립트에서 생성된 모든 객체는 Object의 자식입니다. 따라서 개발자가 생성한 모든 객체는 Object Prototype 에 있는 모든 속성을 사용할 수 있습니다.

  
  

  마무리를 지어보자면, prototype을 통해 개발자는 개발자가 만들고자 하는 자바스크립트 객체의 속성들을 프로토타입 링크를 통해 불필요한 메모리낭비 없이 공유할 수 있습니다.

  function Food() {}
  
  let apple = new Food()
  let pineapple = new Food()
  
  Food.prototype.getType = () => 'FOOD'
  
  console.log(apple.getType()) // FOOD
  console.log(pineapple.getType()) // FOOD

  
  
  
  

• 자바스크립트는 간편하면서도 강력한 텍스트 표기법인 JSON을 가지고 있으며, 이로 인해 구조적으로 비동기 프로그래밍에도 아주 유리합니다. (AJAX와 자바스크립트의 관계에 대해 더 알아보시려면, https://m.blog.naver.com/magnking/220942289678)

  
  

• 자바스크립트는 확장성이 아주 뛰어난 언어입니다.

  자바스크립트만 학습하더라도 React.js나 Vue.js, Angular.js 등의 SPA 웹앱개발, React Native를 통한 iOS/안드로이드 앱개발, 서버 사이드 애플리케이션 개발이 가능한 node.js, 데스크탑 앱 개발이 가능한 Electron 등을 쉽게 파악할 수 있습니다.

자바스크립트의 문제점

이러한 화려한 장점들과는 반대로 태생적 단점들로 인해 자바스크립트를 좋아하지 않는 개발자들을 주변에서 많이 보았습니다. 아래와 같은 문제점들이 자바스크립트를 매력적으로 보이지 않게 하는 요소들입니다.

• 클라이언트 보안
  자바스크립트의 소스는 브라우저를 통해 유저에게 보일 수 있으므로, 악의적인 의도로 악성 코드를 웹사이트에 삽입하는 것이 매우 쉽습니다.

  
  

• 브라우저 지원
  브라우저들마다 자바스크립트 해석 엔진이 다르기 때문에, 브라우저들 간 지원기능에 한계가 있을 수 있습니다.

  
  

• 단일 상속
  자바스크립트는 단일 상속만 지원하고, 다중 상속은 지원하지 않습니다.

  
  

• 은닉화의 한계
  자바스크립트는 자바나 TypeScript와 달리 private 을 통한 은닉화 기능이 아주 제한적입니다. private 기능이 있긴 하지만 지원하는 브라우저가 많지 않습니다. 그래서 자바스크립트에서는 클로저 모듈 패턴을 통해 private 을 간접적으로 구현하기도 합니다.

  var updateClickCount = (function() {
  var counter = 0
  
  return function() {
    ++counter
  }
  })() // 즉시 호출

  위에서 updateClickCount는 선언과 동시에 딱 한번 실행됩니다. 내부에서 counter 값을 0으로 set하고 익명의 함수를 리턴합니다. 리턴되는 익명의 함수는 Closure를 통해 counter의 값에 접근할 수 있습니다. Closure를 통해 리턴되는 함수가 private 변수 counter를 가지도록 해주는 셈이죠. 변수 counter는 익명 함수의 Scope에서 안전하게 보호되고 함수를 통해서만 값의 변경을 허용합니다.

  
  

• 추상화의 부재
  타입스크립트에는 interface 기능을 통해 청사진(blueprint)을 미리 설계해 놓을 수 있습니다. 이 클래스는 이 설계서대로 동작할거야 라고 표현할 수 있습니다. 하지만 자바스크립트는 이러한 인터페이스 기능이 없습니다. 자바나 타입스크립트처럼 타입의 안정성을 추구하는 프로그래밍 언어에서는 흔히 볼 수 있는 추상화지만, 타입에 관대한 자바스크립트답게 interface 기능을 구현하지 않았습니다. ^^;;

  
  

• 불변성 보장 기능 부재
  함수형 프로그래밍을 지원하는 것이 장점인 자바스크립트가 immutable함을 보장해 주지 않는 것은 큰 아이러니입니다. 자바스크립트에서는 객체를 너무나도 손쉽게 변경시킬 수 있습니다. 언제든 클래스의 속성을, 심지어 클래스 밖에서도 변경가능합니다.

  
  

  const 라는 키워드만으로 함수형 프로그래밍이 요구하는 수준의 불변성을 실현시키기는 어렵습니다. const를 통해 객체의 주소값 자체를 변경시킬 수는 없어도, 객체 내부의 속성이 변경되는 것 까지는 막지 못하기 때문입니다. 물론, Object.assign 이나 Object.freeze 등의 방법이 찾아보면 있긴 있으나, 깊은 깊이까지의 불변성을 보장해주지 못합니다. 그래서 자바스크립트 개발자들은 immutable.js 와 같은 라이브러리의 도움을 받곤 합니다.

  
  

  이러한 변경이 쉬운 문제는 오류를 웹브라우저 실행중에 나타나게 할 수 있는 단점도 존재합니다. 즉, 실제로 어떤 서비스를 운영할 때에 테스트할 때 발견되지 않았던 버그가 고객이 운영중에 발생할 수도 있다는 뜻입니다.(수많은 테스트와, 또는 디자인 패턴을 통해 방지를 할 수는 있겠으나, 문제의 발생 여지만으로도 단점으로 뽑기에 충분하다고 생각합니다.)

  
  

단점을 너무 장황하게 늘어놓아서, 매력이 없는 언어처럼 보이지만 자바스크립트 진영은 꾸준히 이러한 단점들을 극복하는 중이며, 더 나은 언어로 성장하고 있습니다. 또한 자바스크립트는 여러 통계사이트를 통틀어도 웹 개발에서 가장 인기있는 언어 1위를 달리고 있습니다.

다음 포스팅에서는, ES6 이후 달라진 자바스크립트의 매력에 대해 글을 적어보겠습니다.

참고 :

https://medium.com/sjk5766/javascript-closure%EB%8A%94-%EC%99%9C-%EC%93%B8%EA%B9%8C-81bcdef6352
위키백과

읽어주셔서 감사합니다.🖐