[JS] 리터럴, 자료형, 반복문
JS에서 숫자 타입은 Number인데, 이건 소수점 타입이다.
- https://developer.mozilla.org/en-US/docs/Glossary/Number
- Int 같은 정수형 타입은 따로 없고...
- 그래서 정확한 수를 받아올 때는 String으로 해야함.
- axios 등으로 받아올 때, 자동으로 Number로 타입추론 들어가면서 숫자가 변경되는 경우 있을 수 있음.
- 이런 문제는 서버 사이드에서 JSON encode 해서 내려주는게 맞음.
``js parseInt()``를 사용할 때는 항상 기수를 지정해 주는 것이 좋다.
``js parseInt("08")``로 쓰면 8진수로 인식해 결과가 ``0``이다.
명시적 형변환은 ``js String()``, ``js Number()``를 사용하는데, 이보다는 ``js parseInt(string), parseFloat(string)`` 이를 사용하는게 좋다. 16진수 등도 인식한다.
자료형
- 어떤 수를 0으로 나눠도 문제가 발생하지 않는다.
- JS는 ``js null, undefined, NaN, 빈 문자열 '', 0, false``를 ``js false``로 본다.
* 이 외의 값은 모두 참이다. - NaN은 자기 자신을 포함해서 어떤 값과도 같지 않다.
그래서 NaN인지 확인하려면 반드시 ``js isNaN()``을 사용해야한다. - 항상 ``js ===``나 ``js !==``를 사용하는 편이 좋다.
이는 변수 값 비교 시 auto casting을 비활성화 해 타입을 엄격하게 검사한다.
``js NaN == false``는 ``js true``지만, ``js NaN === false``는 ``js false``다.
``js ==, !=``를 사용해야 하는 경우 ``js isFinite(), isNaN()``또는 ``js (foo), (!foo)``로 변경해서 작성한다.
문자열
``js str[0] = "b";`` 같은 코드는 동작하지 않는다.
템플릿 문자열
구조 분해 할당
배열
```js
var arr = ['a', 'b', 'c']; // 배열 리터럴
arr[3] = 'd';
arr.push('e'); //push pop은 index를 따로 구할 필요가 없어 편할 때가 있다.
arr.push('f');
arr.pop(); //a, b, c, d, e
arr.unshift('0'); //0, a, b, c, d, e 앞에 0 추가
arr.splice(2, 2); //0, a, d, e 삭제하면서 인덱스를 당긴다. 그래서 배열이 큰 경우 느릴 수 있다.
delete arr[2]; //0, a, , e 삭제하면서 인덱스를 당기지 않는다.
arr[5] = 'g'; //0, a, , e, , g index를 건너 뛰고 바로 [5]에 넣을 수 있다.
// arr.length == 6
// typeof arr == object
```
``js typeof``하면 ``object``로 알려주기 때문에 ``is_array()`` 함수를 만들어 보완할 수 있다.
배열 초기화
이렇게 하면 절대 안됨!
```js
const stars = new Array(30).fill(new Star());
// stars[0] == stars[1]이 된다. 같은 객체가 들어감.
```
``js new Array(30);``은 실제로 30개의 element를 가진 배열이 만들어지는게 아니라, length:30만 가지고 있는 객체가 만들어진다.
이걸 30개의 element를 가진 배열로 만드려면 spread ``js [...obj]`` 또는 ``js Array.fill()``을 사용한다.
그래서 그 다음에 map으로 초기화해주어야 의도한 대로 초기화 된다.
```js
const stars1 = Array(30).fill().map(() => new Star());
const stars2 = [...Array(30)].map(() => new Star());
```
가장 빠르고 좋은건 from을 쓰는 것이다.
```js
let sampleData = Array.from({length: 10}, (_, id) => ({id}))
is_array()
```js
var is_array = function (value) {
return value &&
typeof value === 'object' &&
typeof value.length === 'number' &&
typeof value.splice === 'function' &&
!(value.propertyIsEnumerable('length'));
}
```
sort(비교함수)
반복문
forEach
for in
- ``js for in``은 프로토타입 체인의 속성을 포함한 객체의 모든 속성을 포함해 반복한다.
- 그래서 프로토타입 체인 탐색이 필요하지 않은 일반적인 반복에서는 ``js for in`` 사용을 피하고 그냥 함수형을 사용하는 것을 권장한다.
- 브라우저에 따라 Array의 index 순서가 아니라 Array에 추가된 순서로 반환되는 경우가 있어 순서가 꼬인다.
- 속도도 ``js for``보다 더 느리다.
``js for in``을 사용할 필요가 있을 때는 보통 ``js typeof``와 함께 사용하게 되는 경우.
굳이 ``js for in``을 사용해야 하는 경우 다음과 같이 ``js object.hasOwnProperty(variable)`` 메소드로 속성이 실제로 객체의 속성인지, 아니면 프로토타입 체인(prototype chain) 상에 있는 것인지를 확인하며 사용해야 한다.
for (key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(key, obj[key])
}
}
for of
- 프로토타입 체인 상에 있는 iterable이면 제외
for (key of Object.keys(obj)) {
console.log(key, obj[key])
}
'JS Stack > JS' 카테고리의 다른 글
| [JS] 함수 #2. Call pattern, 생성자 대안(함수형 패턴), 상속 (0) | 2017.05.31 |
|---|---|
| [JS] 함수 #1. 유효범위(scope), callback, 클로저(closure), 접근 제어 (0) | 2017.05.31 |
| [JS] 객체, 프로토타입, 기본 타입에 기능 추가 (0) | 2017.05.29 |
| [Regex] JS (0) | 2017.05.28 |
| [JS] TIP (0) | 2017.05.25 |