Frontend/Study

[모던 자바스크립트 Deep Dive] (01~03) 04~08 장

BeNI 2022. 12. 4. 02:57
728x90

01장 - 프로그래밍

프로그래밍은 요구사항의 집합을 분석해 적절한 자료구조를 이용하여 흐름을 제어하는 것

 

 

02장 - 자바스크립트란?

1. 역사

넷스케이프 커뮤니케이션즈의 모카 👉 라이브스크립트 👉 자바스크립트

 

2. 표준화

ECMA 인터내셔널(컴퓨터 시스템 표준화 관리)에서 ES1 ~ ES6까지 발전해옴

 

3. 성장

초창기 자바스크립트는 웹페이지의 보조적 역할

  • Ajax : 서버와 브라우저가 비동기방식으로 데이터 교환
  • jQuery : DOM을 더욱 쉽게 제어 
  • V8 자바스크립트 엔진 : 더욱 빠른 성능
  • Node.js : 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경
  • SPA 프레임워크 : CBD방법론을 기반한 SPA가 대중화 되면서 여러 프레임워크/라이브러리 등장

4. ECMAScript

자바스크립트 표준 사양인 ECMA-262를 뜻하며 프로그래밍 언어의 핵심 문법 규정

자바스크립트가 ECMAScript를 아우르는 더 큰 개념

 

5. 특징 

  • 웹 브라우저에서 동작하는 유일한 프로그래밍 언어
  • 컴파일 작업을 수행하지 않는 인터프리터 언어
  • 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어

 

03장 - 생략

 

04장 - 변수

1. 의미

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

👉 값의 위치를 가르키는 상징적인 이름

  • 할당 : 변수에 값을 저장하는 것
  • 참조 : 변수에 저장된 값을 읽어 들이는 것

2. 식별자

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

값이 아닌 메모리 주소를 기억하고 있다.

 

3. 변수 선언

var, let, const의 세가지 방식

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

 

- 변수를 선언한 후 할당하지 않으면 undefined 값이 들어간다.

var scroe; // undefined
  • 선언 단계 : 변수 이름을 등록해 자바스크립트 엔진에 변수의 존재를 알린다
  • 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 undefiend를 할당해 초기화

* 변수 이름은 실행 컨텍스트에 등록된다. (JS 엔진이 소스코드를 실행하기 위한 환경 제공, 결과를 관리하는 영역)

  변수 이름과 값은 key/value 객체로 등록되어 관리됨

 

4. 실행 시점과 호이스팅

변수 선언은 런타임이 아닌 그 이전 단계에서 먼저 실행됨

* 런타임 : 소스코드가 한 줄씩 순차적으로 실행되는 시점

 

호이스팅 : 변수 선언문이 코드의 선두로 끌어 올린 것처럼 동작

✅ var 뿐만아니라 다른 모든 식별자(변수, 함수 클래스 등)은 호이스팅 된다.

 

5. 값의 할당

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

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

변수 선언은 런타임 이전에 실행, 변수 할당은 런타임에 실행됨

📌 변수에 값을 할당할 때는 이전 값 undefined가 저장되어 있는 메모리 공간을 지우고 값을 할당하는게 아닌,

      새로운 메모리 공간을 확보하고 값을 할당한다

 

6. 값의 재할당

var 키워드로 선언한 변수는 값의 재할당 가능

값을 재할당 할 수 없어 변수에 저장된 값을 변경할 수 없다면 변수가 아닌 상수 

 

재할당시 처음 할당 과정과 마찬가지로 기존 메모리공간이 아닌 새 메모리 공간에 값을 할당함

사용하지 않는 메모리 영역은 가비지 콜렉터에 의해 메모리에서 자동 해제 (예측 불가능)

 

* unmanaged language : 개발자가 저수준의 메모리 제어 기능 제공 ex) malloc, free

  managed language : 메모리 관리 기능을 언어 차원에서 담당

 

