WIL(2주차)

김성욱·2022년 10월 2일
0

자바스크립트란?

자바스크립트(영어: JavaScript)는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용되며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있다. 자바스크립트는 본래 넷스케이프 커뮤니케이션즈 코퍼레이션의 브렌던 아이크(Brendan Eich)가 처음에는 모카(Mocha)라는 이름으로, 나중에는 라이브스크립트(LiveScript)라는 이름으로 개발하였으며, 최종적으로 자바스크립트가 되었다. 자바스크립트가 썬 마이크로시스템즈의 자바와 구문이 유사한 점도 있지만, 이는 사실 두 언어 모두 C 언어의 기본 구문에 바탕을 뒀기 때문이고, 자바와 자바스크립트는 직접적인 연관성은 약하다. 이름과 구문 외에는 자바보다 셀프나 스킴과 유사성이 많다. 자바스크립트는 ECMA스크립트(ECMAScript)의 표준 사양을 가장 잘 구현한 언어로 인정받고 있으며 ECMAScript 5(ES5)까지는 대부분의 브라우저에서 기본적으로 지원되었으나 ECMAScript 6 이후부터는 브라우저 호환성을 위해 트랜스파일러로 컴파일된다.

자바스크립의 역사

1993년, 일리노이 대학교 어배너-섐페인의 NCSA는 최초의 대중적인 그래픽 웹 브라우저인 NCSA 모자이크를 출시하였다. 1994년, 모자이크 커뮤니케이션스라는 이름의 회사가 캘래포니아주 마운틴 뷰에 설립되었으며 모자이크 넷스케이프를 만들기 위해 오리지널 NCSA 모자이크 개발자들을 고용하였다. 그러나 NCSA 모자이크와 코드는 의도적으로 공유하지 않았다. 이 기업의 브라우저의 내부 코드명은 모질라였으며 이는 "Mosaic and Godzilla"에서 비롯된 용어이다. 이 웹 브라우저의 첫 버전인 모자이크 넷스케이프 0.9는 1994년 말에 출시되었다. 4개월 후 브라우저 시장의 3/4를 잠식하면서 1990년대에 주된 웹 브라우저가 되었다. NCSA의 상표 소유권 문제를 회피하고자 이 브라우저는 같은 해에 "넷스케이프 내비게이터"로 이름을 바꾸었으며 이 기업은 "넷스케이프 커뮤니케이션스"라는 이름을 취하였다. 넷스케이프 커뮤니케이션스는 웹이 더 동적으로 변화할 필요가 있었음을 실감했다. 기업의 설립자 Marc Andreessen은 HTML에 코드를 웹 페이지 마크업으로 직접 작성하면서 웹 디자이너들과 파트타입 프로그래머들이 이미지, 플러그인 등의 요소를 쉽게 조합할 수 있는 글루 언어(glue language)가 필요했다고 믿었다.

1995년, 넷스케이프 커뮤니케이션스는 스킴 프로그래밍 언어를 넷스케이프 내비게이터에 임베디드하기 위해 브렌던 아이크를 영입하였다. 시작 전에 넷스케이프 커뮤니케이션스는 넷스케이프 내비게이터 썬의 더 정적인 프로그래밍 언어인 자바를 포함시키기 위해 썬 마이크로시스템즈와 협업했으며 이는 사용자에게 웹 기술 및 플랫폼을 채택시키려는 마이크로소프트와 경쟁하기 위해서였다. 넷스케이프 커뮤니케이션스는 이때 자신들이 만들기 바랐던 스크립트 언어가 자바를 구현할 것이고 비슷한 문법을 채용하는 것이 좋겠다고 생각했으며 펄, 파이썬, Tcl, 스킴 등 기타 언어를 채택하는 것을 배제하였다. 경쟁적인 제안에 대항하여 자바스크립트 개념을 방어하기 위해 이 기업은 프로토타입이 필요했다. 아이크는 1995년 5월 10일 안에 이를 작성했다.

원래 모카(Mocha)라는 이름으로 개발되었으나 이 언어는 공식적으로 라이브스크립트(LiveScript)로 불렸으며 이 당시 1995년 9월 넷스케이프 내비게이터 2.0의 베타 릴리스가 이루어졌으나 나중에 이름이 자바스크립트로 바뀌었는데 이는 12월 넷스케이프 내비게이터 2.0 베타 3에 채용되었다. 이름의 최종 선정에 혼란이 야기되었는데 이 언어가 자바 프로그래밍 언어에서 파생되었다는 인상을 심었으며 이러한 선택이 마케팅적인 특징을 보였고 이는 넷스케이프가 당시 인기있는 웹 프로그래밍 언어로서 자바스크립트를 내밀기 위한 것이었다.

