모던 자바스크립트 Deep Dive(1)

_프로그래밍

프로그래밍이란?

내 생각을 컴퓨터에게 요청하는 것 즉 커뮤니케이션

이를 위해선 문제 해결 능력이 중요하며
이를 토대로 정확하고 상세하게 요구사항을 컴퓨터에게 전달 할 수 있어야하고
그 작업물이 코드이다. 그러기 위해 컴퓨터 입장에서 문제를 바라봐야하며 이떄 필요한 것이 Computational thinking(컴퓨터 사고)이다.

프로그래밍 언어

컴퓨터와 대화에 사용되는 일종의 표현수단으로,
사람과 컴퓨터(컴파일러 또는 인터프리터)모두가 이해할 수 있는 약속된 형태의 인공어

구문과 의미

프로그래밍은 요구사항의 집합을 분석해서 적절한 자료구조와 함수의 집합으로 변환한 후,

그 흐름을 제어하는 것이다.

const number = 'string';
console.log(number * number);

위 문장은 문법적으로 전혀 문제가 없지만 의미적으로는 옳지 않다.
number라는 이름의 변수에는 숫자를 할당하는 것이 의미적으로 옳다.

_자바스크립트란?

1995년, 보조적인 기능을 수행하기 위해 브라우저에서 동작하는
경량 프로그래밍 언어를 도입만, 이것이 브랜던 아이크의 자바스크립트.
또한 느슨한 동적타입 언어이다.

모카 -> 라이브스크립트 -> 자바스크립트

자바스크립트의 표준화

경쟁사인 마이크로소프트의 JScript와의 경쟁에서 자사 브라우저 시장 점유율을
높이기 위해 자사 브라우저에서만 동작하는 기능을 추가 -> 크로스 브라우징 이슈발생

이로 인해 표준화된 자바스크립트의 필요성이 대두됨 --> ECMA 인터내셔널에서 표준화된 자바스크립트인 ECMAScript가 탄생됨(상표권 문제 때문에 자바스크립트가 아닌 ECMAScript라고 불림)

2015년에 ECMAScript6가 공개되는데, 범용 프로그래밍 언어로서 갖춰야 할 기능들이 포함된다. 이 이후 버전업은 작은 기능을 추가하는 수준으로 매년 공개됨.

자바스크립트 성장의 역사

초창기 자바스크립트 - 웹의 보조적인 기능을 수행하기 위해 한정적인 용도로 사용

Ajax

자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능

jQuery

jQuery의 등장으로 DOM(Document Object Model)을 더욱 쉽게 제어하고, 크로스 브라우징 이슈도 해결함.
자바스크립트 보다 배우기 쉽고 직관적인 jQuery 더 선호하는 개발자가 늘어나기도 함.

V8 자바스크립트 엔진

JS로 웹 애플리케이션을 구축하려는 시도의 증가와 함께 더욱 빠르게 동작하는 자바스크립트 엔진의 필요성이 대두됨 --> V8 자바스크립트 엔진의 등장

이로 인해 웹 서버에서 수행되던 로직들이 클라이언트(브라우저)로 이동하게 됨.

Node.js

자바스크립트 런타임 환경으로 자바스크립트를 브라우저 이외의 환경에서 동작할 수 있도록 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경이다.

주로 서버사이드 애플리케이션 개발에 주로 사용되고, 이에 필요한 모듈 파일 시스템, HTTP 등 내장 API를 제공한다. 비동기 I/O를 지원하며 단일 스레드 이벤트 루프 기반으로 동작하여 요청 처리 성능이 좋다. --> SPA에 적합함.

이제 자바스크립트는 프론트뿐만이 아닌, 백엔드 영역가지 아우르는 웹 프로그래밍 언어의 표준으로 자리 잡음으로써 크로스 플랫폼을 위한 가장 중요한 언어로 주목 받고 있다.

SPA 프레임워크

이전의 개발 방식으로는 복잡해진 개발 과정을 수행하기 어려워져 이에 따라 많은 패턴과 라이브러리가 출현하였는데 이것만으론 부족하여 프레임워크가 등장하게 됨.

