모던 자바스크립트 Deep Dive 훑기

 

딥다이브 후기

한달 동안 deep dive를 전체적으로 훑어보려 했지만 역시 조금 광대한 범위였다. 

하지만 이 책을 접했기에 내가 지금은 좀 성장했다(?)라는 느낌을 받는건 사실이다 ㅋㅋ

마음먹고 읽은거라 도움을 많이 받았다. 유튜브에 떠도는 js강의 여러개 들을바에 이거 한번 읽는게 나는 더 도움이 됐던거 같다. 너무 늦게 알았던게 아쉽기도 하고 (일찍 알았어도 지금 마음가짐 상태가 아녔기에 분명 안읽었음)

 

다음 달 부터는 deep dive를 한번 더 읽어 보려고 함..
참고로 책을 읽기 싫은 분들께 드리는 조언은,, 인프런 강의가 조금 더 도움이 됐다.

강사님께서 책에 대한 구문하나하나씩을 깊게 파주시진 않지만 책 안에서 조금 더 알아둬야 하는 부분은
체크하고 넘어가셨고 후반 부 강의서부터는 너무 건너뛰는게 많아서 안 듣게 됐지만,,
그냥 글만 읽으면 금방 지칠 수 있으니 한번 씩은 들으면서 훑는것도 추천! 

 

이 책과 동시 진행했던게 있는데 코어 자바스크립트이다. 

아래 인프런 강의 선생님의 책인데, 인프런에도 코어자바스크립트 유료강의가 따로 있다. 

유료강의는 진짜 강추.. 간략하게 핵심만 딱 정리해서 얘기해주시는데 정말정말 나는 잘들렸고 딥다이브도 오히려 접목하기 좋았다. 

 

기회가 된다면 코어자바스크립트도 다시 블로그에 글을 정리해봐야겠다. 

 

[무료] 모던 자바스크립트 딥다이브 스터디 - 인프런 | 강의

 

코어 자바스크립트 - 인프런 | 강의

 

---

 

5장 표현식과 문

값은 식이 평가되어 생성된 결과를 말한다.

• 모든 값은 데이터 타입을 가진다.

구분데이터 타입설명

원시타입	string	문자열
원시타입	number	숫자. 정수와 실수 구분 없이 하나의 숫자 타입만 존재
원시타입	boolean	true/false
원시타입	symbol	ECMAScript6 부터 새롭게 추가된재
원시타입	undefined	var키워드로 선언된 변수에 암묵적으로 할당되는 값
원시타입	unll	값이 없다는 것을 의도적으로 명시할때 비워 둔 값재
객체타입	객체, 함수, 배열 등

• 변수는 하나의 값을 저장하기 위해 메모리 공간 자체이다.
  - 메모리 공간을 식별하기 위한 이름
  • 이름이 식별된 변수에 할당되는 것은 값이다.

var sum = 10 + 20
- 변수 이름은 sum
- 해당 변수에 10 + 20이 평가되어서 생성된 숫자 값 30이 할당된다.

리터럴(literal)

