자바스크립트는 왜 그 모양일까? 1장 ~ 7장

{ " number " : 1 , " chapter " : " 이름 " }

- 자바스크립트의 모든 이름은 반드시 소문자로 시작해야 한다.

    ㆍJS의 new 연산자 문제

    ㆍ함수 호출문이 new로 시작하면 해당 함수는 생성자로서 호출되고 그렇지 않으면 함수로서 호출

     → 모든 생성자 함수의 이름은 대문자로 시작되어야 하며 그렇지 않은 모든 경우에는 소문자로 시작

- 예약어는 이름 사용 X

---

{ " number " : 2 , " chapter " : " 숫자 " }

숫자리터럴

- NaN은 숫자가 아닌 숫자를 나타내는 특별한 값

- NaN은 문자열을 숫자로 반환하려고 했으나 실패했을 때 결과 값으로 반환될 수 있다

- 반환에 실패한 경우 오류가 발생하거나 프로그램이 멈추는 대신 NaN이 반환된다.

- NaN과 NaN을 동등 연산자로 비교해보면, 서로 다른 결과를 보인다

- 값이 NaN인지 아닌지 테스트하려면, Number.isNaN( value ) 사용

 

Number

- 숫자를 만드는 함수

const good_example = Number("432");
const bad_example = new Number("432");
typeof good_example						// "number"
typeof bad_example						// "object"
good_example === bad_example					// false

 

연산자

전위 연산자

    ㆍ+ : 숫자로 변환 , 변환에 실패하면 NaN으로 만든다.

    ㆍ- : 부호 변환

    ㆍtypeof : 타입확인하기

 

중위 연산자

    ㆍ+ , - , * , / , % , **

 

비트 단위 연산자

단항 비트 단위 연산자

    ㆍ~ : not  연산자

이항 비트 단위 연산자

    ㆍ& : 비트 단위 and 연산자

    ㆍ| : 비트 단위 or 연산자

    ㆍ^ : 비트 단위 exclusive or ( xor ) dustkswk

    ㆍ<< : 왼쪽 시프트

    ㆍ>>> : 오른쪽 시프트

    ㆍ>> : 부호 확장 오른쪽 시프트

 

Math 객체

Math.floor(-2.5)	// -3, 더 작은 정수
Math.trunc(-2.5)	// -2, 0에 가까운 정수

Math.random()		// 0과 1 사이의 임의 수를 반환

---

{ " number " : 3 , " chapter " : " 큰 정수 " }

* 술어 함수 ( predicate function ) : 그 반환 값이 불( boolean ) 값, 즉 참 또는 거짓인 함수를 뜻한다.

- 비트와 숫자관련된 모듈들을 만듬... → 4장 ~ 5장에서 모듈 사용 →  나중에 시간날 때 볼 것! 

---

{ " number " : 6 , " chapter " : " 불(boolean) 타입 " }

관계 연산자

    ㆍ === : 같음

    ㆍ !== : 같지 않음

    ㆍ < : 보다작음 / <= : 보다 작거나 같음

    ㆍ > : 보다 큼 / >= : 보다 크거나 같음

 

- ===와 !==는 양쪽 피연산자가 NaN인 경우를 제외하면 기대한 대로 동작한다

- 반복문의 종료 조건을 검사하기 위해 === 연산자를 사용하고 싶다면, 종료 조건을 나타내는 변수 값이 안전한 정수 범위안에 있을 경우에만 사용하세요.

- 안전한 범위 안이라도 해도, ===보다는 >= 연산자가 더 안전합니다.

- <, <=, > , >= 역시 양쪽 피연산자가 둘 다 문자열이거나 둘 다 숫자이면 제대로 동작한다.

- 비교 연산을 할 때 자료형을 섞어서 써서는 안된다.

- 자바스크립트에서 ==와 !=은 절대 사용하지 않길 권장한다

    ㆍ이 연산자들은 비교 연산을 하기 전에 강제로 형변환을 하기 때문에,

                                   거짓 양성 ( false positives )과 거짓 음성 ( false negatives ) 이 발생할 수도 있다

 

불인 척하기

- 거짓이라고 볼 수 있는 값

    ㆍfalse

    ㆍnull

    ㆍundefined

    ㆍ0

    ㆍNaN

 

- 자바스크립트는 그럴듯한 불 자료형을 가지고 있지만, 이런 '불인 척하는 값'들을 허용하는 바람에 의미가 퇴색됨.

- 조건문에는 꼭 불 값을 써라!

 

논리 연산자

    ㆍ!      : 논리not

    ㆍ&&  : 논리 and

    ㆍ||     : 논리 or

// 단순화된 표현
!(a === b) === (a !== b)
!(a <= b) === (a > b)
!(a > b) === (a <= b)
!(a >= b) === (a < b)

// 드모르간 법칙 ( De Morgan Laws )
!(p && q) === !p || !q
!(p || q) === !p && !q