7. 식별자 네이밍 규칙

  • 식별자는 특수문자 제외한 문자, 숫자, _, $ 로 시작해야 한다. (숫자 시작 안됨)
  • 예약어는 식별자로 사용할 수 없다.

 

05장 - 표현식과 문

1. 값

식이 평가되어 생성된 결과

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

2. 리터럴

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

자바스크립트 엔진은 런타임에 리터럴을 평가해 값을 생성 

ex) 정수 리터럴, 부동소수점 리터럴, 2진수 리터럴 등

 

3. 표현식

값으로 평가될 수있는 문, 즉 표현식이 평가되면 새로운 값을 생성/참조

* 리터럴도 표현식

 

4. 문

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

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

 

5. 세미콜론 

자바스크립트에는 소스코드 문의 끝이라고 예측되는 지점에 자동으로 세미콜론을 붙여주는 기능이 있음

 

6. 표현식인 문과 아닌 문

구문을 변수에 할당하여 에러가 나지 않으면 표현식, 에러가 나면 표현식이 아니다.

var x; // 변수 선언문은 표현식이 아닌 문이다.
x = 100; // 할당문은 표현식이다

var foo = var x; // 할당하면 에러가 난다

 

* 완료 값 : 크롬 개발자 도구에서 표현식이 아닌 문을 실행하면 undfined를 출력한다.

 

06장 - 데이터 타입

구문 데이터 타입 설명
원시 타입 숫자 타입 하나의 숫자 타입만 존재
문자열 타입 문자열
불리언 타입 true, false
undefined 타입 var 키워드로 선언된 변수에 암묵적 할당 값
null 타입 값이 없다는 것을 의도적으로 명시
Symbol 타입 ES6에서 추가된 7번째 타입
객체 타입 객체, 함수, 배열

1. 숫자 타입

모든 수를 실수로 처리하며, 정수만 표현하기 위한 데이터 타입 별도로 존재하지 않음

정수, 실수, 2진수, 8진수, 16진수 리터럴은 모두 메모리에 배정밀도 64비트 부동소수점 형식의 2진수로 저장됨

2진수, 8진수, 16진수 값을 참조하면 모두 10진수로 해석된다.

 

📌 추가적인 값

  • Infinity: 양의 무한대
  • -Infinity: 음의 무한대
  • NaN: 산술 연산 불가

2. 문자열 타입

0개 이상의 16비트 유니코드 문자의 집합

작은따옴표(''), 큰따옴표(""), 백틱(``)으로 텍스트를 감싼다.

 

3. 템플릿 리터럴

백틱을 사용하여 표현

 

1) 멀티라인 문자열

멀티라인 문자열을 표현하기 위해서는 이스케이프 시퀀스를 사용해야 함

하지만 템플릿 리터럴을 사용하면 해당 백틱 내 줄바꿈, 공백이 있는 그대로 출력된다.

var template = `<ul>
  <li><a href="#">Home</a></li>
</ul>`;

console.log(template);
<ul>
  <li><a href="#">Home</a></li>
</ul>

 

2) 표현식 삽입

템플릿 리터럴 내에서는 표현식 삽입을 통해 간단한 문자열을 삽입할 수 있다.

var first = 'Gunwoo';
var last = 'Lee';
console.log(`${first} ${last}`); // Lee Gunwoo

4. 불리언 타입

true, false 

 

5. undefined 타입

var로 선언한 변수가 암묵적으로 가지는 값

 

6. null 타입

대소문자를 구별한다. 다른 Null, NULL과 다르다.

의도적으로 변수에 값이 없다고 명시할 때 사용

 

7. 심벌 타입

다른 값과 중복되지 않는 유일무이한 값

var key = Symbol('key');

 

8. 객체 타입

자바스크립트를 이루는 모든 것이 객체 !

 

9. 데이터 타입의 필요성 ?

  • 데이터 타입에 의한 메모리 공간의 확보와 참조
  • 데이터 타입에 의한 값의 해석

10. 동적 타이핑