• 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법
  - 기호('', "", ., [], {}, //)

리터럴예시

문자열 리터럴	'Hello'
불리언 리터럴	true/ false
null 리터럴	null
undefined 리터럴	undefined
객체 리터럴	{name: 'lee', adress: 'seoul'}
배열 리터럴	[1, 2, 3]
함수 리터럴	function() {}
정규식 리터럴	/[A-Z]+/g

표현식

• 표현식은 값으로 평가될 수 있는 statement
• 표현식이 평가되면서 새로운 값을 생성하거나 기존 값을 참조한다.
• 리터럴은 그 자체로 표현식이다.
• var score = 100; - 100은 리터럴이다. 리터럴 100은 js엔진에 평가되어 값을 생성한다. var score = 50 + 50; - 50 + 50이 평가되어 숫자 100을 생성하므로 표현식이다.
• 표현식은 리터럴, 식별자, 연산자, 함수 호출 등의 조합으로 이뤄질 수 있다.
• 값으로 표현될 수 있는 문은 모두 표현식이다.
• //리터럴 표현식 10 'hello' //연산자 표현식 10 + 20 sum = 10 sum !== 10 //함수, 메서드 호출 표현식 square() person.getName()
• 값이 위치할 수 있는 자리에는 표현식도 위치할 수 있다.
• 1 + 2 = 3 - 1 + 2 는 3과 동치이다. 즉, 1 + 2 는 3과 같다. - 1 + 2는 평가되어 값 3을 생성하므로 표현식은 값처럼 사용할 수 있다.

문

• js에서 문(statement)와 표현식(expression)을 구별하고 해석할 수 있어야 한다.
• 문은 여러 토큰으로 구성된다.
  - 토큰 키워드: 식별자, 연산자, 리터럴, 세미콜론, 마침표 등의 특수기호는 문법적 의미를 가진다.
• var sum = 1 + 2 - 위 statement에서 쓰인 토큰 키워드: var, sum, =, 1, +, 2
• 문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위이고 명령문이라 부른다.
• 선언문, 할당문, 조건문, 반복문 등으로 구분할 수 있다.
  변수 선언문 실행: 변수 선언 > 할당 문 실행 > 값 할당
• // 변수 선언문 var sum const result let arr // 할당문 x = 5; // 함수 선언문 function foo(){} // 조건문 if(x > 10){ console.log(x) } // 반복문 for(let i = 0; i < 10; i++) { console.log(i) }

표현식과 표현식이 아닌 문

• 표현식은 문의 일부일 수도 있고 그 자체로 문이 될 수도 있다.
• 변수에 할당해 보면 구별할 수 있다.
  • 변수 선언문은 값으로 평가될 수 없기에 표현식이 아닌 문이다.

  x = 100;

  • 할당문은 그 자체가 표현식이지만 완전한 문이기도 하다.
  • 할당문은 표현식인 문이기에 값처럼 사용할 수 있다.

  x = 1 + 2

  • x = 1 + 2는 표현식이면서 완전한 문이기도 하다.
  • 1, 2, 1 + 2, x = 1 + 2는 모두 표현식이다.
• var x;

---

6장 데이터 타입

• 데이터 타입 Data Type 은 값의 종류를 말한다.
• 자바스크립트는 7개의 타입을 가지며(ES6 기준), 원시 타입(Primitive Type)과 객체 타입(object, Reference Type)으로 구분된다.

숫자타입

• 자바스크립트는 하나의 숫자 타입만 존재한다. 모든 수를 실수로 처리하며 정수만 표현하기 위한 데이터타입이 별도로 존재하지 않는다.
• 이는 정수로 표시된다 해도 사실은 실수라는 것을 의미한다.

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

- 모두 숫자 타입
var integer = 10 //정수
var double = 10.12 //실수
var negative = -20 //음의 정수

문자열 타입

• javascript에서 문자열은 원시 타입이며, 변경 불가능한 값이다.
• 문자열은 유니코드 문자 utf-16의 집합으로 전 세계 대부분 문자를 표현할 수 있다.
• 키워드나 식별자 같은 토큰을 구분하기 위해서 작은따옴표, 큰 따옴표, 백틱으로 텍스트를 감싼다.

템플릿 리터럴

• 백틱을 통해 표현한다.

1) 멀티라인 문자열

• 일반 문자열 내에서는 개행이 허용되지 않는데, 줄바꿈 등 공백을 표현하려면 백슬래시로 시작하는 이스케이프 시퀀스를 사용해야 한다.
• 템플릿 리터럴 내에서는 이스케이프 시퀀스를 사용하지 않고도 줄바꿈이 허용되며 공백도 있는 그대로 적용된다.

[excape sequence]
var template = '<ul>\n\t<li><a href="#">Home</a></li>\n</ul>';


[template literal]
var literal = `<ul>
  <li><a href="#">Home</a></li>
<ul>`


[출력결과]
<ul>
  <li><a href="#">Home</a></li>
<ul>

2) 표현식 삽입