자바스크립의 ES란?

ECMA Script 의 약자로, European Computer Manufacturers Association Script를 의미한다.
과거 웹 브라우저 시장에서 점유율 싸움을 하고 있던 시절, 마이크로소프트 사에서도 IE3의 JScript를 비롯하여 여러 언어들이 생겨나자 ECMA에서 javascript에 대한 표준을 정하게 되었다. ECMA에서는 Javascript의 표준만 정한것이 아니라 다른 표준안도 정하기 때문에 구분을 위한 것이 필요했고, 그것이 262가 되었다. ECMA 262는 자바스크립트의 표준규격을 의미하게되었다.
Javascript는 언어이며 ECMA Script 즉, ES는 규격, 표준 등의 스펙을 의미한다.

ES5 와 ES6의 차이

변수 선언의 방식

ES5 : 변수 선언시 var는 function scope를 사용, 함수의 스코프를 가지고 있기 때문에 블록과 관계없이 접근이 가능했고, 저역범위로 스크립트 파일 어디서나 참조가 가능했다. 스크립트가 방대해 질경우 동일 변수명에 다른 값을 넣어서 시스템상의 문제가 발생했다.
ES6 : let과 const로 선언, block scope이기 떄문에 if문이나 블록내에서만 참조가 가능하다.

함수 선언 방식

ES5 : 현재도 사용하는 함수 선언식과 표현식으로 함수 선언
ES6 : arrow function 추가, let plus = (a,b) => {return a+b}

문자열 처리

ES5 : '',""로 구분하여 + 연산자로 항상 이뤄줘야했다.
ES6 : `(백틱}과 ${} 부호를 통해 한줄로 표현 가능

객체의 처리

ES5 : 객체 내부함수에서 function keywork를 적어 함수를 명시
ES6 : 일반 메서드 처럼 name()과 같이 사용할수 있고, 변수와 object 와 key가 같다면 변수명만 적어주어도 변수명으로 key:value 생성가능

스터디 자료

  • 객체란?
    흔히 실제로 존재하는 사물을 의미하는데, 자바스크립트의 기본 데이터 타입 중 하나이다.

  • 객체내부의 값 : 속성(property)
    - 배열 내부의 값: 요소(element)
    - 속성 = key : value
    - 객체의 타입 : object
    - 배열은 키값으로 index를 사용

  • 키값에는 식별자와 문자열을 모두 사용 가능
    식별자로 사용할 수 없는 키워드, 숫자로 시작, 특수문자 포함( _ , $ 제외), 공백문자 들로 이루어진 문자열을 호출할 때는 대괄호를 이용해서 객체 속성에 접근

  • 객체를 생성하고 나서 속성을 추가하거나 제거하는 것을 동적 속성 추가, 제거라고 한다.

  • 객체의 속성 중에 함수 자료형인 속성은 메소드라고 부름
    - 메소드 내부에서 객체 자신이 가진 속성을 출력하고 싶을때는 this 키워드를 쓴다.
    - 메소드에는 화살표 함수를 쓰지 않는데 그 이유는 화살표함수의 this의 값이 다르기 때문이다.
    - 화살표함수는 스스로 this 바인딩을 제공하지 않음

  • this
    - 객체를 참조하는 키워드
    - 호출에 따라 달라진다.
    - 함수 안에서 this는 함수의 주인에게 바인딩된다.
    - 함수의 주인은 window이기 때문에 this를 찍으면 window가 반환된다
    - 객체안에서 메서드로 함수를 호출하면, 메서드의 주인은 객체이기 때문에 객체로 바인딩 된다.
    - 메소드들 마다 this가 가리키는 객체가 다르기 때문에 console.log(this)를 활용하여 가리키는 객체를 확인 하는 과정이 필요하다.

  • 엄격모드
    - ES5에서 추가된 키워드
    - 자바스크립트가 묵인했던 실수들을 에러 메시지 발생
    - 별도 선언 없이 사용할때는 비엄격모드이다.
    - 엄격모드 선언은 스크립트의 시작 혹은 함수의 시작 부분에 "use strict"를 선언
profile
성욱

0개의 댓글