[JS] 정의, 버전, 명칭, 차이

[JS] 정의, 버전, 명칭, 차이

 

자바스크립트(JavaScript)

Object 기반의 스크립트 프로그래밍 언어

웹의 동작을 구현

표준 웹 페이지의 3 가지 레이어 중 하나

​

(Structure Layer)

HTML: 구조(Structure), 내용(Content)

-> 웹 페이지 문서를 만드는 데 사용

​

(Presentation Layer)

CSS: 시각적 디스플레이 (Visual Display),디자인(Design)

-> 웹 페이지의 스타일을 관리

​

(Behavior Layer)

JavaScript: 행동(Behavior), 상호작용(Interactivity)

-> 웹 페이지의 요소를 조작 = 웹의 동작

 

---

바닐라 스크립트(Vanilla JS)

어떤 라이브러리나 프레임워크도 사용하지 않는 JS = JS의 날 것

​

ES(ECMAScript)

다양한 웹 브라우저에서 JS의 원활한 동작을 위한 표준 규격 = JS 표준 규격

* ES5(2009년 출시), ES6(2015년 출시)

​

모던 자바스크립트(Modern JavaScript)

-> ES6와 그 이후의 버전을 통틀은 명칭

​

---

1) let keyword

JS는 함수 레벨 스코프다.

But, 블록 레벨 스코프를 따르는 let을 지원 => ES5 변수는 모두 전역 변수

※ 함수 레벨 스코프(Function-Level Scope)

- 함수 내 선언된 변수는 함수 내에서만 유효

함수 외부에서 참조 X

​

※ 블록 레벨 스코프(Block-Level Scope)

- 코드 블록 내 선언 변수는 코드 블록 내에서만 유효

코드 블록 외부에서는 참조 X

var: 블록 레벨 스코프

let: 함수 레벨 스코프

​

※ 렉시컬 스코프(Lexical Scope)

- 함수를 어디서 정의했는지에 따라 상위 스코프를 결정

- 자세히: https://jaem-tech.tistory.com/4

 

​

​

2) const keyword

= 상수: 변하지 않는 값

​

​

3) Arrow function

함수 코드의 간소화를 위해 사용

= (lambda식과 같은 방식)

​

​

4) default parameter

기본 매개 변수 제공

​

​

5) templete literal

문자열 안에서 {} 앞 $ 표시를 통해

값 읽기 가능 (`을 사용)

! `(백틱) 문자 사용, (')작은 따옴표 아님

​

​

6) multi line

아래와 같은 문법이 가능하다.(`을 사용)

​

​

7) class

class 기능 제공

생성자(constructor) 키워드 제공

메서드를 내부에 구현 가능

​

​

8) Module 기능 제공

ES5: 변수 전부 전역에 할당 -> 모듈화 위해 여러 기법 필요​​

ES6: import, export 지원

​

​

9) Destructuring

= 구조체(배열이나 객체)를 파괴하여 개별 변수에 할당하는 것

=> 일일이 넣어줄 필요가 없다 = 객체, JSON 등 쉽게 접근 가능

​

​

10) Promise

비동기 처리 위해

ES5: CallBack 사용 => 많으면 가독성 감소

ES6: 이를 보완하려 Promise 지원

​

​

11) 그 외...