[11장. 원시 값과 객체의 비교]

</br>

✏️ 자바스크립트의 값


  자바스크립트에서 사용되는 값의 타입을 여러 개로 나누었었다.

이것들을 메모리와 소통하는 방식에 따라서 분류해보면 원시 타입과 참조 타입(객체 타입)으로 나눌 수 있다.

  1. 원시 타입의 값을 변수에 할당하면, 변수에는 실체 값이 저장되며 변경이 불가능하다.
  2. 참조 타입의 값을 변수에 할당하면, 변수에는 내용이 저장된 메모리 공간의 주소가 저장되며 참조된 내용은 변경이 가능하다.

자바스크립트에서 변수에 저장된 원시 타입의 값들은 변경이 불가능하다. 사실 개발자가 원시 타입이 저장된 변수에 값을 수정하면, 같은 메모리 주소에 있는 값을 변경하는 것이 아니라 다른 주소에 새로운 값으로 재할당하게 되는 것이다.

반면에 객체 타입의 값은 변수에 주소를 저장하며, 주소가 가리키고 있는 값이 변경 가능하다.

</br>

✏️ 바구니를 통째로 버리기


  메모리를 바구니에, 변수를 바구니에 지은 이름으로 생각해서 본다면.

  1. 원시 타입

바구니에 담긴 내용물은 변하지 않으며, 내용물을 바꾸고 싶으면 기존의 바구니를 버리고 새로운 바구니를 준비해서 새로운 내용물을 담고 같은 이름표를 붙이는 것이다.

  1. 참조 타입

참조 타입의 바구니에는 얼마나 많은 내용물이 들어있을지 모른다. 통째로 버렸다가 새로 만드는데에는 비용이 너무 많이 들기 때문에, 내용물을 바꿀 수 있도록 하자.

대체 왜 이런 복잡하고 값마다 다르고 말도안되는 방식으로 값을 변경할까?

</br>

✏️ 원시 타입 값의 불변성


  메모리에 저장되어 있는 메모리를 재할당 하지 않고, 수정이 가능하도록 한다면 다른 메모리 활동 중에 충돌이 발생하거나 예기치 않게 수정될 수가 있기 때문이다.

컴퓨터는 커다란 알고리즘이고 시스템이기 때문에, 컴퓨터와 소통하는 프로그래밍 언어들 또한 오류를 최소화하려고 한다.

</br>

✏️ 참조 타입 값의 가변성과 문제점


  참조 타입의 값도 원시 타입의 값과 같은 문제를 공유하지만, 재생성에 너무 많이 비용이 들기 때문에 단점을 감수하고 변경이 가능하도록 선택되었다.

그렇기 때문에 변경이 불가능한 원시 값이 변경가능 했을 때 발생할 문제를 참조 값에서 유사하게 관찰해볼 수 있다.

</br>

✏️ 배열의 얕은 복사와 값의 공유


  자바스크립트에서 배열은 참조 타입의 값이다.

그렇기 때문에 자바스크립트에서 배열을 복사하면 배열의 내용이 아니라, 배열의 내용을 가리키는 주소를 복사해서 붙여넣게된다.

이렇게해서 발생하게 되는 문제가 얕은 복사에 의한 값의 공유이다.

1
2
var arr = [1, 2, 3];
var copiedArr = arr;

이와 같이 배열을 선언했다고 하자.

arr는 [1, 2, 3]이라는 배열을, copiedArr는 arr의 [1, 2, 3]이라는 내용을 복사한 것만 같지만.

사실 arr는 [1, 2, 3]이라는 배열을 가리키는 메모리 주소를 저장하고 있었으며, copiedArr에 복사하는 과정에서 이 메모리 주소를 복사한 것이 된다.

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

그렇기 때문에, 복사된 배열의 값을 변경하면 기존 배열의 값 또한 변경되는 것이다.

이렇듯 주소로 배열을 복사하는 것을 얕은 복사라고 하며, 값이 공유되는 현상이 나타난다.

</br>

