멋사 부트캠프 프론트엔드 플러스 5기 - JS Essential (2일차)

Truthy / Falsy

Truthy : 자바스크립트에서 참으로 인식하고 평가하는 값

Falsy : 자바스크립트에서 거짓으로 인식하고 평가하는 값

Truthy	Falsy
Boolean(true) / number(0 제외숫자 양수& 음수) string(문자) / object(객체{}) Array(배열[]) / BigInt(0n 제외 큰 숫자의 타입) function(함수) / symbol(심볼) / " "(빈 문자열)	Boolean(false) / Null(알 수 없는 값) undefined(할당되지 않은 값) / NaN(Not a Number) 0 / -0 / 0n / ""(공백)

 

논리값

보통은 참과 거짓으로 나누지만 if문 안에 다양한 값이 들어가는데 유연성을 지닌다.

|| ⇒ 참값을 먼저 찾고 참값이 없다면 뒤에 있는 값을 담는다.

&& ⇒ 거짓값을 먼저 찾고 거짓값이 없다면 마지막 값이 나온다.

?? ⇒ 연산자는 왼쪽 피연산자가 null이 아닐 경우 해당 값을 반환하고, null일 경우 오른쪽 피연산자를 반환

NaN이 발생하는 경우

타입이 숫자가 아닌데 숫자값으로 변경해야하는 경우 발생

let x = 3;
let y = '5';

let sum = x + y;
let product = x * y;

console.log("x + y 결과:", sum); // 35
// 숫자+문자열 = 문자열
console.log("x * y 결과:", product); // 15
// 숫자*문자열 = 숫자

let x = 3;
let y = 't';

let sum = x + y;
let product = x * y;

console.log("x + y 결과:", sum); // 3t
// 숫자+문자열 = 문자열
console.log("x * y 결과:", product); // NaN
// 숫자+변환불가 문자열= NaN 발생

 

 

Array 활용

버퍼(큐) ⇒ 전송에서는 무조건 들어간다.

new Array() ⇒ 정해진 칸이 없는 배열 생성

new Array(5) ⇒ 5칸의 배열 생성

new Array(5,10,3) ⇒ 5, 10, 3 각 값이 할당되는 배열 생성

Loop over 인덱스를 사용하지 않고 반복문

 

함수 활용

• LIFO(후입선출) : pop함수
• FIFO(선입선출) : Shift함수
• 중간선출 : splice함수

find 

• 주어진 조건에 맞는 모든 요소를 배열로 반환합니다.
• 만약 조건에 맞는 요소가 하나도 없다면 빈 배열을 반환합니다.
• 배열의 모든 요소를 순회하며 조건을 검사합니다

filter

• 주어진 조건에 맞는 첫 번째 요소를 반환합니다.
• 만약 조건에 맞는 요소가 없다면 undefined를 반환합니다.
• 배열의 요소를 순회하다가 조건에 맞는 요소를 찾으면 즉시 탐색을 멈추고 해당 요소를 반환합니다.

map

• 기존에 있던 배열의 값을 변환할 때

reduce

• 집계할 때 사용
• acc accumulator : 누산기, 누적되는 값, 최종적으로 출력되는 값
• cur current : 현재 돌고 있는 요소

join

• 배열의 있는 값을 하나로 합침 ([a,b,c] ⇒ abc)

concat

• 두 개 이상의 배열을 한개의 배열로 합침 ([a,b,c] / [d,e,f] ⇒ [a,b,c,d,e,f])

fill

• 모든 배열칸을 채움

 

객체의 특징

• 속성을 제거하는 방법 : delete
• 프로토타입 : 모든 객체가 같이 공유한다.
• 클로저 : 공유해야 할 변수가 있을 때 사용한다. outer 함수를 사용하면 대부분 클로저를 적용 전역변수(global)는 클로저를 쓸 일이 없다.

화살표 함수

• arguments가 없다.
• 일반 함수와 다르게 생성자가 없고, this도 없다.

 

 

회고 : 자바스크립트를 더 깊게 팠어야 했다. 하지만 몰랐던 것을 더 알게 되었으니 그만큼 숙지하면 됀다.