---

{ " number " : 7 , " chapter " : " 배열 " }

- 자바스크립트의 배열은 진짜 객체입니다.

- 하지만 오늘날 자바스크립트의 배열은 네 가지면에서 객체와 살짝 다릅니다

1. 배열은 마술 같은 length 속성을 가지고 있다.

    ㆍ배열의 length속성은 배열이 담고 있는 요소의 개수를 의미하지 않고

                                                               그 대신 가장 큰 색인보다 1 큰 값을 나타낸다.

2. 배열은 Object.prototype 보다 훨씬 더 좋은 메서드들을 가지고 있는 Array.prototype 을 상속한다

3. 배열은 객체 리터럴이 아닌 배열 리터럴을 사용해 만들어진다.

    ㆍ[ , , ] 

4. JSON은 배열과 객체를 다르게 취급하는 반면, 자바스크립트는 둘을 비슷하게 처리한다

// 배열타입 확인 방법
const what_is_it = new Array(1000);
typeof what_is_it					// "object"
Array.isArray(what_is_it)				// true

 

배열의 원점

- 최근에는 배열 요소를 한 번에 하나씩 처리하기보다, 배열을 좀 더 함수처럼 처리해야 한다는 생각이 더 지배적이다

- 이렇게 해야 명시적인 반복문 처리가 없어져서 코드가 단순해지고, 멀티프로세서에 작업을 분산해서 처리할 수 있는 능력이 생깁니다.

 

초기화

- 두 가지 방법으로 새로운 배열을 만들 수 있다

    ㆍ배열 리터럴

    ㆍnew Array(정수)

let my_little_array = new Array(10).fill(0);
let same_thing = [0,0,0,0,0,0,0,0,0,0];

my_little_array === same_thing			// false

- 배열은 실제로 같은 배열인 경우에만 같다고 본다.

 

스택과 큐

- 배열은 배열을 스택처럼 쓸 수 있게 만드는 메서드들을 가지고 있습니다.

    ㆍpop : 배열의 가장 마지막 요소를 배열에서 제거하고 반환

    ㆍpush : 새로운 요소를 배열 끝에 추가

    ㆍshift : 배열의 마지막 요소 대신 0번째 요소를 제거하고 반환

    ㆍunshift : 배열의 가장 앞에 새로운 요소 추가

- shift와 unshift 메서드는 pop과 push에 비해 많이 느린데, 배열이 크면 특히 심하다.

- shift와 push를 써서 배열의 가장 뒤에 새로운 아이템을 추가하고 가장 앞에서 아이템을 꺼내 쓰는 큐를 구현할 수 있다.

 

검색

- 자바스크립트는 배열에서 원하는 값을 찾을 때 사용할 수 있는 메서드를 몇 가지 제공

    ㆍindexOf : 인자로 전달받은 값을 배열의 0번째 요소 부터 비교하면서 찾는다.

                       일치하는 값을 가지는 배열의 요소를 찾으면 검색 중단 해당요소 반환

                       찾는 값이 없으면 -1을 반환

    ㆍlastIndexOf : 배열의 앞이 아닌 뒤쪽부터 검색한다. 

                             찾는 값이 없으면 -1을 반환

    ㆍincludes : 값이 있으면 true, 없으면 false를 반환

 

축약

- reduce : 배열을 하나의 값으로 축약한다. 두 개의 메개변수를 받는 함수를 인자로 전달받는다. 

                배열의 요소가 하나의 값이 될 때까지 전달받은 함수에 두 인자를 전달하여 계속 호출

 

- 전달한 함수를 배열의 모든 요소에 대해 호출하도록 하는 것

    ㆍ이 경우 제대로 동작하기 위해서는 초기 값이 반드시 지정되어야 한다.

function add(reduction, element) {
    return reduction + element;
}

let my_little_array = [3, 5, 7, 11];
let total = my_little_array.reduce(add, 0);

// ( 0, 3 )
// ( 3, 5 )
// ( 8, 7 )
// ( 15, 11 )
// 26

 

 

- reduce메서드가 두가지 방법으로 동작할 수 있다는 것이다.

    ㆍ초기 축약 값을 전달하면 전달한 함수는 배열의 모든 요소마다 호출된다

    ㆍ초기 축약 값을 전달하지 않으면 0번쨰 배열요소가 초기 축약 값으로 사용

- reduceRight : 배열의 끝에서 시작하는 reduce

- reduce에 들어가는 함수의 3번째 인자는 index번호이다.

 

반복

- forEach

    ㆍ함수를 인자로 받는다.

    ㆍ배열의 모든 요소에 대해 전달된 함수를 호출한다

    ㆍ함수는 element, element_nr, array를 전달 받는다

              - element : 현재처리하고 있는 배열 요소

              - element_nr : 해당 요소의 색인 값, 함께 처리해야하는 다른 배열이 있을 경우 유용

              - array : 실수배열, 절대 거기에 있어서는 안 되는 것

    ㆍ호출한 함수의 반환 값을 무시한다.