• 표현식 삽입을 통해 간단히 문자열을 삽입할 수 있다.
• 표현식을 삽입하려면 ${}으로 표현식을 감싼다. => 표현식 결과가 문자열이 아니더라도 문자열로 타입이 강제로 변환되서 삽입된다.

console.log(`1 + 2 = ${1 + 2}`) // 1 + 2 = 3

Undefined 타입

• var키워드로 선언한 변수는 암묵적으로 undefined로 초기화한다.
• 메모리 공간의 할당이 이뤄질 때까지 js엔진이 undefined로 초기화한다.

var foo;
console.log(foo); //undefined
- 변수의 값을 할당하지 않은 변수를 참조하면 undefined가 반환

null 타입

• 변수에 값이 없다는 것을 의도적으로 명시하고 싶을 때
• 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미이다.

var foo = 'lee'
foo = null;

// 이전 참조를 제거해서 더이상 lee를 참조하지 않는다.
// 변수의 스코프를 좁게 만들어 변수 자체를 재빨리 소멸시키는 편이 낫다.

심벌 타입

• 유일무이한 값으로 주로 이름이 충돌할 위험이 없는 객체의 유일 프로퍼티 키를 만들기 위해 사용한다.
• symbol함수를 호출해 생성한다.
  - 생성된 심벌값은 외부에 노출되지 않는다.
  • 다른 값과 절대 중복되지 않는 유일무이한 값이다.

객체 타입

• 자바스크립트는 객체 기반의 언어이며, 자바스크립트를 이루고 있는 거의 모든 것이 객체이다.
• 원시 타입 값은 immutable value / 변경 불가능한 값이고 객체(참조) 타입의 값은 mutable value/ 변경 가능한 값이다.
• 객체를 변수에 할당하면 변수에는 참조 값이 저장된다.

데이터 타입의 필요성

확보해야 할 메모리 공간의 크기를 결정해주기 위해 데이터 타입이 필요하다.

• 값은 메모리에 저장하고 참조할 수 있어야 한다.
  • 값을 저장할 때 확보해야 하는 메모리 공간의 크기를 결정하기 위해
  • 값을 참조할 때 한번에 읽어 들여야 할 메모리 공간 크기를 결정하기 위해
  • 메모리에 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해

---

10장 객체 리터럴

객체란?

• 객체는 메소드와 데이터의 묶음이다. key와 value로 구성된다.
• 프로퍼티의 개수가 정해져 있지 않고(0개 이상) 동적으로 추가/삭제할 수 있다.
• 프로퍼티 값이 함수일 경우, 메서드라 부른다.

js에서 객체의 인스턴스란?

객체 리터럴에 의한 객체 생성

• 객체 리터럴에 프로퍼티를 포함시켜 객체를 생성함과 동시에 프로퍼티를 만들 수 있고, 동적으로 추가할 수도 있다.
• 객체 리터럴
  Object 생성자 함수
  생성자 함수
  Object.create 메서드
  클래스(ES6)
• 객체를 생성하기 위해 클래스를 정의하거나 객체 호출에 new 연산자를 사용할 필요가 없다.
• 객체 리터럴은 중괄호({...})내에 0개 이상의 프로퍼티를 정의한다.
• 객체 리터럴의 중괄호는 코드 블록을 의미하지 않는다.

프로퍼티

