Voyage_dev
항해하는 개발자
Voyage_dev
전체 방문자
오늘
어제
  • All (158)
    • Front-End (102)
      • HTML & CSS (7)
      • JavaScript (13)
      • Web & 표준 & ETC (15)
      • React (17)
      • Next (13)
      • TypeScript (6)
      • Zustand (1)
      • AWS (4)
      • Redux (1)
      • MobX (9)
      • GraphQL (1)
      • Flutter (15)
    • 알고리즘 (12)
      • Java (11)
      • JavaScript (1)
    • Git (1)
    • Project (2)
      • 개인 (1)
      • 팀 (1)
    • Books (30)
      • 누구나 자료구조와 알고리즘 (20)
      • Do It 타입스크립트 프로그래밍 (9)
    • 자료구조 (6)
    • 취업 (1)
    • 항해플러스 (1)
      • 1주 (1)

블로그 메뉴

  • 👨🏻‍💻 Github
  • 💻 Rss 블로그
  • 🏊‍♂️ Resume
  • 🗂️ Portfolio

인기 글

최근 댓글

hELLO · Designed By 정상우.
Voyage_dev

항해하는 개발자

Front-End/JavaScript

[JavaScript] 정의 & 특징

2022. 3. 1. 21:27

정의

  • 자바스크립트는 서버와 클라이언트 응용프로그램을 위해서 만들어진, 플랫폼에 영향을 받지 않는 객체 기반형 스크립트 언어이면서 복잡한 무언가 즉, 주기적으로 내용이 갱신되는 기능이나 능동적인 지도, 변화하는 2D&3D 그래픽, 동영상 등 웹페이지에 적용할 수 있게 하는 스크립트 혹은 프로그래밍 언어
  • 사용자들을 위해 상호작용하는 애플리케이션을 만들 수 있게하며 동적으로 컨텐츠를 바꾸고, 멀티미디어를 다루고, 움직이는 이미지 등 많은 일들을 하면서다양한 컴퓨터가 연결되어 있는 네트워크, 다른 운영체제 속에서도 실행이 가능하다
🔥
JavaScript is cross-platform, object-based scripting language for client and server applications

자바스크립트를 사용하는 이유

웹문서를 좀 더 동적으로 표현하기 위해서 그리고 웹 브라우저에서 실행되니 서버의 과부하를 막을 수 있으며 속도가 빠르다는 장점이 있기 때문에

역사

자바스크립트는 1995년 Netscape의 Brendan Eich (브렌던 아이크)에 의해 만들어졌다. Mocha라는 이름으로 개발되었으나 이후 LiveScript , 최종적으로 JavaScript라는 이름으로 변경되었다

특징

인터프리터 언어

  • 통역사라는 뜻으로 코드를 한 줄 한 줄 읽어가며 바로 처리하는 프로그램 언어
  • 자바와 같이 컴파일이 필요한 다른 프로그래밍 언어에 비해 중간 단계인 컴파일, 링크 과정이 필요가 없기 때문에 시간이 적게 소요되며 코드를 한 번에 한 줄씩 읽어 들이면서 바로 실행이 가능
    • 여기서 컴파일이란 우리가 작성한 코드를 컴퓨터가 이해할 수 있게 변환해주는 과정
  • 클라이언트 스크립트이기 때문에 서버 연결에 드는 시간을 절약할 수 있으므로 프로그램 실행 속도를 높인다

스크립트 언어

  • 간편하고 쉽다
  • 웹 브라우저에서 동작하는 스크립트 언어로 운영체제의 제한을 받지 않는다

단순함

  • 쉽게 이해할 수 있는 구조
  • 동적 (다이내믹) 컨텐츠를 개발하는 비용을 절약
  • 자바나 파이썬처럼 별도의 설치가 필요 없다

객체 기반 언어

  • 내장 객체를 지원한다
  • prototype을 사용한 상속을 하는 객체 기반 언어

인터페이스

  • 웹 페이지에 다양한 인터페이스를 제공하므로 사용자 상호작용이 향상

 

단점

보안성

  • 웹 상에서 바로 코드를 볼 수 있기 때문에 문제가 생길 수 있다
  • 데이터 보안을 손상시킬 수 있는 악성 코드를 웹사이트에 삽입하는 것이 매우 쉽다

불변성

  • 언어 차원에서 immutable함을 제공해주지 않는다
    • 여기서 불변함이란 데이터의 원본이 훼손되는 것을 막는 것
  • 함수형 프로그래밍을 지원하는 것이 장점이지만 함수형과 땔래야 땔 수 없는 관계인 불변성을 지원하지 않는다는 것이 모순적
    • const 라는 변수는 값이 불변하다고 생각할 수 있는데, const라는 값에 대한 참조 (가르키는 것)가 한 번 변수가 할당되고 나면 변할 수 없음을 의미하는 것이지 const 변수가 참조하고 있는 값이 불변하다는 것을 의미하지는 않는다
    불변성을 지키는 것이 왜 중요한가
  • 너무나도 동적인 관계로 너무나 쉽게 객체를 변경시킬 수 있다

