220814 실전 자바스크립트 1

 

고오맙다!

 - var의 문제점

var ->
1. 스코프를 가짐, 함수를 벗어나도 쓸수있다.
2. 정의하지 않아도 사용 가능. 단, 'use strict'=> 정의하지 않으면 사용 불가.
3. for(var i ...) 사용 시 for문 밖에서 쓰는 경우 마지막 i 로 값이 나옴. 
4. 즉시 실행 함수로 처리할 수 있지만(함수 안에서만 사용 가능) 번거롭
5. 위에서 정의하지 않아도 끌어올려진다 (hoisting)
console.log(v);
v = 2;
var v = '3';

6. 재정의 가능
var v = 1;
var v = 2;
7. 재할당 제한 기능 미지원

---

 - const와 let
var는 함수 스코프
const, let은 블록 스코프. 해당 블록 밖에서 에러난다. 바깥에서 흔히 불리는 지영이, 우리반의 지영이

2. 같은 블록 내에서 재정의 불가(하위 블록에서는 정의할 수 있지만, 가려진다)

(3. hosting이 가능하긴 하지만, 에러가 발생. ...안되는 거랑 무슨 차이인지는 확인이 필요.)

4. const, let은 재할당 불가 / 가능
=> 객체의 내부 속성값은 const도 변경할 수있다. 다만 새 객체의 재할당이 불가능한 것임.

---

 - 8가지 기본 타입
숫자
big int  => 123556789123556789123556789123556789n;  // <= 끝에 n이 붙는다.
문자열
boolean

object 타입 // {nm:123};
Symbol('abc') ; // 심볼타입. object 중 unique한 이름으로...
undefined; 할당된적없음
null;

* null 의 typeof는 버그가 있어서 object로 나온다.
* 참고로 class는 함수를 기반으로 만들어져 있으므로 type of {} 는 function이다.
 ( * 대신 Object.prototype.toString.call(대상)) 으로 자세히 수 있다 !) ex) ... call(null) => [object null] 

symbol?
const idSymbol = Symbol('id');
const obj = {id:123};
obj[idSymbol] = 456;
console.log(obj);// => {id:123, [idSymbol(id)]:456} 
이름이 겹치지 않게 사용가능.

boolean?
0이면 false, else true
''이면 false, else true

 * boolean 사용방법 중 하나.
ex) !!123 => true
! = NOT
!! => NOT의 NOT(강제로 boolean not 으로 형변환 후 다시 not. = 360도 회전)

new 키워드?
typeof new String(123)
typeof new Booleantrue)
=> 타입이 object으로 나온다. 굳이 new를 붙일 필요가 없음.


등호 === or ==?
되도록이면 ===를 쓴다. 왜냐면..

1. ===? 타입과 값검사
2. ==? 값검사. 
=> 타입을 변환하면서 값을 검사하는데, '==' 전용의 변환로직이 적용되면 복잡해지기 대문.
예를 들면 console.log(123 == true) 는 false가 나온다!

---

 - 숫자의 파싱

Number.parseInf('123.') => 123
Number.parseFloat(123.456) => 123.456

Number.parseInf('123abvc') => 123
Number.parseFloat(123abc) => 123

Number.parseInt('a') => NaN // Number.isNaN(...) 
const v = 1/0;
console.log(v) => Infinity;    v===Infinity? // true 

 * Number 는 무조건 64 bit 부동 소수점. 
구조상 연산 결과가 
 Number.MIN_SAFE_INTEGER <= x <= Number.MAX_SAFE_INTEGER
사이라면 오차가 없음을 보장한다.

Number.isSafeInteger(Number.MAX_SAFE_INTEGER + 1) // 사용하는 변수가 아닌 연산 값의 결과 범위라는 것을 유의
즉, 사용된 변수와 그 결과의 값을 검사해야 진정 정확함을 보장할 수 있다는 것.


* 2진법의 한계
0.1 + 0.2  === 0.3 ? false

