[JavaScript] 10. JavaScript 중간 정리

 

 

관련 JavaScript  글

https://kyr5191.tistory.com/34

[JavaScript] 5. JavaScript 배경

 

자바스크립트의 탄생과 표준화

• 탄생 배경: 1995년 브렌던 아이크가 개발한 자바스크립트는 웹페이지의 보조 기능을 수행하기 위해 넷스케이프 내비게이터에 탑재되었다. 초기 이름은 모카(Mocha)였고, 이후 라이브스크립트(LiveScript)를 거쳐 자바스크립트(JavaScript)로 명명.
• 표준화 필요성: 브라우저 간 호환성 문제(크로스 브라우징 이슈)가 심각해지면서 1996년 넷스케이프는 ECMA 인터내셔널에 표준화를 요청, 1997년 ECMAScript(ES)라는 표준 사양이 완성되었다.

---

ECMAScript 주요 버전과 특징

• ES5 (2009): JSON 지원, strict mode, 배열 메서드 추가.
• ES6 (2015): let/const, 클래스, 화살표 함수, 모듈(import/export), Promise 도입.
• ES8 (2017): async/await, Object.values, Object.entries.
• ES11 (2020): 옵셔널 체이닝, null 병합 연산자, BigInt.

---

자바스크립트 성장의 역사

Ajax의 등장

• 기존 방식의 한계: 변경이 없는 부분까지 전체 HTML을 다시 렌더링해야 해 성능 저하 및 화면 깜빡임 현상이 발생.
• Ajax: 필요한 데이터만 요청하여 일부만 렌더링 가능. 데스크톱 애플리케이션과 유사한 성능과 부드러운 사용자 경험 제공.

jQuery

• DOM 제어를 간소화하고 크로스 브라우징 이슈를 완화.

V8 자바스크립트 엔진

• 구글이 개발한 V8 엔진(2008)은 자바스크립트 성능을 비약적으로 개선. 웹 애플리케이션이 데스크톱 애플리케이션 수준의 사용자 경험(UX) 제공.

Node.js

• 브라우저 외 환경에서도 자바스크립트를 실행할 수 있는 런타임 환경.
• 비동기 I/O와 단일 스레드 이벤트 루프 기반으로 서버 사이드 애플리케이션 개발에 최적.
• 적합한 분야: 실시간 데이터 처리가 빈번한 SPA.
• 제한 사항: CPU 사용률이 높은 애플리케이션에는 비권장.

SPA와 프레임워크

• SPA(Single Page Application): 초기 로딩 시 모든 스크립트를 로드하고 필요한 부분만 업데이트하여 성능 최적화.
• 프레임워크의 등장: Angular, React, Vue.js와 같은 SPA 프레임워크는 확장성과 유지보수성을 높이며 복잡한 웹 애플리케이션 개발에 필수 요소로 자리 잡음.

---

자바스크립트와 ECMAScript

• ECMAScript: 프로그래밍 언어의 값, 타입, 객체, 표준 빌트인 객체 등 핵심 문법을 규정.
• 클라이언트 사이드 Web API: DOM, BOM, Canvas, fetch 등은 ECMAScript 사양 외 별도로 관리.

---

자바스크립트의 특징

1. 멀티 패러다임 언어
   • 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍 지원.
   • 클래스 기반 언어보다 유연하고 강력한 프로토타입 기반 객체지향 언어.
2. 인터프리터 언어
   • 별도의 컴파일 과정 없이 즉시 실행.
   • 최신 자바스크립트 엔진은 인터프리터와 컴파일러의 장점을 결합해 실행 속도 최적화.
3. 범용 프로그래밍 언어
   • 브라우저뿐 아니라 서버(Node.js), 데스크톱(Electron), 모바일 앱(React Native), 머신러닝(TensorFlow.js) 등 다양한 환경에서 사용.

---

관련 JavaScript 글

https://kyr5191.tistory.com/29

[JavaScript] 1. 스코프

https://kyr5191.tistory.com/31

[JavaScript] 2. 호이스팅

https://kyr5191.tistory.com/38

[JavaScript] 7. JS 기초 (변수, 데이터 타입)

 

4.1 변수란 무엇인가?

• 변수의 개념: 값을 저장하고 참조하기 위해 메모리 공간에 붙인 이름.
• 필요성: 메모리 주소를 직접 다루지 않고 안전하게 값에 접근 가능.
• 추가 장점:
  • 여러 값은 배열/객체로 그룹화 가능.
  • 가독성과 협업성 향상.

---

4.2 식별자

• 정의: 메모리 주소를 가리키는 이름.
• 역할: 변수 이름과 메모리 주소를 매핑.
• 규칙: 선언 후 사용해야 하며, 네이밍 규칙 준수 필요.

---

4.3 변수 선언

• 정의: 값을 저장할 메모리 공간 확보 및 변수 이름과 연결.
• 초기화: 선언 시 undefined로 자동 초기화 (var 키워드).
• 주의점: 값을 할당하지 않은 메모리는 쓰레기 값을 가질 수 있음.

---

4.4 변수 호이스팅

• 특징:
  • 변수 선언은 런타임 이전에 먼저 실행.
  • 코드 상 위치와 관계없이 변수 선언이 가장 먼저 실행됨.
• 결과: 선언된 변수는 어디서든 참조 가능.

---

4.5 값의 할당

• 방법: = 연산자를 사용해 값을 변수에 저장.
• 주의점: 선언과 값 할당의 실행 시점이 다름.
  • 선언: 런타임 이전 실행.
  • 값 할당: 런타임에 실행.