✏️ 모든 문제를 해결해주는 해결책은 없다.


  이런 단점이 있음에도 불구하고 값의 변경을 허용한 이유는 결국 효율성 때문이다. 객체의 특성상 메모리 주소가 어디까지 사용될지도, 얼마나 많은 내용을 담고 있는지도 모르기 때문에 원시 타입의 값과 같이 매번 재생성하고 재할당하는 것이 더 비효율적이다.

모든 문제를 해결해주는 해결책은 없다. 해결할 문제가 무엇인지, 각각의 문제 중 어떤 것에 집중하고 리스크를 안아야하는지 선택할 뿐인 것 같다.


[10장. 객체 리터럴]

</br>

✏️ 추상화란?


  객체를 쓰기 전에, 추상화를 설명하지 않을 수가 없었다.

추상화는, 공통적인 속성이나 기능을 가지는 것을 묶어서 이름 붙이는 것이다.

이게 무슨 말인가. 우리는 추상화라는 단어를 처음 들어보지만 매일 추상화를 하며 살고 있으며, 삶에 추상화가 없으면 우리는 모두 불편한 설명충이 된다.

우리가 이라고 부르는 개념은 거주가능한 공간을 제공하며… 라는 등의 공통적인 기능과 속성을 가지는 어떤 개념들을 묶어서 설명하기 위해 이름 붙인 개념이다.

인간은 여러 복잡한 개념들을 효율적으로 설명하고 전달하는 의사소통의 수단으로 추상화를 선택했고, 이를 통해 놀랄만한 성장을 이뤄냈다.

그러니 이 추상화된 언어라는건 인류가 세상을 지배한만큼 오래되어서, 추상화라는 단어는 설명을 듣는 것조차 부담스러울만큼 추상화되어 익숙해진 것이다.

인간은 컴퓨터와 소통하고, 컴퓨터에 쓰여진 명령을 이해하는데에도 이런 추상화의 능력을 사용하고자 했다. 이것이 객체 지향 프로그래밍이라는 패러다임이며, 이를 위해 도입된 개념이 후의 설명될 객체이다.

✏️ 객체란?


  객체는 다른 객체와 구분되게, 상태나 동작을 공유할 수 있도록 개념을 묶어서 추상화한 것을 말한다.

다르게 말하자면, 물리적으로 존재하거나 추상적으로 생각할 수 있는 것 중에서 다른 것과 식별 가능한 것을 말한다.

사실 계속 공부하면서 느끼는 건, 객체는 딱 떨어지게 설명할 수 있는 것이라기보다는 개념에 가까운 것 같다.

‘이건 객체, 이건 객체가 아니야.’ 라고 구분할 수 있다기보다는 ‘이건 객체로 표현하는게 효율적일 수 있겠다.’ 라고 구분하는 것이 더 적당한 것을 객체로 표현한다.

추상화와 객체 자체가 효율적인 의사소통을 위해 만들어진, 합의된 개념이라 당연한 것 같기도 하다.

</br>

✏️ 프로퍼티와 메서드, 컴퓨터에서 객체를 사용하는 방법


  컴퓨터에서는 객체를 다루기 위해 프로퍼티메서드를 사용한다.

위의 설명을 축약하자면 추상화는 공통적인 속성이나 기능을 묶어서 이름 붙이는 것이며, 그렇게 묶여서 이름 붙은 것이 객체라는 것인데.

여기서 말하는 공통적인 속성의 상태를 프로퍼티라고 하며, 공통적인 기능을 메서드라고 한다.

객체의 프로퍼티와 메서드는 객체를 어떤 관점으로보고 어떤 기능과 속성을 공통적으로 보았는지에 따라서 달라지게 된다.

개발자가 제일 어려워하는건 변수명 짓기이다.

라는 말의 일부분에는 이런 맥락이 있다. 어디까지 추상화해야할지, 추상화한 내용을 어떻게 표현할지가 굉장히 어렵고 중요하다.