CBD(Component based development)방법론을 기반으로 한 SPA가 대중화 되면서 Angular, React, Vue.js, Svelte등 다양한 SPA 프레임워크/라이브러리가 등장함.

자바스크립트와 ECMAScript

ECMAScript는 프로그래밍 언어의 핵심 문법을 규정한다. 각 브라우저 제조사는 이 사양을 준수해서 브라우저에 내장되는 자바스크립트 엔진을 구현함

자바스크립트는 일반적으로 프로그래밍 언어이면서도 클라이언트 사이드 Web API인 DOM, BOM, XMLHttpRequest, fetch등을 아우르는 개념이다.

클라이언트 사이드 Web API는 월드 와이드 웹 콘소시엄(W3C)에서 별도의 사양으로 관리하고 있다.

자바스크립트의 특징

자바스크립트는 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어이다.

그러나 각각의 브라우저의 엔진들은 인터프리터와 컴파일러의 장점들을 결합시켜서 비교적 속도가 느린 인터프리터의 단점을 보완했다.

자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다.

또한 강력한 객체지향 프로그래밍 능력을 지니고 있다.

인터넷 익스플로러를 제외한 대부분의 브라우저들은 ES6를 지원하고 있다.

그러나 그렇지 못한 상황이라면 바벨과 같은 트랜스파일러를 사용해 ES6를 ES5 이하로 다운그레이드 할 필요가 있다.

변수

변수란 무엇인가?

컴퓨터가 값을 계산하기 위해서는 사람과 같이 10, 20 이 무엇인지, + 가 무엇인지에 대한 의미도 알아야하며 이를 저장할 공간이 필요하다. 이 공간을 컴퓨터에선 메모리라고 하는데 메모리에 접근을 하기 위해서는 메모리 주소를 알아야한다. 메모리 주소는 0xFFFFFFFF와 같은 16진수로 되어있는데 이 부분에 직접 접근하는 것은 치명적 오류를 발생시킬 가능성이 높다.

따라서 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용하기 위해 변수라는 매커니즘을 제공한다.

변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다. --> 값의 위치를 가리키는 상징적인 이름

변수에 값을 저장하는 것을 할당(대입, 저장) 이라 하고, 변수에 저장된 값을 읽어 들이는 것을 참조 라고 한다

식별자

변수의 이름을 식별자라고 한다
값이 저장되어 있는 메모리 주소와 매핑 관계를 맺고
메모리 주소를 기억하고 있는 것

변수, 함수, 클래스 등의 이름은 모두 식별자 선언에 의해 식별자의 존재를 알림.

변수 선언

var, let, const같은 키워드를 사용해서 선언

선언과정

변수 이름을 등록하고 메모리 공간을 확보한 후 undefined 값이 암묵적으로 할당되어 초기화된다.

• 선언 단계 : 변수 이름을 등록하여 자바스크립트 엔진에 변수 존재 알림
• 초기화 단계 : 암묵적으로 undefined를 할당 초기화
  초기화 이유 - (쓰레기 값이 남아 있을 수 있어서 이를 방지하기 위해 초기화 수행)
  

변수의 이름을 비롯한 모든 식별자는 실행컨텍스트에 등록
코드의 실행 결과를 실제로 관리하는 영역

변수 선언의 실행 시점과 변수 호이스팅

console.log(score) // undefined
var score; // 변수 선언

이 경우 참조에러가 발생하지 않고 undefined가 출력
변수 선언이 인터프리터로 인해 한줄씩 실행되는 시점이 아니라 그 이전 단계에서 먼저 실행되기 때문
이렇게 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 것을
변수 호이스팅이라 함

값의 할당

var score = 80; //변수 선언과 값의 할당

한줄로 변수 선언과 할당을 해도 둘의 실행시점은 다르다.

변순선언 : 런타임 이전에 먼저 실행
변수할당 : 런타임에 실행

값의 재할당

var 키워드 같은 경우는 선언과 동시에 undefined로 초기화 되기 떄문에
처음으로 값을 할당하느 것도 재할당이다

