모던 자바스크립트 : 자바스크립트, 변수, 표현식과 문

1. 프로그래밍

1-1. 프로그래밍이란?

• 목적 : 요구사항 실현(문제 해결)
• 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션

1-2. 프로그래밍 언어란?

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

1-3. 구문과 의미

• 프로그래밍 언어가 제공하는 문법을 적절히 사용하여 변수를 통해 값을 저장하고 참조하며
• 연산자로 값을 연산, 평가하고
• 조건문과 반복문에 의한 흐름제어로 코드의 실행순서를 제어하고
• 함수로 재사용 가능한 문의 집합을 만들며 객체, 배열 등으로 자료 구조화

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

 

2. 자바스크립트

2-1. 자바스크립트의 성장

자바스크립트의 탄생

넷스케이프 커뮤니케이션즈에서 웹페이지의 보조적인 기능을 수행하기 위해 만들어낸 브라우저에서 동작하는 경량 프로그래밍 언어로 자바스크립트 출시

 

표준화하게 된 과정

자바스크립트 이후 마이크로소프트에서 JScript를 출시

→ 서로 자사 브라우저에서만 동작하는 기능을 경쟁적으로 추가

→브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈 발생

→ 자바스크립트의 표준화 요청 후 ECMAScript로 초판 출시

버전	출시 연도	특징
ES1	1997	초판
ES2	1998	ISO/IEC 16262 국제 표준과 동일한 규격을 적용
ES3	1998	정규 표현식, try...catch
ES5	2009	HTML5와 함께 출현한 표준안.JSON, strict mode, 접근자 프로퍼티, 프로퍼티 어트리뷰트 제어,향상된 배열 조작 기능(forEach, map, filter, reduce, some, every)
ES6(ECMAScript2015)	2015	let/const, class, 화살표 함수, 템플릿 리터럴, 비구조화 할당, 스프레드 문법, rest 파라미터, 심벌, 프로미스, Map/Set, 이터러블, for...of, 제너레이터, Proxy, 모듈 import/export
ES7(ECMAScript2016)	2016	지수(**)연산자, Array.prototype.inclueds, String.prototype.inclueds
ES8 (ECMAScript2017)	2017	async/await, Object 정적 메서드(Object.values, Object.entries, Object.getOwnPropertyDescriptors)
ES9(ECMAScript2018)	2018	Object rest/spread 프로퍼티, Promise.prototype.finally, async generator, for await...of
ES10(ECMAScript2019)	2019	Object.fromEntries, Array.prototype.flat, Array.prototype.flatMap, optional catch binding
ES11(ECMAScript2020)	2020	String.prototype.matchAll, BigInt, globalThis, Promise.AllSettled, null 병합 연산자, 옵셔널 체이닝 연산자, for...in enumeration order

 

자바스크립트의 초창기 

- 웹페이지의 보조적 기능 수행

- 대부분의 로직은 주로 웹서버, 브라우저는 서버로부터 전달받은 HTML, CSS 단순히 렌더링 하는 수준

 

**렌더링

- HTML,CSS 자바스크립트로 작성된 문서를 해석해 브라우저에 시각적으로 출력

- 떄로는 서버에서 데이터를 HTML로 변환해 브라우저에게 전달하는 과정(SSR)

 

Ajax (Asynchronous Javascript and XML) =XMLHttpRequest

Ajax 이전

• html 태그로 시작해 html태그로 끝나는 완전한 HTML 코드를 서버로부터 다시 전송받아 웹페이지 전체 렌더링
• 변경항 필요 없는 부분까지 포함된 HTML 코드를 서버로부터 다시 전송받기 떄문에 불필요한 데이터 동신 발생, 변경할 필요 없는 부분도 처음부터 다시 렌더링 해야해서 성능 떨어짐
• 이로인해 화면 전환됨면 화면이 순간적으로 감박이는 현상 ㅇ

Ajax 이후

• 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터 교환할 수 있는 통신 기능
• 웹페이지에서 변경할 필요 없는 부분은 다시 렌더링하지 않고 서버로부터 필요한 데이터만 전송받아 변경해야하는 부분만 한정적으로 렌더링하는 방식
• 웹브라우저에서도 데스크톱 애플리케이션과 유사한 빠른 성능과 부드러운 화면 전환 가능

