모던 자바스크립트 Deep Dive 1~6장 공부

1장 프로그래밍

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

문제 해결 능력: 문제를 명확히 이해한 후 적절한 해결방안을 제시하는 능력

컴퓨팅 사고: 컴퓨터는 0 과 1만 알기 때문에 문제 해결방안을 생각할 때 컴퓨터의 입장에서 문제를 바라보는 사고

 

2장 자바스크립트란?

자바스크립트의 탄생: 1950년, 넷스케이프 커뮤니케이션즈에 의해 만들어졌다.

이유: 웹페이지의 보조적인 기능을 수행하기 위해!!!

 

자바스크립트의 표준화

버전	출시연도	특징
ES1	1997	초판
ES2	1998	ISO/IEC 16262 국제 표준과 동일한 규격 사용
ES3	1999	정규 표현식, try, ... catch
ES5	2009	HTML5와 함꼐 출현한 표준안 JSON,strict mode, 접근자 프로퍼티, 향상된 배열 조작가능
ES6	2015	let/const 클래스, 탬플릿 리터널, 스프레드 문법, for....of
ES7	2016	지수연산자, Arrat,String  초기 타입 include
ES8	2017	Obiect 정적 메서드
ES9	2018	Obiect rest/spread 프로퍼티
ES10	2019	Array.prototype.flatMap

 

ES11

2020

병합연산자 ,for in

자바스크립트 성장의 역사

초창기 자바스크입트는 웹페이지의 보조적인 역활만 하였다.

그러나 시간이 지나면서 자바스크립트의 역활이 많아져 많이 발전하게 되었다.

JS의 발전에서 중요했던 기술들은 크게 Ajax, jQuery, V8 JS Engine, Node.js, SPA 프레임워크들이 있다.

 

Ajax(Asynchronous JS and XML)는 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신기능이다.Ajax 이전에는 화면이 전환될 때마다 서버로부터 새로운 HTML을 전송받아 웹페이지 전체를 처음부터 다시 렌더링했다.

 

jQuery는다소 번거롭고 녾란이 있던  DOM을 쉽게 제어하게 해준 JS 라이브러리이다.

 

V8 JS 엔진은 과거 웹 서버에서 수행되던 로직들이 클라이언트(브라우저)로 많이 이동하게 된 계기가 되었다. 

 

Node.js는 구글 V8 JS 엔진으로 빌드된 JS 런타임 환경입니다. 원래는 브라우저의 JS 엔진에서만 동작하던 자바스크립트를 브라우저 밖으로 독립시켰습니다. 덕분에 서버 사이드를 개발할 때에 JS를 쓸 수 있게 되었습니다.

 

최근에는 Angular, React, Vuejs 등  SPA프레임워크들이 등장했다.

 

자바스크립트의 특징

1. 객체 기반의 스크립트 언어.

2. 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어입니다.

 - 인터프리터란:

소스코드를 한 줄 한 줄 읽어가며 명령을 바로 처리하는 프로그램 언어

3. 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있습니다.

 - 객체 지향형 프로그래밍: 프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고 그 객체들 간                                              의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법

-함수형 프로그래밍:  거의 모든 것(코드)을 순수 함수로 나누어 문제를 해결하는 기법

 

3장 자바스크립트 개발 환경과 실행 방법

자바스크립트 실행 환경

모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 Js엔진을 보유하고 있다.(Node.js 포함)

그러나 브라우저와 Node.js 의 용도는 다르다!!!!

브라우저: HTML, CSS, JS 를 실행해 웹페이지를 브라우저에 렌더링하는 것이 목적

Node.js: 브라우저 외부에서 JS 실행 환경을 제공하는 것이 목적

 

개발자 도구

운영체계	단축키
윈도우	F12 or ctrl +shift +i
macOS	단축키 alt + cmd + i

개발자 도구 성능

•  Elements : html/CSS 상태 확인
•  Console : 콘솔(로딩된 웹페이지의 에러를 확인하거나 소스코드에 작성한 console.log 메서드를 실행하여 결과 확인 가능)
•  Sources : 스크립트 디버깅 (로딩된 웹페이지의 자바스크립트 코드 디버깅 가능)
•  Network : 브라우저에서 발생하는 통신 상태
•  Application : 쿠키 및 스토리지 등의 내용 수집
  
  

4장 변수

변수: 하나의 값을 저장하기 위해 확보한 메모리 공간 or 메모리 공간을 식별하기 위해 붙인 이름

•  변수란 값의 위치를 가리키는 상징적인 이름. 

 

변수 선언 방법

var id = 1;

var name ='kim';

 

객체 or 배열을 이용하여 변수 선언 방법

var user = {id: 1, name:'kim'}

 