let, const 같은 키워드는 선언 단계와 초기화단계가 분리되어 진행된다.
만약 초기화 이전에 변수에 접근하려고 하면 참조에러(ReferenceError)가 발생
스코프의 시작지점부터 초기화 시작 지점까지의 구간을
일시적 사각지대(TDZ Temporal Dead Zone)라고 한다

만약 값을 재할당 할 수 없어서 변수에 저장된 값을 변경할 수 없다면
그것은 상수다 (상수는 단 한번만 할당할 수 있는 변수)

값을 재할당 할때 기존 공간에 새로운 값을 저장하는 것이 아닌 새로운 메모리 공간에 값을 저장하기 때문에 어떠한 식별자와도 연결되어 있지 않은 값들(더 이상 사용되지 않는 메모리)은 가비지 콜렉터에 의해 메모리에서 자동 해제된다.

식별자 네이밍 규칙

• 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어, 달러 기호를 포함할 수 있다.
• 식별자는 특수문자를 제외한 문자, 언더스코어, 달러 기호로 시작해야한다.
• 예약어는 식별자로 사용할 수 없다

네이밍 컨벤션

• 카멜케이스(firstName)
• 스네이크케이스(first_name)
• 파스칼 케이스(FirstName)

_표현식과 문

값

값(Value)는 식(표현식)이 평가되어 생성된 결과를 말한다.

// 변수에는 10 + 20이 평가되어 생성된 숫자 값 30이 할당된다.
var sum = 10 + 20;

sum변수에 할당되는 것은 10+20 이 아니라 평가된 결과인 30이다.

리터럴

리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생서하는 표기법을 말한다.

따라서 리터럴이란 컴퓨터가 아닌 사람이 이해할 수 있는 값을 의미한다.

표현식

표현식은 값으로 평가될 수 있는 문이다.
즉 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다.
리터럴도 표현식이다.

// 리터럴 표현식
10
'Hello'

// 식별자 표현식(선언이 이미 존재한다고 가정)
sum
person.name
arr[1]

// 연산자 표현식
10 + 20
sum = 10
sum !== 10

// 함수/메서드 호출 표현식(선언이 이미 존재한다고 가정)
square()
person.getName()

값으로 평가될 수 있는 문은 모두 표현식이다.

문(statement)

프로그램을 구성하는 기본 단위이자 최소 실행 단위이다.
문의 집합으로 이루어진 것이 프로그램이며 이것을 순서에 맞춰 나열하는것이 프로그래밍이다.

문은 여러 토큰으로 구성된다.
토큰이란 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미한다.
ex) 키워드, 식별자, 연산자, 리터럴, 세미콜론, 마침표

// 변수 선언문
var x;

// 표현식 문(할당문)
x = 5;

// 함수 선언문
function foo () {}

// 조건문
if (x > 1) { console.log(x); }

// 반복문
for (var i = 0; i < 2; i++) { console.log(i); }

세미콜론;

세미콜론(;)은 문의 종료를 나타낸다.
문을 끝낼 때는 세미콜론을 붙여야 한다.
단, 0개 이상의 문을 중괄호로 묶은 코드블록{}뒤에는 세미콜론을 붙이지 않는다.
예로 if문, for문, 함수 등의 코드 블록 뒤에는 세미콜론을 붙이지 않는다.
또한, 세미콜론은 옵션이다.(생략 가능)
자바스크립트 엔진이 문의 끝이라고 예측되는 지점에 자동으로 붙여준다.
(ASI automatic semicolon insertion)

표현식인 문과 표현식이 아닌 문

간단하게 구분하는 법은 변수에 할당하는 방법이다.

// 표현식이 아닌 문은 값처럼 사용할 수 없다.
var foo = var x; // SyntaxError: Unexpected token var

• 표현식이 아닌 문
  
• 표현식인 문
  

참조
https://velog.io/@hustle-dev/%EB%AA%A8%EB%8D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Deep-Dive-15%EC%9E%A5
https://hong-p.github.io/javascript/javascript-deepdive-ch05/