* Number.EPSILON 를 사용해서 소수점 숫자를 비교하자!
let x =  0.1 + 0.2;
let result = Math.abs(0.3 - x) < Number.EPSILON ;

 * Math.random()
0<= x < 1

---

 - 자바스크립트의 문자열
'x'
"b"'

`y`  = 백틱, `name: ${x}  age ${a}` 으로 문자열 내 변수 가능.
문자열 내 개행 ? '', "" => \n 사용 `` 백틱? 문자열 내 그대로 (리터럴) 문자열로 사용된다.

* 문자열은 배열로 접근가능
const s1 = 'box';
console.log(s1[1]); => o

* 자바스크립트 문자열은 immutable하다!
1. s1[1] => 에러
2. const newString = s1.replace(from, to); // 문자열 변경 결과를 새로 "생성"하여 리턴.
변경은 불가(immutable)

* includes   ~=contains
* startsWith ~= indexOf('x") == 0

*substr
*indexOf
*lastIndexOf 뒤에서 부터 indexOf.
*slice?  잘라오기
*split? 분할  join 합치기
*padStart(길이,문자)  ~= lpad

* tagged template literals 문법?
function tF(strs, ...exp){
return 123;
}
const a = 10;
const b = 2;
const result = tF`a = ${a} , b = ${b}`; // 괄호 대신 백틱 `` 사용. 이 경우 'a = ', 'b = '가 strs로, a,b가 ...exp로 들어간다.
console.log({result});

strs.len + 1 === exp.len

---

 - 자바 스크립트의 논리 연산자 사용.
&&, ||
1. '', 0, NaN 이면 False 그 외 True

2. &&의 결과 값.
&&,||의 결과가 항상 boolean인것은 아니다. 마지막으로 "검사"한 값이 나온다.
const a = 123;
const  b = 'b';

const x = a && b; // a가 true이기 때문에 다음 검사. b도 true라서 결과가 true일것같지만 x 에는 b가 들어감;;;;;;
const y = a && 0 && b; // y는 a먼저 검사하고, 다음에 b가 false, 라서 검사 중단 후 0이 들어감;

||는 하나라도 true 라면 바로 리턴. (뒤의 조건 체크 x)
const z = a || 0|| b; // a만 검사해도 뒤의 조건을 검사할 필요가 없어 z는 a값이 드어감.

머이런게 다있어?
그러니 !!(조건)으로 사용해서 boolean을 처리하자...

3. &&의 활용
if(c) console.log('true') 를 c && console.log('true')
로 쓰는 경우없는 경우도 있나보다.

4. ||의 활용
const name = inputText || '이름을 입력하세요'
로 쓸 수 있다.


 * nullish coalescing?
const name = person.name === undefined || person.name === null ? 'unknown' : person.name;
~=
const name = person.name ?? 'unknown';

or 연산자와 비슷하지만, ''이나 0을 허용한다.
즉, ''도 validate하다면
const name = person.name ?? 'unknown';//  => name === ''
빈값을 허용하지 않으면
const name = person.name || 'unknown'; // => name === 'unknown'

---

 - 자바스크립트에서의 객체

1. 중괄호를 이용하여 생성
x = {}
2. new 키워드로 생성
x = new Object({})
3. Object.keys(x), Object.values(x), Object.entries(x)

4. for (const [k, v] of Object.entries(x)){  }

 * 속성의 삭제? delete
delete obj.city;
delete obj['city']

 - 자바스크립트에서의 배열
1. 대괄호로 생성
x = [  ]
2. new 키워드의 생성
x = new Array(  );

* 배열 타입은 Object다.

* forEach
* for (a of x)
* some. 하나라도 만족 시 true
* every 모두 만족 시 true;
* includes 포함시
* find(function(e))조건 만족시

* pop
* splice 삭제 및 추가 가능(arr.splice(1, 3, 40, 50, 60 , ) 1위치에서 3개를 삭제하고 40,50,60...를 끼워넣는다.

*정렬
arr.sort();
arr.sort(function(){return 숫자} // 0 이상이면 자리를 바꾸겠다.

---

객체의 배열 생성 활용

 - 단축 속성명 shorthand property names 
객체 리터럴 코드를 간편하게 작성할 수 있다!

const name = 'a';
const ob = {age:21, name, getName(){return this.name}};

1. ob 객체의 name은 객체지만 키:맵 형식으로 정의되지 않음. name:name
2. getName(){} 도 마찬가지.

* 단축 속성명의 활용
const name = '단축속성명'
const age = 73;
console.log(`name = ${name}, age = ${age}`)
=>
console.log({name, age}) 처럼 체크 가능.



 - 계산된 속성명 computed property names.
객체의 속성 명을 동적으로 결정할 수 있다!

function makeObj1 (k ,v){
const obj = {};
obj[k] = v;
return obj;
}
function makeObj2(k,v){
return {[key]:value};
}

 - 전개 연산자 "..."

"..." 을 쓰면객체 / 배열의 속성값을 주르륵 가져올 수 있다.
const num = [1,3,7,9];
Math.max(...numb); // => 20


const obj = {age:23, name:'mikee'};
const obj2 = {...obj}; // 객체가 복사됨.


const obj3 = {loc :'korean', age:99};
const obj4 = { ...obj, ...obj3} 으로 객체를 합칠 수 있다.
이 때, 속성명이 중복되는 경우 마지막의 값이 들어간다.

---

 - 비구조화 문법
객체나 배열의 속성값을 간단하게 꺼내 쓸 수 있다.

 - 배열 비구조화
const arr = [1,2];
const [a,b] = arr;

1. 재할당 가능하다
const arr = [1,2];
const [a,b] = arr;
[a,b] = arr; // 1. 새로 정의하지 않은 경우에도 가능.

2. default 값 사용 가능하다
const arr2 = ['x', undefined]
const [x = 10, y = 20, z = 30] = arr2;

3.  temp 쓰지 않고 값 치환
[x,y] = [y,x]

4. 속성값을 무시하기
const [a,   (공란으로 둔다) , c]  = [1,2,3]

5. 전개연산자와 같이 사용하기
const arr = [1, 2, 'a', 'b']
const [first,sec,  ...everyItem] = arr;
// 헷갈릴 수 있지만... 위의 ...eveyItem은 name을 전개하라는 것이 아니다.
// 첫,두번째 아이템은각각 first,sec가, 나머지 아이템은 eveyItem이 가져간다.

 - 객체의 비구조화
객체 속성을 변수에 받아오려고 할때 간편하게 받아올 수 있다. 
1. 사용하는 당시에 더 어울리는 구체적인 변수명으로 적용할 수 있다.
const obj = {age:21, name:'mike'}
const {age:nowAge, name} = obj;
console.log({nowAge,name});
// age:nowAge는 nowAge 변수를 생성하면서 obj.age를 할당하는 의미이다.
// age라는 변수는 만들어지지 않는것에 유의.
// name 에는단축 속성명 처럼 사용되었다.

2. 기본값을 사용할 수 있다. 함수 호출도 가능하다.
const {age = defAge(), name) = obj;
// defAge 는 사용될때만 호출됨.

3. 중첩된 객체도 받아올 수 있다.
4. 기본값은 객체가 들어갈 수 있다.
5. 비구조화 대상은 변수뿐만 아니라 객체의 속성값이 들어가도 된다.

---

optional chaining;

const person = null;
const name = person && person.name;
으로 사용가능하기도 하지만, 

옵셔널 체이닝을 쓴다면
const name = person === null || person === undefined ? undefined : person.name
 ==
const name = person?.name; // null이면 undefined가 들어감.


* 일급객체인 함수도 객체이므로 사용이 가능하다.
function delegate(fun){
return someones_fun?.();
}


* 객체에서 속성값을 동적으로 받기
const prop = '속성명'
const name = person.mother?.[prop];    // mother의 옵셔널이 undefined ...?