상속

  • 단일 상속은 지원하지만 다중 상속은 지원하지 않는다

 

자바스크립트 실행 순서

  • 자바 스크립트는 HTML과 CSS가 결합되고 웹페이지 상에서 올려진 후, 브라우저의 자바스크립트 엔진에 의해 실행된다 즉, 페이지의 구조와 스타일등을 정하고 실행된다
  • 브라우저에서 자바스크립트를 만나면 일반적으로는 위에서 아래 순서대로 실행
  • HTML 요소는 순서대로 페이지에 로드
  • 자바스크립트를 이용해 HTML 요소를 조작할 경우(DOM), 자바스크립트 코드가 조작 대상인 HTML 요소보다 먼저 실행된다면 조작할 요소가 존재하지 않는 상태이기 때문에 제대로 동작하지 X

Async & Defer

Async
  • 페이지 렌더링의 중단 없이 스크립트를 다운로드 하고, 다운로드가 끝나자 마자 이를 실행
  • 외부 스크립트끼리의 구체적인 실행 순서를 보장하지 X
  • 비동기방식으로 다운로드 되어 중단되지 않는다는 것만 보장
  • 각각의 스크립트가 독립적으로 또는 서로에게 의존하지 않는 관계일 때 적절
  • 다운로드가 완료되면 parsing을 멈추면서 js를 실행 → parsing하는도중 병렬적으로 이동하기 때문에 다운받는 시간은 조금 절약나 자바스크립트가 html이 파싱되기 전에 실행되기 때문에 html을 parsing하는 동안 언제든지 멈출 수 있어서 문제가 발생
  • 즉, 정의된 순서 상관없이 다운로드 된 아이만 실행 해 만약 js에 순서에 의존적이면 문제가 발생
Defer
  • async과는 다르게 순서대로 다운로드 한 후 모든 스크립트와 내용이 다운로드 되었을 때 실행
  • defer을 사용하면 페이지게 parsing하다 defer을 만나면 다운로드만 받자 하고 명령시킨 후 나머지 html을 parsing 하면 다운로드 되었던 js를 실행
  • 스크립트들이 의존하고 하나의 스크립트가 파싱될때까지 기다려야 한다면 defer가 적절

 

Strict

🔥
// 순수 바닐라 js를 사용할때 사용

// Javscript is very flexible

// flexble == dangers

// 유용하다는 것은 실수할 수 있다는 뜻도 된다.

// added ECMAScript5

'use strict';

출처:

https://koras02.tistory.com/109?category=967573

  • use Strict라는 코드는 순수 바닐라 js를 사용할 때 사용한다 자바스크립트는 유용하지만 그만큼 위험하므로 선언되지 않은 변수 등 실수를 초기에 막아줄 수 있다

 

 

출처 : 아래의 사이트들을 보면서 큰 공부 하였습니다

https://velog.io/@nittre/Pros-and-Cons-of-JavaScript-자바스크립트의-장단점

https://burkui-developer.tistory.com/4

https://ttoki.tistory.com/entry/자바스크립트의-특징-장단점

https://blog-pleur.tistory.com/57

https://uuunote.tistory.com/entry/자바스크립트-1장

https://coding-restaurant.tistory.com/31

https://serzhul.io/JavaScript/javascript-불변성(immutability)/

 

 

 

[JavaScript] 불변성을 지키는 것이 왜 중요한가

불변성이란 말 그대로 변하지 않는 것을 의미 불변 데티터는 한 번 생성되고나면 그 뒤에는 변할 수 없다 즉, 프로그래밍에서 Immutability는 데이터의 원본이 훼손되는 것을 막는 것을 의미한다 Pri

voyage-dev.tistory.com

 

 

 

'Front-End > JavaScript' 카테고리의 다른 글

[JavaScript] Hoisting (호이스팅)  (0) 2022.03.05
[JavaScript] 데이터 타입 (Data Type)  (0) 2022.03.03
[JavaScript] 기본 문법  (0) 2022.03.02
[JavaScript] DOM (Document Object Model)  (0) 2022.03.02
[JavaScript] 불변성을 지키는 것이 왜 중요한가  (0) 2022.03.01
    'Front-End/JavaScript' 카테고리의 다른 글
    • [JavaScript] 데이터 타입 (Data Type)
    • [JavaScript] 기본 문법
    • [JavaScript] DOM (Document Object Model)
    • [JavaScript] 불변성을 지키는 것이 왜 중요한가
    Voyage_dev
    Voyage_dev

    티스토리툴바