JavaScript

Today I Learned ... javascript

🙋‍♂️ Reference Book

🙋‍ My Dev Blog

---

1. 프로그래밍

프로그래밍(programming)이란?

• 문제를 명확히 이해 - 복잡함을 분해하고, 자료를 정리 및 모델링
• 컴퓨팅 사고
• 해결 과제를 작은 단위로 구분하고, 패턴화해서 추출하고
  모든 개념을 평가 가능하도록 정의

프로그래밍 언어

• 기계어(machine code)로 명령을 전달
• 구문과 의미로 표현됨
• 문법(syntax)보다 의미(semantic)이 더 중요

2. 자바스크립트

자바스크립트란?

• 1995 넷스케이프사의 브렌든 아이크(Brendan Eich) 가 개발.
• 넷스케이프 네비게이터에 탑재되어 'Mocha'로 명명됨.
• 추후에 라이브스크립트 -> 자바스크립트 순으로 최종 명명.

크로스 브라우징

• 브라우저에 따라 웹페이지가 동작하지 않는 크로스 브라우징 이슈 발생
• 파편화를 방지하고, 자바스크립트의 표준화 필요성
• ECMAScript 등장 -2009년 ES5가 HTML5와 함께 출현

📚 ECMAScript 주요 특징

ES5	ES6
JSON, strict mode, 접근자 프로퍼티, 배열메서드 등	let, const, 화살표함수, 템플릿 리터럴, 구조분해할당, 스프레드(...), Promise, 클래스, 모듈(import, export), 이터러블 등

AJAX (Asynchronous JS and XML)

• 기존에는 대부분의 로직이 웹서버에서 실행됨.

• 브라우저는 HTML과 CSS를 단순히 렌더링 하는 수준이였음.

• AJAX: 자바스크립트로 서버-브라우저간 비동기 방식 데이터 교환 기능.
  ( XMLHttpRequest )

• 이전에는 변경할 필요 없는곳까지 전체가 리렌더링 되어 비효율적.

• Ajax의 등장으로, 서버로부터 필요한 데이터만 전송받아 변경될 부분만 렌더링 가능.

Node.js

• 2009, Ryan Dahl이 발표. Google V8엔진으로 빌드된 자바스크립트 런타임 환경. (RunTime Environment)
• 브라우저 JS엔진에서만 동작하던 자바스크립트를 브라우저 외의 환경에서도 동작 가능하도록. (브라우저에서 독립시킴)
• 주로 서버사이드 어플리케이션 개발에 사용.
• built-in API를 제공. (모듈, 파일시스템, HTTP 등)
• 비동기 I/O 지원. 단일스레드 이벤트루프 기반.
  (Request 처리 성능이 좋음 -> SPA 에 적합)

SPA (Single Page Application)

• CBD 방법론 기반. (Component Based Development)

클라이언트 사이드 Web API

• 웹 브라우저 환경에서만 사용 가능. (node는 사용 못함)
• DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker
• W3C(World Wide Web Consortium)

자바스크립트 특징

• 인터프리터 언어 (Interpreter Language)
• 컴파일러언어의 빠른 속도와 인터프리터 언어의 즉시실행을 합침.
• 객체지향언어 (OOP) - 프로토타입 기반 상속

  클래스, 상속, 정보은닉을 위한 키워드가 없어 객체지향언어가 아니라고 오해.

• 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍
  ( 멀티 패러다임 프로그래밍 언어 )

3. 자바스크립트 실행 방법

브라우저 vs. Node

브라우저	Node.js
브라우저 화면에 HTML,CSS,JS를 렌더링 하는 목적	브라우저 외부에서 자바스크립트 실행 환경을 제공하는 목적

• 브라우저는 DOM API를 기본적으로 제공하지만, 브라우저 외부에서는 DOM을 직접 다룰 필요가 없으므로 Node.js에서는 제공하지 않는다.

• Node에서는 파일을 생성 및 수정 가능한 파일시스템을 제공하지만, 브라우저에서는 함부로 사용자의 로컬 파일을 생성, 삭제 불가하다.

Node와 npm

• node는 V8 자바스크립트 엔진으로 빌드된 런타임 환경이다.
• npm (node package manager)은 자바스크립트 패키지 매니저이다.
• npm은 모듈들을 패키지화해서 모아둔 저장소 + 패키지 설치 관리를 위한 CLI(Command Line Interface)를 제공한다.

