2주차 과제 - 모던자바스크립트 1~6장 정리

 

1장

"프로그래밍"

 

1.1 프로그래밍

-프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션.

-문제해결 능력을 요구하며 정확하고 상세하게 요구사항을 설명하는 작업이다.

 

1.2 프로그래밍 언어 

- 사람이 이해할 수 있는 프로그래밍 언어(ex. 자바스크립트)를 컴파일러가 기계어(1 또는 0)로 번역하여 컴퓨터가 실행하도록 한다.

 

---

2장

"자바스크립트란?"

 

2.1 자바스크립트의 탄생

- 1995년 넷스케이프 커뮤니케이션즈에서 웹페이지의 보조적 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어를 브렌던 아이크가 개발한다.

- 1996년 내비게이터2에 탑재되었고 '모카'로 명명되었고, 후에 '라이브스크립트' 에서 '자바스크립트'로 최종 명명되었다.

- 이후 JScript 가 출시되어 자바스크립트는 위기를 맞는다.

 

2.2 자바스크립트의 표준화

- 마이크로소프트는 자바스크립트의 파생버전인 'JScript'를 IE에 탑재하지만 JScript와 자바스크립트가 표준화되지 못한 상태였다. 크로스 브라우징 이슈가 발생하여 이후 표준화된 자바스크립트 ECMAScript가 탄생한다.

- 2009년 ECMAScript 5 (ES5)로 명명되고, 2015년 ES6가 출시된다. 

 

2.3 자바스크립트 성장의 역사

- 초창기 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 사용되었다.

- 서버로부터 전달받은 HTML과 CSS를 단순히 렌더링 하는 수준

- Ajax: 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환하는 통신 기능인 Ajax가 등장.

- 변경할 필요가 없는 부분까지 포함된 HTML 코드를 서버로부터 다시 전송받아 불필요한 통신이 발생하여 성능 면에서도 불리하며 화면이 순간 깜빡이는 현상을 Ajax 가 해결하였다. 변경할 필요가 없는 부분은 다시 렌더링 하지 않고, 서버로부터 필요한 데이터만 전송받아 변경해야 하는 부분만 렌더링하는 방식.

 

2.4  자바스크립트와 ECMAScript

- 자바스크립트는 프로그래밍 언어로서 뼈대를 이루는 ECMAScript와 브라우저가 별도 지원하는 클라이언트 사이트 Web API, 즉 DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker 등을 아우르는 개념이다.

 

특징:

-웹브라우저에서 동작하는 유일한 프로그래밍 언어.

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

- 인터프리터와 컴파일러의 장점을 결합해 처리속도가 느린 인터프리터의 단점을 해결

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

- 프로토타입 기반의 객체지향 언어 

 

---

4장

"변수"

 

4.1 변수란 무엇인가? 

- 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름

- 프로그래밍 언어에서 값을 저장하고 참조하는 메커니즘으로, 값의 위치를 가리키는 상징적인 이름.

 

- 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체

- 각 셀은 고유의 메모리 주소를 갖는다. 이 메모리 주소는 메모리 공간의 위치를 나타낸다.

 

-  변수에 값을 저장하는 것 => 할당(대입, 저장)

- 변수에 저장된 값을 읽어 들이는 것 =>  참조

 

4.2 식별자

- 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름.

- 식별자는 값이 아니라 메모리 주소를 기억하며, 식별자를 통해 그 메모리 공간에 저장된 값에 접근할 수 있다.

- 즉, 메모리 주소에 붙인 이름

- 변수, 함수, 클래스 등 이름은 모두 식별자.

 

result     -------------------->       0x0669F913      [ 30 ]

변수 이름(식별자)                    메모리주소     메모리

 

 

4.3 변수 선언

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

-  변수 선언시  var, let, const 키워드를 사용.

-  변수 선언시 undefined라는 값이 암묵적으로 할당되어 초기화된다. (undefined 는 자바스크립트에서 제공하는 원시타입의 값)

- 자바스크립트 엔진은 변수선언을 선언 단계 -> 초기화 단계 총 2단계를 거쳐 수행한다.

1.선언단계: 변수 이름을 등록해 자바스크립트 엔진에 변수의 존재를 알린다.

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

 

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