• 동작: 값 할당 시 기존 메모리 공간을 사용하지 않고 새로운 메모리 공간에 값을 저장.

---

4.6 값의 재할당

• 정의: 이미 값이 있는 변수에 새로운 값을 저장.
• 상수: 재할당 불가한 변수.
• 메모리 관리: 사용되지 않는 값은 가비지 콜렉터에 의해 자동 해제.

---

가비지 콜렉터

• 정의: 더 이상 사용되지 않는 메모리를 해제하는 기능.
• 역할: 메모리 누수를 방지하여 애플리케이션 안정성 유지.

1.  

---

관련 JavaScript 글

https://kyr5191.tistory.com/33

[JavaScript]4. 배열을 다루는 함수

 

5. 값, 리터럴, 표현식, 문

5.1 값

• 값: 표현식이 평가되어 생성된 결과. 

var sum = 10 + 20; // sum에는 30이라는 값이 할당됨.

• 10 + 20은 평가 과정을 통해 **값(30)**을 생성.
• 변수에는 평가된 값만 저장됨.

---

5.2 리터럴

• • 사람이 이해할 수 있는 문자나 약속된 기호로 표기.
  • 자바스크립트 엔진이 런타임에 리터럴을 평가해 값을 생성.리터럴: 값을 생성하기 위한 표기법.

var number = 10; // 숫자 리터럴 var string = "hello"; // 문자열 리터럴 var object = { key: "value" }; // 객체 리터럴

---

5.3 표현식

• • 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조.
  • 값이 위치할 수 있는 자리에는 표현식도 위치 가능.표현식: 값으로 평가될 수 있는 문.

var value = 10 + 20; // 10 + 20은 표현식이며 값(30)으로 평가.

---

5.4 문

• • 문은 하나 이상의 토큰(키워드, 연산자, 리터럴 등)으로 구성.
  • 문은 프로그램의 흐름을 정의.문: 프로그램을 구성하는 최소 실행 단위.

var x; // 선언문 
x = 5; // 할당문 
if (x > 1) console.log(x); // 조건문 for (var i = 0; i < 2; i++) console.log(i); // 반복

---

5.5 세미콜론과 자동 삽입 기능

• 세미콜론: 문의 종료를 나타냄.
  • 블록문 {} 뒤에는 세미콜론을 붙이지 않음.
   

var x = 10; // 세미콜론 필요 if (x > 1) { console.log(x); } // 블록문 뒤에는 생략

---

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

• 표현식인 문: 값으로 평가될 수 있는 문.
• 표현식이 아닌 문: 값으로 평가되지 않음.
   

   

var foo = 10 + 20; // 표현식인 문 var bar = var x; // 표현식이 아닌 문 → 에러 발생

 

---

관련 JavaScript 글

https://kyr5191.tistory.com/38

[JavaScript] 7. JS 기초 (변수, 데이터 타입)

https://kyr5191.tistory.com/39

[JavaScript] 8. JS 기초 (원시 타입)

 

자바스크립트 데이터 타입 정리

1. 자바스크립트의 값과 데이터 타입

• 값: 식(표현식)이 평가되어 생성된 결과.
• 데이터 타입: 값의 종류를 구별하기 위한 기준.
  • 필요성:
    1. 값 저장에 필요한 메모리 공간의 크기 결정.
    2. 값을 참조할 때 해석 방법 결정.
    3. 런타임 에러 방지 및 코드 신뢰성 확보.

---

2. 기본 데이터 타입

2.1 숫자 타입

• 하나의 숫자 타입만 존재. (정수, 실수 구분 없음)
• 모든 숫자를 실수로 처리. 

console.log(1 === 1.0); // true

 

2.2 문자열 타입

• 텍스트 데이터를 나타냄.
• 문자열은 변경 불가능(immutable).

var string = "hello"; // 문자열은 따옴표로 감싸야 함

 

2.3 템플릿 리터럴

• 문자열을 편리하게 작성하기 위한 백틱(``) 사용.
• 멀티라인 문자열 및 표현식 삽입 가능.

var name = "John"; var message = `Hello, ${name}!`; // 표현식 삽입

 

2.4 불리언 타입

• 참(true)과 거짓(false)만 가짐.
• 조건문, 제어문 등에서 사용.

var isLoggedIn = true;

 

2.5 undefined 타입

• 변수를 선언했지만 값을 할당하지 않은 경우.
• 자바스크립트 엔진이 초기화할 때 자동으로 할당.

2.6 null 타입

• 값이 없음을 명시적으로 표현. 

var value = null; // 값이 없음

 

2.7 심벌 타입

• 유일무이한 값. 객체의 유일한 프로퍼티 키로 사용. 

var key = Symbol("unique"); var obj = {}; obj[key] = "value";

 

2.8 객체 타입

• 기본 데이터 타입 외의 모든 값은 객체 타입.
• 자바스크립트의 거의 모든 요소는 객체.

---

3. 동적 타이핑

• 자바스크립트는 동적 타입 언어로, 변수 선언 시 타입을 명시하지 않음.
• 값이 할당되는 시점에 타입이 결정(타입 추론).
• 장점: 유연성.
• 단점: 타입 추적이 어려워 런타임 에러 가능성 증가.

var value = 10; // 숫자 타입 value = "hello"; // 문자열 타입으로 변경 가능

---

4. 가독성과 신뢰성을 위한 코드 작성

• 동적 타입 언어의 특성상 명확한 변수명과 코드 스타일이 중요.
• 가독성을 높이고, 팀원 간 오해를 줄이는 코드 작성이 필수.
  • 예시: 변수명을 값의 의미와 타입에 맞게 설정.