$ node -v
$ node index 

node index(node index.js)로 노드 환경에서 자바스크립트를 실행시킬 수 있다.

• node가 제공하는 REPL(Read Eval Print Loop)를 사용한다.
• Ctrl + C를 두번 눌러 REPL을 종료할 수 있다.

4. 변수

• 변수(variable)는 데이터를 관리하기 위한 핵심 개념이다.
• 컴퓨터는 CPU를 통해 연산하고, 메모리를 통해 데이터를 기억한다.
• 메모리 = 메모리 셀(memory cell, 1바이트 크기)의 집합체.
• 컴퓨터는 메모리셀, 즉 1바이트 단위로 데이터를 저장하고 읽어들인다.
• 각 셀은 고유의 메모리 주소를 갖는다.
• 메모리 주소 = 메모리 공간의 위치

• 메모리 주소를 통해 직접 값에 접근하면 치명적 오류 발생.
• 따라서, 하나의 값을 저장하고, 재사용하기 위한 변수라는 메커니즘을 제공한다.

• 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 그 자체
• 또는 그 공간을 식별하기 위한 식별자(identifier)를 의미한다.
• 변수는 하나의 값을 저장한다.
  ❕ 단, 여러개의 값을 그룹화해서 하나의 값처럼 사용 가능한 자료구조를 사용할수도 있다.
  

• 변수에 값 저장 = 할당(assingment) = 대입
• 변수에 저장된 값을 읽어들임 = 참조(reference)

식별자

• 변수 이름 = identifier
• 어떤 값을 구별해서 식별할 수 있는 고유한 이름

• 식별자는 메모리 주소와 매핑 관계를 맺으며, 매핑 정보도 메모리에 저장됨
• 식별자 = 메모리 주소에 붙은 이름 (값이 아닌 메모리 주소를 저장함)

변수 선언

• 값을 저장하기 위한 메모리 공간을 확보하고, 메모리 주소와 변수 이름 연결. (name binding)
• 변수 선언시 let, const, var 키워드를 사용함.
• var 키워드는 블록레벨 스코프가 아닌 함수레벨 스코프를 지원함. (의도치않은 전역변수)

키워드 (keyword)
자바스크립트 엔진이 수행할 동작을 규정한 일종의 명령.

변수의 등록

• 모든 식별자는 실행 컨텍스트에 등록됨.
• 실행컨텍스트는 자바스크립트 엔진이 소스코드를 평가/실행하기 위한 환경을 제공하고, 소스코드의 실행 결과를 실제로 관리함.
• 변수 이름 - 변수 값은 실행 컨텍스트 내에서 key-value 형태로 등록되어있음.

초기화

• 변수가 선언된 이후로 최초로 값을 할당하는 것.
• 초기화를 하지 않으면 확보된 메모리 공간에 garbage value가 존재할 수 있음.
• var 로 선언시 선언단계와 초기화단계가 동시에 진횅됨.

변수 호이스팅

• 변수선언은 소스코드의 런타임이 아닌 그 이전단계에서 먼저 실행.
• 소스코드 실행 준비단계인 평가 과정에서 모든 선언문을 먼저 실행함.
• 변수선언문이 선두로 끌어올려진 것처럼 동작

값의 할당

• 할당 = 대입 = 저장 -> 할당연산자(=)를 사용함.
• 변수 선언은 런타임 이전에 실행되지만, 값 할당은 런타임에 실행됨.

console.log(name);  // undefined
var name = 'yjin';  // 변수 선언 + 할당

console.log(name); // 'yjin'

• 변수를 할당할 때에는 이전 값을 지우고 그 공간에 새롭게 저장? - (X)
• 새로운 메모리 공간을 확보하고 그곳에 할당 값을 저장함.

값의 재할당과 가비지콜렉터

• 이전 할당값은 더이상 아무도 참조하지 않으므로 가비지 콜렉터에 의해 메모리에서 해제됨.
• 가비지콜렉터는 더 이상 사용되지 않는 메모리를 해제(release)함.
• 프로그래밍 언어는 메모리 관리 여부에 따라 managed language,unmanaged language로 나뉜다.
• 자바스크립트는 개발자가 직접 메모리 제어를 허용하지 않는 매니지드 언어이다.

식별자 네이밍 컨벤션

• 카멜케이스(camelCase)

var firstName;

• 파스칼케이스(PascalCase)

class FirstName;