jQuery

- DOM (document object model)을 더욱 쉽게 제어, 크로스 브라우징 이슈 ↓

 

V8 자바스크립트 엔진

- 빠르게 동작하는 자바스크립트 엔진 → 웹 서버에서 수행되던 로직들이 대거 클라이언트(브라우저)로 이동

 

Node.js

- 구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경

- 브라우저의 자바스크립트 엔진에서만 동작하던 자바스크리븥를 브라우저 이외의 환경에서도 동작할 수 있도록 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경

- 다양한 플랫폼에 적용할 수 있지만 서버사이드 애플리케이션 개발에 주로 사용

- 필요한 모듈, 파일 시스템, HTTP 등 빌트인 API 제공

- 비동기 I/O를 지원, 싱글 스테드 이벤트 루프 기반으로 동작 → 요청 처리 성능 ↑

- 데이터 실시간 처리하기 위해 I/O가 빈번하게 발생하는 SPA에 적합, 하지만 CPU 사용률 높은 애플리케이션은 권장 ✕

 

⇒ Node.js의 등장으로 자바스크립트는 브라우저 벗어나 서버사이드 애플리케이션 개발에서도 사용할 수 있는 범용 프로그래밍 언어가 됨

 

SPA 프레임워크

높은 성능과 사용자경험, 개발규모와 복잡도 상승

→ 변경에 유연하면서 확장하기 쉬운 애플리케이션 아키텍처 구축 어려움

→ CAD (component based development)방법론을 기반으로 하는 SPA 대중화되면서 앵귤러, 뷰, 리액트, svelte …등장

 

2-2. 자바스크립트와 ECMAScript

ECMAScript

- 자바스크립트의 표준사양인 ECMA-262

- 프로그래밍 언어의 값, 타입, 객체, 프로퍼티, 함수, 표준 빌트인 객체 등 핵심 문법 규정

 

자바스크립트

- ECMAScript와 브라우저가 별도 지원하는 클라이언트 사이드 Web API(DOM, BOM, Canvas, XMLHttpRequest, fetch, requextAnimationFrame, SVG, Web Storage, Web Component, Web Worker 등 )를 아우르는 개념

2-3. 자바스크립트 특징

- HTML, CSS와 함께 웹 구성하는 요소 중 하나

- 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어

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

 

4. 변수

4-1. 변수란?

• 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고 저장된 값을 읽어 들여 재사용하기 위해 변수라는 메커니즘 제공
• 프로그래밍 언어의 컴파일러 또는 인터프리터에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행
• 따라서 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요 없이 변수를 통해 안전하게 값 접근

result = 10+20 

// result = 변수명
// 30 = 변수 값

변수란?

• 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념
• 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름
• 프로그래밍 언어에서 값을 저장하고 참조하는 매커니즘
• 값의 위치를 가리키는 상징적인 이름
• 할당,대입,저장 assignment : 변수에 값을 저장하는 것
• 참조 reerence : 변수에 저장된 값을 읽어 들이는 것

식별자 (identifier) 란?

• 어떤값을 구별해서 식별할 수 있는 고유한 이름 === 변수, 함수, 클래스 등의 이름은 모두 식별자
• 메모리 공간에 저장되어있는 어떤 값을 구별해서 식별해낼 수 있어야한다 ←이를 위해 식별자는 어떤 값이 저장되어있는 메모리 주소 기억
• 값이 저장되어있는 메모리 주소와 매핑 관계를 맺으며 이 매핑 정보도 메모리에 저장되어야한다
• 값이 아니라 메모리 주소를 기억하고 있다 ⇒ 메모리 주소에 붙인 이름

 

4-2. 변수 선언

변수 선언

값을 저장하기 위한 메모리 공간 확보, 변수이름과 확보된 메모리 공간의 주소 연결해서 값 저장하게 준비하라는 것

ex) var, let, const

 

let과 const를 사용하는 추세

var의 경우 블록 레벨 스코프를 지원하지 않고 함수 레벨 스코프 지원 → 의도치않게 전역 변수 선언되어 부작용 발생해서 

 