정적 타입 언어 : 미리 변수를 선언할 때 데이터 타입 선언, 컴파일 시점에 타입 체크 

동적 타입 언어 : 변수를 선언할 때 타입을 선언하지 않음 => 자바스크립트

 

자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 추론된다.

또한 재할당에 의해 변수의 타입이 동적으로 변할 수 있다.

 

📌 변수를 사용할 때 주의사항

  • 변수는 꼭 필요한 경우에 한해 제한적으로 사용한다
  • 변수의 유효 범위는 최대한 좁게 만들어 변수의 부작용을 억제해야 한다
  • 전역 변수는 최대한 사용하지 않도록 한다
  • 변수보다는 상수를 사용해 값의 변경을 억제한다.
  • 변수 이름은 목적이나 의미를 파악할 수 있도록 네이밍한다.

가독성이 좋은 코드 = 좋은 코드

 

 

07장 연산자

  • 피연산자 : 연산의 대상
  • 연산자 : 하나 이상의 표현식을 대상으로 연산을 수행하여 하나의 값을 만듬

1. 산술 연산자

1) 이항 산술 연산자 : +, -, *, /, %

2) 단항 산술 연산자: ++, --, +, -(음수로 만듬)

3) 문자열 연결 연산자: + 

- 피연사자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작!

- 암묵적으로 타입을 변경 시킬 수 있다. 

 

2. 할당 연산자 

=, +=, -=, *=, /=, %=

 

3. 비교 연산자 

1) 동등/일치 비교 연산자 : ==, ===, !=, !==

되도록 타입까지 비교하는 ===, !== 를 쓰도록 권장

* NaN === NaN : false

 

2) 대소 관계 비교 연산자 : >, <, >=, <=

 

4. 삼항 조건 연산자

조건식 ? true일 때 반환 값 : false일 때 반환값

 

5. 논리 연산자 

||, &&, !

 

6. 쉼표 연산자

x = 1, y= 2, z =3;  

마지막 피연산자의 평가 결과 반환(3)

 

7. 그룹 연산자

소괄호()로 피연산자를 감쌈. 우선순위가 제일 높음

 

8. typeof

피연산자의 데이터 타입을 문자열로 반환

* typeof null의 결과는 object(버그)

 

9. 지수 연산자

좌항의 피연산자를 밑, 우항의 피연산자를 지수로 거듭제곱

2 ** 2; // 4
2 ** 0; // 1
(-5) ** 2; // 25 밑이 음수면 괄호로 묶어야 한다

* 도입되기 이전엔(~es6) Math.pow 메서드를 이용했다.

 

10. 그 외 연산자

- 다른 장에서

 

11. 연산자의 부수 효과

부수 효과가 있는 연산자는 할당연산자(=), 증가/감소 연산자(++/--), delete 연산자

 

12. 연산자의 우선 순위

우선순위 연산자
1 ()
2 new(매개변수 존재), ..[], ()(함수호출), ?.
3 new(매개변수 미존재)
4 x++, x--
5 !x, +x, -x, ++x, --x, typeof, delete
6 **
7 *, /, %
8 +, -
9 <, <=, >, >=, in, instanceof
10 ==, !=, ===, !==
11 ??(null 병합 연산자)
12 &&
13 ||
14 삼항 연산자
15 할당 연산자
16 ,(쉼표)

 

13. 연산자 결합 순서 - 생략

 

 

 

08장 제어문

1. 블록문

0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록으로 부름

 

2. 조건문

1) if ... else 문

2 switch 문

- 각 case에 break문을 넣지 않으면 다음 case로 넘어가는 것 주의

 

3. 반복문

1) for문

2) while문

3) do...while 문

 

4. break 문

레이블 문, 반복문, switch 문의 코드 블록을 탈출

 

5. continue 문

반복문의 코드 블록 실행을 현 지점에서 중단하고 그 다음 증감식으로 반복문 재개

 

 

 

 

 

728x90
저작자표시 비영리