이렇듯 이러한 속성의 상태나 기능을 어떻게 묶어서 표현할지는 개발자의 능력에 달렸으며, 이런 부분을 보완하기 위해 디자인 패턴을 학습하게 된다.


[14장. 전역 변수의 문제점]

</br>

✏️ 오해를 줄이려면, 문맥이 구체적이어야한다.


  앞서 말했듯, 단어가 사용되는 범위가 넓으면 오해가 생기기 쉽다.

전역변수도 이와 같다. 전역변수는 전역변수의 네임스페이스를 오염시킬 수 있으며, 자바스크립트는 기본적으로 전체 스크립트가 전역 스코프를 공유하기 때문에 이로 인해 여러 문제가 발생할 수 있다.

또한, 전역변수는 생명주기가 길기 때문에 메모리 적인 부분으로도 비효율적이며 스코프 체인상 종점에 있기 때문에 검색 속도에서도 비효율적이다.

사용할 수 있다면, 최대한 지역 변수를 사용하는 것이 좋다.

</br>

✏️ 이외 전역변수의 단점을 보완하는 방법


 

  1. 즉시 실행 함수를 사용
  1. 네임스페이스 객체 사용
  1. 모듈 패턴
  1. ES6 모듈

[12장. 함수]

</br>

✏️ 일련의 과정을 반복할거라면, 묶어서 이름 붙여 씁시다.


  프로그래밍 언어에서 함수란 일련의 과정을 문으로 구현하고, 이걸 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것을 말한다.

</br>

✏️ 출근도 함수입니다.


  일상 생활의 예를 들어보자면 출근도 함수다.

출근이라는 행위는 여러 일련의 행위를 묶어서 반복하기 편하게 만든 함수다. 사람의 뇌도 컴퓨터 메모리와 별반 다르지 않다.

구체적인 행위로 기억하면 어렵기 때문에, 자연스레 묶어서 기억하게 된다.

사람이 컴퓨터보다 똑똑하고 값지다.

</br>

✏️ 자바스크립트에서는 함수도 객체다.


  자바스크립트에서는 함수는 객체 타입의 값이다.

뿐만 아니라, 변수에 할당하거나 프로퍼티 값이 되거나, 배열의 요소가 되거나 매개변수로 전달할 수도 있다.

</br>

✏️ 함수의 호이스팅


  var로 선언된 변수처럼, function으로 만들어진 함수도 호이스팅이 된다.

차이가 있다면, var의 경우 평가 단계에서 변수가 할당되지 않고 선언만 되기 때문에 호이스팅 되어도 undefined가 되지만 함수의 경우는 실행이 가능하다.

다만, 코드의 흐름이 비정상적이기 때문에 이런 코드 스타일을 장려되지 않는다고 한다.

</br>

✏️ 순수함수와 비순수함수


  자바스크립트는 멀티 패러다임 언어로서, 함수형 프로그래밍을 할 수 있다.

함수형 프로그래밍에서 중요한 것이 순수 함수인데, 이는 외부 상태를 변경하거나 의존하지 않고 매개변수에만 의존하는 함수를 말한다.

이러한 순수함수는 함수의 부수효과를 줄여주며, 버그의 발생시 원인파악을 용이하게 한다.


[07장. 연산자]

</br>

✏️ 연산자의 우선순위


  연산자의 우선순위를 헷갈리게 되면, 종종 코드를 짤 때 오류가 발생하게 된다. 코드의 연산자는 단순히 생각하는 사칙연산 뿐만 아니라 할당, 삼항 연산, 심지어 쉼표를 통한 구분까지 있다.

우선순위 내용
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 ,

</br>

✏️ 연산자의 결합 순서


  연산자에 따라서 왼쪽부터 읽히는 것도, 오른쪽부터 읽히는 것도 있다.

결합 순서 연산자
좌 -> 우 +, -, /, %, <, <=, >, >=, &&, ||, ., [], (), ??, ?, in, instanceof
우 -> 좌 ++, –, 할당 연산자(=, +=, -=, …), !x, +x, -x, ++x, –x, typeof, delete, ? … : … (삼항 연산자)