변수를 사용하려면 무조건 선언 필요

선언하지 않고 변수 참조하면 이전에 다른 애플리케이션이 사용했던 값이 남아 쓰레기 값이 나올 수 있음

=>ReferenceError(참조 에러) 발생 : 식별자 통해 값 참조하려하면 자바스크립트 엔진이 등록된 식별자 찾을 수 없다는 에러

 

변수선언 단계 (선언단계와 초기화 단계가 동시에 이뤄짐)

1. 선언 단계 : 변수 이름 등록해서 자바스크립트 엔진에 변수 존재 알림

2. 초기화 단계 : 값 저장하기 위한 메모리 공간 확보하고 암묵적으로 undefined 할당해 초기화

**초기화 : 변수가 선언된 이후 최초로 값을 할당하는 것

 

변수 선언의 실행시점

변수 선언이 소스코드가 한줄씩 순차적으로 실행되는 시점, 런타임이 아니라 그 전 단계에서 먼저 실행되기때문에 참조 에러 발생

 

호이스팅

변수 선언문이 코드의 선두로 끌어 올려진것처럼 동작하는 자바스크립트 고유의 특징

변수 선언과 값의 할당 실행시점이 다름

var score; //변수 선언은 런타임 이전에 먼저 실행
score =80; //값의 할당은 런타임에 실행되면서 undefined가 80으로 재할당됨
           //재할당마다 새로운 메모리 공간에 저장함

 

값의 할당과 재할당

할당

변수에 값을 주는 것

값은 연산이 끝난후 각 메모리에 저장 되지만 cpu가 연산해서 만들어낸 숫자를 재사용 ✕

-> 연산결과가 저장된 메모리에 직접 접근하는 것은 올바른 방법이 아니고 시스템을 멈추게 하는 오류 발생

 

재할당

이미 값이 할당되어 있는 변수에 새로운 값을 다시 할당하는 것

새로운 메모리를 만들어내 그곳에 값을 저장

 

**가비지 콜렉터 : 애플리케이션이 할당한 메모리 공간을 주기적으로 검사하여 더이상 사용되지 않는 메모리를 해제하는 기능, 메모리 누수 방지

4-3. 식별자 네이밍 규칙

• 식별자는 특수문자 제외한 문자, 숫자, 언더스코어(_), 달러기호($) 포함 가능
• 특수문자 제외한 문자, 언더스코어(_), 달러기호($) 로 시작, 숫자 시작 안됨
• 예약어는 식별자로 사용할 수 없음
• 여러개 한번에 선언 가능
• 대소문자 구분
• 네이밍컨벤션 : 카멜케이스, 스네이크 케이스, 파스칼 케이스, 헝가리언 케이스

 

5. 표현식과 문

5-1 값과 리터럴

값 value

표현식이 평가 되어 생성된 결과

값을 생성하는 가장 기본적인 방법은 리터럴을 사용하는 것

 

**평가 : 식을 해석해서 값을 생성하거나 참조하는 것

 

리터럴literal

사람이 이행할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법

 

5-2 표현식

표현식이란?

값으로 평가될 수 있는 문

표현식은 문의 일부일 수있고 그 자체로 문이 될 수도 있음

표현식이 평가되면 새로운 값을 생성하거나 기존값을 참조

 

표현식 구별 방법

변수에 할당해보는 것 -> 할당이 안되면 표현식이 아닌 문

 

5-3. 문

문이란?

문의 집합으로 이뤄진 것이 프로그램, 문을 작성하고 순서에 맞게 나열하는 것이 프로그래밍

문은 명령문이라고도 부른다 문은 컴퓨터에 내리는 명령

ex) 선언문, 할당문, 조건문, 반복문

 

토큰이란?

토큰 : 문법적으로 더이상 나눌수 없는 코드의 기본요소

ex) 키워드, 식별자, 연산자, 리터럴, 세미콜론, 마침표 등의 특수 기호

 

세미콜론

문의 종료를 나타냄

이프문, 포문, 함수 등의 코드 블록 뒤에는 세미콜론 ✕ → 언제나 문의 종료를 의미하는 자체 종결성을 갖기 떄문