- every

    ㆍ반환값을 처리

    ㆍ반환값이 false이거나 false로 처리할 수 있는 값이면 처리를 멈추고 false 반환

    ㆍ반환값이 true 혹은 true로 처리할 수 있는 값이면 배열에 대한 처리를 계속 진행

    ㆍ배열의 끝에 도달하면 true 반환

- some

    ㆍ저자가 사실 왜 있는지 잘 모르겠데...

    ㆍ반환값이 true이거나 true같은 값이면 처리를 중단하고 true 를 반환

    ㆍ반대로 false이거나 false 같은 값이면  처리를 계속 진행

    ㆍ배열의 끝에 도달하면 false 반환

- find

    ㆍsome처럼 동작하지만, true나 false를 반환하지 않고 처리 중인 배열 요소의 값을 반환

- findIndex

    ㆍfind 메서드와 같지만, 배열 요소의 값 대신 배열 요소의 색인을 반환

- filter

    ㆍfind 메서드와 같지만, 항상 배열의 끝까지 처리하며 반환값이 true인 배열 요소의 목록을 배열로 반환

    ㆍ즉, find는 일치하는 처음 값을 반환하고, filter는 일치하는 모든 값을 반환

- map

    ㆍforEach 메서드와 비슷하지만, 인자로 전달된 함수의 모든 반환 값을 모아서 새로운 배열로 반환

    ㆍmap 메서드는 원래 배열을 개선하거나 확장하는 방식으로 변환해서 새로운 배열을 만드는 이상적인 메서드

 

- 이 메서드들은 for 반복문 대신 배열을 처리할 때 쓸 수 있는 아주 좋은 메서드들이다.

- 하지만 일부는 불완전하다.

- forEach나 find는 배열의 끝에 도달하기 전에 종료

- map, reduce, filter 는 배열의 끝에 도달하기 전에는 종료할 수 없다.

- reduceRight 처럼 배열을 반대 방향으로 처리할 수 있는 방법이 없다 → for문 사용할 것!

 

정렬

- 자바스크립트의 sort 메서드에는 몇 가지 문제가 있다

    ㆍsort 메서드는 추가 메모리 공간을 사용하지 않고 배열 자체를 수정한다.

    ㆍ그래서 동결된 배열은 정렬할 수가 없다.

    ㆍ그리고 공유 중인 배열을 정렬하는 것은 위험하다

    ㆍ기본으로 사용하는 비교 함수는 값을 문자열로 간주해서 정렬한다. 

                                                                        심지어 값이 숫자라도 문자열처럼 정렬한다.

    ㆍ안전성이 부족하다

 

그 외의 내용

- concat

    ㆍ두개 이상의 배열을 연결해서 새로운 배열로 만든다.

let part_zero = ["unicorns", "rainbows"]
let part_wun = ["butterflies", "monsters"]
let whole = part_zero.concat(part_wun)
// whole is ["unicorns", "rainbows", "butterflies", "monsters"]

- join

    ㆍ문자열 배열과 구분자를 인자로 받는다.

    ㆍ그리고 이들을 합쳐서 하나의 큰 문자열을 만든다.

    ㆍ구분자가 필요 없다면 빈 문자열을 전달한다.

    ㆍsplit 메서드의 반대라고 생각하면 된다.

let string = whole.join(" & ")
// string is "unicorns & rainbows & butterflies & monsters"

- reverse

    ㆍ배열의 요소들을 반대 방향으로 뒤집는다.

    ㆍsoft 함수처럼 이 메서드도 파괴적이라서 배열 자체를 바꿉니다.

whole.reverse()
// whole is ["monsters,"butterflies","rainbows","unicorns"]

- slice

    ㆍ배열 전체를 복사하거나 배열 일부를 복사할 수 있다.

    ㆍ0번째 매개변수는 복사를 시작할 색인 값을 뜻한다.

    ㆍ1번째 매개변수 값은 0번째 매개변수 값에 복사할 요소의 숫자를 더한 값

    ㆍ1번째 매개변수를 생략하면 나머지 요소 전체를 복사

let element_nr = whole.indexOf("butterflies");
let good_parts;
if(element_nr !== -1) {
    good_parts = whole.slice(element_nr);
}

// good_parts is ["butterflies", "rainbows", "unicorns"]

 

순수함, 그리고 순수하지 않음

- 순수 함수(pure function) : 배열 메서드의 일부는 입력을 바꾸지 않는 함수

    ㆍconcat, every, filter, find, findIndex, forEach, indexOf, join, lastIndexOf, map, reduce, reduceRight, slice, some

- 비순수 함수(impure function)

    ㆍfill, pop, push, shift, splice, unshift

- 순수 함수여야 했던 비순수 함수

    ㆍreverse, sort