• 객체는 프로퍼티의 집합이며, 프로퍼티는 key, value로 구성된다.
  - 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용한다.

  var person = {
  	firstName = 'ung-mo',
      las-name = 'lee' //synataxError

• 문자열 또는 문자열로 평가할 수 있는 표현식을 사용해 프로퍼티 키를 동적으로 생성할 수도 있다.
  • 프로퍼티 키로 사용할 표현식을 대괄호로 묶어야 한다.
  • var obj = {}; var key = 'hello' [ES5] obj[key] = 'world' [ES6] var obj= { [Key]: 'world' } console.log(obj) //hello world

메서드

• 프로퍼티 값이 함수일 경우, 일반 함수와 비교하기 위해 메서드라 부른다.

var circle = {
    radius: 5, // 프로퍼티
    getDiameter: function(){ //메서드
        return 2 * this.radius //this는 circle을 가리킨다.
    }
}

//메서드로서 사용 - 객체에 대해서 실행할 때
circle.getDiameter() //10

//함수로 넘겨질때
const a = cb => cb() //ab콜백함수
a(circle.getDiameter) //NaN

this가 없기때문에 NaN이다.
this가 전역으로 잡히기 때문

프로퍼티 접근

• 마침표 접근법 (.)
• 대괄호 접근법 ([ ])

[정답 유추해보기]
var person = {
    'last-name': 'lee',
    1: 10
}

person.'last-name'
person.last-name
parson[last-name]
parson['last-name']


person.1 
person.'1' 
person[1]
person.['1']

• js에서 사용 가능한 유효한 이름이 아닐경우: 반드시 대괄호 표기법
• 단 키가 숫자로 이뤄진 문자열인 경우 따옴표를 생략할 수 있음.
• 그 외의 경우 대괄호 내에 들어가는 프로퍼티는 반드시 따옴표로 감싼 문자열

프로퍼티 갱신, 생성, 삭제

var person = {
    naem: 'lee'
}

person.name = "kim"
person.age = 20
delete person.age

console.log(person)

• delete연산자는 프로퍼티에 값에 접근할 수 있는 표현식이어야 한다.

인스턴스

• 클래스나 프로토타입을 사용하여 만들어 낸 것이 인스턴스
  - 클래스: 객체를 만드는 틀
• 생성자 함수(Constructor)로 생성된 객체를 인스턴스
• 오브젝트를 사용하여 오브젝트를 생성하면 반환된 오브젝트가 인스턴스(instance)

function Object() {
	this.name = 'Kim'
};
var obj1 = new Object();
obj1.name = 'Choi';
console.log(obj.name); // Choi

var obj2 = new Object();
console.log(obj2.name); // Kim

object에 name 프로퍼티에 'Kim'이란 값을 설정하면 new키워드를 통해서 obj1, obj2 식별자에 새로운 모든 인스턴스는 'Kim'이란 같은 값을 갖게 된다.

name 프로퍼티의 값을 바꿨다고해서 원본 오브젝트의 name프로퍼티의 값이 바뀌는 것은 아니다. 이처럼 인스턴스마다 다른값을 유지,제어하기위해서 인스턴스를 생성하는 것이다.

문자열과 불변성

var str2 = 'hello'
console.dir(String) f String()

const tempStr2 = new String(Str2) //인스턴스생성
tempStr2.slice(2, 3) //'l' //인스턴스에 메서드 적용 -> 결과얻고 폐기됨

str2.slice(2, 3) // 'l'

//인스턴스 일때 / 객체임
var str2 = 'hello'

new String(str2)
String{"hello"} //객체임

const str = { 0: 'h', 1: 'e', 2: 'l' ...} 

• lenght는 있지만, prototype이 배열메서드가 아닌 string메서드만 있다.

[유사배열객체]

• 배열처럼 인덱스 프로퍼티 값에 접근할 수 있다.
• lenght프로퍼티를 갖는 객체이다.
• for문으로 순회할 수 있다.

---

11장 함수

• 함수의 매개변수를 통해 다른 함수의 내부에 전달되는 함수를 콜백함수라고 한다.
• 매개변수를 통해 함수의 외부에서 콜백함수를 전달받은 함수를 고차함수
  라고 한다.

콜백함수

• 함수의 변하지 않는 공통 로직은 만들어 미리 정의해 놓고 변경되는 로직은 추상화해서 외부함수에서 내부함수로 전달하는 것이다.
• 콜백 함수는 중첩함수와 다르게 자유롭게 교체할 수 있다.
• 고차함수에 의해 호출되며, 고차함수는 필요에 따라 콜백 함수 인수를 전달할 수 있다.
• 콜백 함수를 전달할 때 콜백 함수를 호출하지 않고 함수 자체를 전달해야한다.

function repeat(n, f){
    for(let i = 0; i < n; i++){
        f(i) //i를 전달하면서 f를 호출
    }
}

const logAll = function(i){
    console.log('i:', i)
} 

repeat(5, logAll)

• 변경되는 일을 f 함수로 추상화했고 이를 외부에서 전달받는다.

순수함수

• 순수함수: 외부 상태에 의존하지도 않고 변경하지도 않는, 즉 부수 효과가 없는 함수.
• 비순수 함수: 외부 상태에 의존하거나 외부 상태를 변경하는, 즉 부수 효과가 있는 함수.

17장 생성자 함수

• new 연산자와 함께 object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다.
• 빈 객체 생성 후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있다.
• 생성자 함수: new연산자와 함께 호출하여 객체를 생성하는 함수
• 인스턴스(instance): 생성자 함수에 의해 생성된 객체

• new키워드 생성자 함수방식 외 빈 객체 생성

const person1 = new Object();
const person2 = {}
//같음

• 빌트인객체?
  - 생성자 함수인 표준 빌트인 객체는 정적 메서드와 프로토타입 메서드를 모두 제공하고, 생성자 함수가 아닌 표준 빌트인 객체는 정적 메서드만 제공한다.

생성자 함수에 의한 객체 생성 방식의 장점

• 💢 객체 리터럴의 경우: 메서드가 동일할 경우 객체 리터럴에 의해 객체를 생성하는 경우 프로퍼티 구조가 동일함에도 불구하고 매번 같은 프로퍼티와 메서드를 기술해야한다.
• 인스턴스를 생성하기 위한 템플릿처럼 생성자 함수를 사용하여 프로퍼티 구조가 동일한 여러개의 객체를 간편하게 생성할 수 있다.

생성자 함수의 인스턴스 생성 과정

function Circle(radius) {
  //this = {}
  // 1. 암묵적으로 인스턴스가 생성되고 this에 바인딩된다.

  // 2. this에 바인딩되어 있는 인스턴스를 초기화한다.
  this.radius = radius;
  this.getDiameter = function () {
    return 2 * this.radius;
  };

  // 3. 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환된다
  // 명시적으로 객체를 반환하면 암묵적인 this 반환이 무시된다.
  //return {}
}

// 인스턴스 생성. Circle 생성자 함수는 암묵적으로 this를 반환한다.
const circle = new Circle(1);
console.log(circle); // Circle {radius: 1, getDiameter: ƒ}

• 인스턴스 생성과 this 바인딩 : 암묵적으로 빈 객체가 생성된다. 이 빈 객체가 바로 (아직 완성되지 않았지만) 생성자 함수가 생성한 인스턴스다. 그리고 암묵적으로 생성된 빈 객체, 즉 인스턴스는 this에 바인딩된다. 생성자 함수 내부의 this가 생성자 함수가 생성할 인스턴스를 가리키는 이유가 바로 이것이다. 이 처리는 함수 몸체의 코드가 한 줄씩 실행되는 런타임 이전에 실행된다.
  (* 바인딩 : 식별자와 값을 연결하는 과정)
• 인스턴스 초기화 : 생성자 함수에 기술되어 있는 코드가 한 줄씩 실행되어 this에 바인딩되어 있는 인스턴스를 초기화한다. 즉, this에 바인딩되어 있는 인스턴스에 프로퍼티나 메서드를 추가하고 생성자 함수가 인수로 전달받은 초기값을 인스턴스 프로퍼티에 할당하여 초기화하거나 고정값을 할당한다.
• 인스턴스 반환 : 생성자 함수 내부의 모든 처리가 끝나면 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환된다. 만약 this가 아닌 다른 객체를 명시적으로 반환하면 this가 반환되지 못하고 return문에 명시한 객체가 반환된다. 하지만 명시적으로 원시 값을 반환하면 원시 값 반환은 무시되고 암묵적으로 this가 반환된다. 이처럼 💥생성자 함수 내부에서 명시적으로 this가 아닌 다른 값을 반환하는 것은 생성자 함수의 기본 동작을 훼손하기 때문에 생성자 함수 내부에서 return문을 반드시 생략해야 한다. 💥
• 생성자 함수용도로 사용 시 생성자 함수만 쓰고 리턴문이 필요하면 다른 함수 사용