console.log(score); // undefined

var score;

- 만약 코드가 순차적으로 실행되는 런타임에 변수 선언이 실행된다면 console 에는 참조에러가 발생해야 하지만 udefined가 출력된다.

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

- 모든 선언문은 런타임 이전 단계에서 먼저 실행된다.

 

4.5 값의 할당

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

 

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

- 이 때 주의할 점은 변수 선언과 값의 할당의 실행 시점이 다르다.

변수 선언은 런타임 이전에 먼저 실행되지만,

값의 할당은 런타임에 실행된다.

 

console.log(scroe);  // undefined

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

console.log(score); // 80

 

 

 

 

 

 

4.7 식별자 네이밍 규칙

1. 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러기호($)를 포함할 수 있다.

2. 단, 식별자는 특수문자를 제외한 문자, 언더스코어, 달러기호로 시작해야한다. (숫자로 시작X)

3. 예약어는 식별자로 사용 X

 

자바스크립트는 대소문자를 구별하므로 다음 변수는 각각 별개의 변수다.

var firstname;

va rfirstName;

var FIRSTNAME;

 

변수 이름은 존재의 목적을 쉽게 이해할 수 있도록 의미를 명확히 해야한다.

변수 선언에 주석이 필요하다면 좋지 않은 변수명

네이밍 컨벤션(naming convention) 은 하나 이상의 영어 단어로 구성된 식별자를 만들 때 가독성 좋게 단어를 구분하기 위해 규정한 명명 규칙이다.

변수나 함수의 이름에는 카멜 케이스, 생성자함수, 클래스 이름에는 파스칼 케이스를 사용한다.

var firstName;  // 카멜케이스
var first_name; // 스테이크 케이스
var FirstName;  // 파스칼 케이스

 

 

---

5장

"표현식과 문"

 

5.1 값

- 값 :  "식(표현식)이 평가" 되어 "생성된 결과"

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

// 10 + 20 은 평가되어 숫자 값 30을 생성한다.
10 + 20; // 30

 

5.2 리터럴

- 리터럴: 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법.

정수 / 부동소수점 / 2진수,8진수,16진수  / 문자열  / 불리언 / null / undefined / 객체 / 배열 / 함수 / 정규 표현식 리터럴이 있다.

- 리터럴은 평가되어 값을 생성한다.

5.3 표현식

- 값으로 평가될 수 있는 문(statement)

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

- 리터럴은 값으로 평가되므로 리터럴도 표현식이다.

 

5.4 문

- 프로그램을 구성하는 기본 단위이자 최소 실행 단위.

- 문은 여러 토큰으로 구성된다. 토큰이란, 문법적인 의미를 가지며 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미.

- ex) 키워드, 식별자, 연산자, 리터럴, 세미콜론이나 마침표, 등의  특수 기호는 문법적인 의미를 가지며 문법적으로 더이상 나눌 수 없는 코드의 기본 요소이므로 모두 토큰이다.

- 명령문이라고도 한다. 즉 문은 컴퓨터에 내리는 명령어. 

- 선언문, 할당문, 조건문, 반복문 등으로 구분.

 

 

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

- 세미콜론(;) 은 문의 종료를 나타낸다.

- 자바스크립트 엔진은 세미콜론으로 문이 종료한 위치를 파악하고 순차적으로 하나씩 문을 실행.

- 단 0개 이상의 문을 괄호로 묶은 코드 블록 ({...}) 뒤에는 세미콜론을 붙이지 않는다. 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문.

 

 

---

6장

"데이터 타입"

 

- 데이터타입(=타입) 은 값의 종류를 말한다.

- 자바스크립트의 모든 값은 데이터 타입을 갖는다.

- ES6 는 7개의 데이터 타입을 제공한다. 

 

구분	데이터타입	설명
원시타입	숫자	숫자, 정수와 실수 구분 없이 하나의 숫자 타입만 존재
	문자열	문자열
	불리언	논리적 참(true) 과 거짓 (false)
	undefined	var 키워드로 선언된 변수에 암묵적으로 할당되는 값
	null	값이 없다는 것을 의도적으로 명시
	심벌	ES6에서 추가된 7번째 타입
객체타입		객체, 함수, 배열 등