식별자: 변수의 이름을 식별자라고 부른다.

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

 

식별자 규칙

• 키워드를 사용하면 안 된다.
• 숫자로 시작하면 안 된다.
• 특수 문자는 _와 $만 허용된다.
• 공백 문자를 포함할 수 없다.

식별자 작성 방식

Camel Case 방식: 첫 번째 단어는 모두 소문자로 작성하고, 그다음 단어부터는 첫 문자만 대문자로 작성하는 방식.

Underscore Case 방식: 식별자를 이루는 단어들을 소문자로만 작성하고, 그 단어들을 (_) 로 연결하는 방식.

 

var firstVar = 10;   // Camel Case 방식

var second_val = 20; // underscore cse 방식

 

변수 값의 할당

 

- 변수에 값을 할당할 경우 좌변에 변수, 우변에 값 입력.

var score = 80; 

 

5장 표현식과 문

값

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

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

10 + 20 // 10+20이 평가되어 숫자 값 30을 생성

• 모든 값은 데이터 타입을 가지며, 2진수(비트)의 나열로 저장된다.
• 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있다.
• 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 메모리 공간을 식별하기 위해 붙인 이름

리터럴

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

• 이해할 수 있는 문자(아라비아 숫자, 알파벳 한글 등)
• 미리 약속된 기호("", ., [], {}, // 등)
•  
• 리터럴은 평가되어 값을 생성한다.

표현식 

 표현식: 값으로 평가될 수 있는 문

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

var score = 100 // 100은 리터럴 

 

문 

• 문(Statement)은 프로그램을 구성하는 기본 단위이자 최소 실행 단위이다. 문의 집합으로 이뤄진 것이 프로그램이며, 문을 작성하고 순서에 맞게 나열하는 것이 프로그래밍이다.
• 문은 여러 토큰으로 구성된다.(토큰:문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소)
• 문은 명령문이라고도 부르며, 컴퓨터에게 명령하는 개념으로 해석할 수 있다.
• 문은 선언문, 할당문, 조건문, 반복문 등으로 구분할 수 있다.

세미클론과 세미클론 자동 삽입 기능 

• 세미클론(:)은 문의 종료를 나타낸다.
• 자바스크립트 엔진은 세미클론으로 문이 종료된 위치를 파악하고 순차적으로 하나씩 문을 실행한다.
• 문을 끝낼 떄는 세미클론을 붙여야한다.
• 단 0 개 이상의 문을 중괄호로 묶은 코드({ ... }) 뒤에는 세미클른 사용하지 않는다.(ex if문, for문 등 자체 종결성을 가지고 있다.)
• 자바스크립트 엔진의 세미콜론 자동 삽입 기능(ASI) 덕분에 세미콜론은 생략이 가능하다.

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

• 표현식은 문의 일부일 수도 있고, 자체로 문이 될 수도 있다.
• 문에는 표현식인 문과 표현식이 아닌 문이 있다.
• 변수 선언문은 값으로 평가될 수 없으므로 문이다.
• 할당문은 값으로 평가될 수 있으므로 표현식인 문이다.

표현식인 문과 표현식 아닌문 구별법

• 표현식인 문과 표현식이 아닌 문을 구별하는 가장 간단하고 명료한 방법은 변수에 할당해 보는 것이다.

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

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

x = 100; //할당문은 표현식이지만 완전한 문이기도 하다. 즉 할당문은 표현식인 문이다.

 

 

6장 데이터 타입

• 데이터 타입은 값의 종류를 말한다.
• Js의 모든 값은 데이터 타입을 갖는다.
• Js는 7개의 데이터 타입을 가지고 윈시타입과 객체 타입으로 분리할 수 있다.

원시타입 

• 숫자 : 숫자, 정수 실수 구분 없이 하나의 숫자 타입만 존재
• 문자열
• 불리언 : 논리적 참과 거짓
• undefined : var 키워드로 선언된 변수에 암묵적으로 할당되는 값
• null : 값이 없다는 것을 의도적으로 명시할 때 사용하는 값
• 심벌 : ES6에서 추가된 7번째 타입

❌ 심벌은 실무에서 잘 사용하지 않는다

객체 타입  

• 객체, 함수, 배열

원시, 객체 타입의 특징

• 원시 타입
  • 원시 자료형을 변수에 할당하면 메모리 공간에 값 자체가 저장된다.
  • 원시 값을 갖는 변수를 다른 변수에 할당하면 원시 값 자체가 복사되어 전달된다.
  • 원시 자료형은 변경 불가능한 값(immutable value)이다. 즉, 한 번 생성된 원시 자료형은 읽기 전용(read only) 값이다.
• 객체 타입
  • 객체 자료형을 변수에 할당하면 메모리공간에 주소값을 저장한다.
  • 객체 값을 갖는 변수를 다른 변수에 할당하면 객체 값의 주소값을 복사하여 전달한다.
  • 객체 자료형은 변경 가능한 값(mutable value)이다.

→ 원시타입의 데이터의 경우 각 데이터를 복사하더라도 데이터의 값을 복사하기 때문에 데이터 값의 변경이 없다.

→객체 타입의 경우 데이터를 복사할 경우 데이터의 주소를 복사해 오기 때문에 데이터 값이 변한다.

// 원시 자료형이 참조된 변수를 다른 변수에 할당하기

let num = 20;

let copiedNum = num;

 

// 참조 자료형이 할당된 변수를 다른 변수에 할당하기

let arr = [0, 1, 2, 3];

let copiedArr = arr;

 

// 두 변수가 같은지 확인하기 - 1

console.log(num === copiedNum); //  true

console.log(arr === copiedArr); // true

 

// 원본을 변경하기

num = 30;

arr.push(4);

 

// 두 변수가 같은지 확인하기 - 2

console.log(num === copiedNum); // false

console.log(arr === copiedArr); // true

 

// 이 두 변수의 현재 상태는?

console.log(copiedNum); // 30

console.log(copiedArr); // [0,1,2,3,4]

💢 num의 경우 원시타입이므로 값이 변하면 copiednum값을 변경하는 것이 아닌 새로운 값을 메모리 공간에 저장한다. copiedArr의 경우 객체 타입으로 값을 주소로 부터 가져오기 때문에 값이 일정하다.

숫자타입

• C나 자바는 정수와 실수를 구분해 int, long, float, double등 다양한 숫자 타입을 제공하지만 자바스크립트는 하나의 숫자 타입만 존재한다.
• ECMAScript 사양에 따르면 숫자 타입의 값은 64비트 부동소수점 형식을 따른다. 즉, 모든 수를 실수로 처리하며, 정수만 표현하기 위한 데이터 타입이 별도로 존재하지 않는다.

var binary = 0b01000001 // 2진수

var octal = 0o101 // 8진수

var hex = 0x41 // 16진수

console.log(binary) // 65

console.log(octal) // 65

console.log(hex) // 65

console.log(binary === octal) // true

console.log(octal === hex) // true

 

 

• 숫자 타입은 추가적으로 세 가지 특별한 값도 표현할 수 있다.

console.log(10 / 0) // Infinity

console.log(10 / -0) // -Infinity

console.log(1 * "String") // NaN

 

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

문자열 타입

• 문자열 타입은 텍스트 데이터를 나타내는데 사용하며 0개 이상의 16비트 유니코드 문자(UTF-16)의 집합으로 전 세계 대부분 문자 표현 가능하다.
• 작은 따옴표(”), 큰 따옴표(""), 백틱으로 텍스트를 감싸고 일반적으로는 작은 따옴표가 많이 쓰인다.
• 작은 따옴표(”), 큰 따옴표(""), 백틱이 없으면 키워드 or 식별자 같은 토큰으로 구분한다.
• 문자열은 원시 자료형이지만 배열처럼 인덱스로 문자열의 각 문자에 접근이 가능합니다.
  
  let str = 'code';
  str = 'states';
  
  
  str[5] = 'z';
  
  
  console.log(str); // states
  💢 문자열은 원시 자료형이기 때문에 값을 수정할 수 없다.

템플릿 리터럴 

• ES6부터 템플릿 리터럴이 추가되었다.
• 템플릿 리터럴은 멀티라인 문자열, 표현식 삽입, 태그드 템플릿 등 편리한 문자열 처리 기능을 제공한다.
• 템플릿 리터럴은 백틱(``)을 사용한다.

var a = 26;

console.log(`내 나이는 ${a} 입니다!!!`)// %{}를 이용하여 표현식 넣기 가능

내 나이는 26 입니다!!!

 

• 일반 문자열 내에서는 줄바꿈(개행)이 허용되지 않지만, 템플릿 리터럴을 사용하면 개행을 표현할 수 있다.

var template = `<ul>\n\t<li><a href="#">Home</a></li></ul>`

console.log(template)

<ul>

    <li><a href="#">Home</a></li></ul>

 

불리언 타입 

• 불리언타입의 값은 논리적 참, 거짓을 나타내는  true,false 뿐이다.

undefined 타입

• undefined 값은 undefined 값이 유일하다.
• var 키워드로 선언한 변수는 암묵작으로 undefined로 초기화 된다.
• 변수 선언에 의해 확보된 메모리 공간을 처음 할당이 이뤄질 때까지 빈 상태(쓰레기 값이 들어 있음)로 내버려두지 않고 자바스크립트 엔진이 undefined로 초기화된다.
• 변수를 선언한 이후 값을 할당하지 않으면 undefined가 반환된다.

Null 타입 심벌타입

• null 타입의 값은 null 이 유일하다.
• Js는 대소문자를 구분하므로 null은 NULL,Null과 다르다.
• 프로그래밍 언어에서 변수에 값이 없다는 것을 의도적으로 명시할때 사용.
• 변수에 null을 할당하는 것은 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미이다.

var foo = 'kim'

foo = null

console.log(foo)

null

 

심벌타입

• ES6에서 추가된 7번째 타입으로 변경 불가능한 원시 타입의 값이다.
• 심벌 값은 다른 값과 중복되지 않는 유일무이한 값으로, 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용한다.
• 심벌 이외의 원시 값은 리터럴을 통해 생성하지만 심벌은 Symbol 함수를 호출해 생성한다. 외부에 의해 노출되지 않고 중복되지 않는 유일무이한 값이다.
• 실무에서는 잘 사용하지 않는다.

객체

• 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다
• 프로퍼티는 프로퍼티 키(이름)와 프로퍼티 값으로 구성
  • 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 symbol 값
  • 프로퍼티 값 : 모든 값
• 메소드: 객체에 제한되어 있는 함수

객체 자료형의 얕은 복사, 깊은 복사

얕은 복사는 참조 타입 데이터가 저장한 '메모리 주소 값'을 복사한 것

깊은복사: 새로운 메모리 공간을 확보하여 내부의 객체값까지 완전히 복사하는 것

 

얕은  복사

• slice()
• spread syntak
•  obiect assign()

slice()
let arr = [0, 1, 2, 3];
let copiedArr = arr.slice();
console.log(copiedArr); // [0, 1, 2, 3]
console.log(arr === copiedArr); // false

spread syntak
let arr = [0, 1, 2, 3];
let copiedArr = [...arr];
console.log(copiedArr); // [0, 1, 2, 3]
console.log(arr === copiedArr); // false

copiedArr.push(4);
console.log(copiedArr); // [0, 1, 2, 3, 4]
console.log(arr); // [0, 1, 2, 3]

object assign
let obj = { firstName: "coding", lastName: "kim" };
let copiedObj = Object.assign({}, obj);

console.log(copiedObj) // { firstName: "coding", lastName: "kim" }
console.log(obj === copiedObj) // false

💢참조 자료형이 몇 단계로 중첩되어 있던지, 위에서 설명한 방법으로는 한 단계까지만 복사할 수 있습니다.

let users = [
	{
		name: "kimcoding",
		age: 26,
		job: "student"
	},
	{
		name: "parkhacker",
		age: 29,
		job: "web designer"
	},
];

let copiedUsers = users.slice();

→user === copiedUsers를 해보면 false 가 나온다. 그러나 user[0] === copiedUsers[0]을 해보면 true값이 나온다.

 

깊은 복사

• JSON.stringify()
• JSON.parse()
• lodash
• ramda

💢 JavaScript 내부적으로는 깊은 복사를 수행할 수 있는 방법이 없습니다

JSON.stringify()는 참조 자료형을 문자열 형태로 변환하여 반환하고, JSON.parse()는 문자열의 형태를 객체로 변환하여 반환.

JSON.stringify()와 JSON.parse()
const arr = [1, 2, [3, 4]];
const copiedArr = JSON.parse(JSON.stringify(arr));

console.log(arr); // [1, 2, [3, 4]]
console.log(copiedArr); // [1, 2, [3, 4]]
console.log(arr === copiedArr) // false
console.log(arr[2] === copiedArr[2]) // false

💢 자료형 중에 함수가 포함되어 있을 경우 위 방법을 사용하면 함수가 null로 바뀌게 됩니다

자료형 중에 함수가 포함되어 있을 경우
const arr = [1, 2, [3, function(){ console.log('hello world')}]];
const copiedArr = JSON.parse(JSON.stringify(arr));

console.log(arr); // [1, 2, [3, function(){ console.log('hello world')}]]
console.log(copiedArr); // [1, 2, [3, null]]
console.log(arr === copiedArr) // false
console.log(arr[2] === copiedArr[2]) // false

외부 라이브러리 lodash 사용
const lodash = require('lodash');

const arr = [1, 2, [3, 4]];
const copiedArr = lodash.cloneDeep(arr);

console.log(arr); // [1, 2, [3, 4]]
console.log(copiedArr); // [1, 2, [3, 4]]
console.log(arr === copiedArr) // false
console.log(arr[2] === copiedArr[2]) // false