Truthy & Falsy
- 자바스크립트의 모든 값은 truthy 혹은 falsy하다
>> 조건문을 더 간결하게 만들 수 있음
- person의 값이 없으면 undefined으로 취급되고 속성(name)에 접근할 수 없다는 오류가 발생한다
- 예외를 처리하기 위해 if문 생성
(person === null || person === undefined) → (!person) 간단하게 작성 가능
단락 평가
논리 연산에서 첫번째의 값으로만 식을 판단할 수 있을 때 두번째 값은 보지 않는 기능
- person과 person.name이 모두 true이면 name은 person.name이 반환된다
T&&T → 두번째 T값 반환
T || T → 첫번째T값 반환
구조 분해 할당
- 변수 one, two, three, four에 배열의 값을 한 번에 지정할 수 있다
- four에 4값을 할당하지 않는다면 four의 값은 undefined가 된다
- 프로퍼티의 이름을 변경하거나(age > myAge) 새로운 프로퍼티를 추가할 수 있다(extra 추가)
spread 연산자 / Rest 매개변수
// Spread 연산자
let arr1 = [1, 2, 3];
let arr2 = [4, ... arr1, 5, 6];
// [4, 1, 2, 3, 5, 6]
let obj1 = {
a: 1,
b: 2,
};
let obj2 = {
...obj1,
c: 3,
d: 4,
};
// a:1, b:2, c:3, d:4- 스프레드를 사용하면 배열이나 객체를 다른 곳에 빠르게 복사할 수 있다
// 2. Rest 매개변수
function funcB(...rest){
console.log(rest)
}
// 1 2 3
function funcB(one, ...rest){
console.log(rest)
}
// 2 3- rest는 여러 개의 매개변수를 ...를 사용하여 한 번에 사용할 수 있게 한다
- rest의 이름은 사용자 임의로 지정해도 상관없다
- rest의 앞에는 매개변수가 올 수 있지만, 뒤에는 올 수가 없다
원시타입 vs 객체타입
- 원시타입: 값 자체로써 변수에 저장되고 복사된다, p1를 p2에 복사하고 p2의 값을 변경해도 p1에는 영향X
> 메모리 값이 수정되지 않는다, 불변값(상수의미X)
- 객체타입: 참조값을 통해 변수에 저장되고 복사된다,
o1객체를 p2에 복사하면 같은 메모리주소를 공유하므로 o2의 프로퍼티의 값을 수정하면 p1의 프로퍼티값도 수정된다
> 메모리값이 수정된다, 가변값
- ...을 사용하여 o1의 프로퍼티만 o2의 객체에 복사한다.
> o1과 o2는 다른 객체이므로 참조값도 다르다. 복사된 객체의 프로퍼티 값을 수정해도 원본 객체가 수정될 일이 없다
- 얕은 비교는 참조값(메모리 주소)을 기준으로 비교하고, 깊은 비교는 프로퍼티값을 기준으로 비교한다
- 배열과 함수도 객체다.
배열과 객체 순회
- 배열 arr의 요소 하나하나를 인덱스 번호에 따라서 item에 저장한다
- for문은 인덱스 번호를 저장할 수 있지만 , for of 문은 요소를 item에 저장하므로 인덱스 번호의 활용은 어렵다
- for in 은 객체의 순회에서만 사용할 수 있다 (for of는 배열에서만 사용가능)
배열 함수
요소 조작
- unshift 와 push 메서드는 값을 추가하고 난 뒤 변경된 배열의 길이를 동시에 반환한다
- shift와 unshift는 push와 pop보다 느리게 동작한다
(앞에서 요소를 건드릴 경우 기존 요소의 인덱스 번호의 조정이 필요하기 때문)
- 맨 마지막 인덱스 번호의 수보다 1 더 큰 값에서 잘라야 마지막 요소가 잘리지 않는다
순회와 탐색
- 반환값은 boolean으로 나온다
- 동일한 요소가 배열에 존재한다면 가장 앞에 위치하는 요소의 인덱스 번호를 반환한다
- indexOf로 찾으려는 요소가 존재하지 않는다면 -1 을 반환한다
- 원시타입 요소의 인덱스 번호를 반환하고 싶을 때 사용한다
- 조건식을 만족하는 요소의 인덱스 번호를 반환한다
- indexOf 메서드와 비슷한 기능이지만, 객체타입 요소의 인덱스 번호를 반환하고 싶을 때 사용한다
(객체타입은 indexOf로 인덱스 위치를 감지하지 못함)
- finded를 출력하면 name: "이정환" 이 출력된다
- sort는 사전순(요소 문자열 취급하여 유니코드에 따라)으로 정리하기 때문에 오름차순으로 정렬하고 싶다면 추가적 코드 작성이 필요하다
- toSorted를 사용하면 원본 배열을 변경하지 않고 정렬된 배열을 반환할 수 있다
- join의 괄호 안에 문자를 넣으면 단어 사이에 해당 문자가 삽입된 상태로 문자열을 합친다
동기와 비동기
- 자바스크립트는 동기적으로 코드를 실행한다
(동기적: 여러 개의 작업들을 순서대로 한 번에 하나씩만 처리하는 방식)
- 쓰레드(Thread): 작업을 직접 실행하고 처리하는 역할
- 스레드의 단점: 한 작업이 길게 늘어지면 다른 작업이 대기하는 시간이 너무 길어짐
자바스크립트 엔진에는 쓰레드가 1개이므로 동기적 방식의 단점을 보완하기 위해 비동기적 방식을 사용한다
- 해당 작업이 종료되었을 때 나오는 결과값을 이용하고 싶으면 콜백함수를 붙여서 처리하는 것도 가능하다
- 가독성이 떨어지는 인덴트 지옥을 막기 위해 promise를 사용
비동기 작업을 처리하는 방법: 콜백함수, promise, async&await
- promise 성공시(resolve) then, 실패시(reject)catch
- then과 catch가 연결되어있는걸 promise chaining이라고 부른다
- 비동기 작업을 동기 작업으로 만들어준다, promise객체 없이 promise를 반환
- await는 Promise가 해결될 때까지 기다렸다가 결과를 반환한다
'코딩 공부 > React.js 리액트' 카테고리의 다른 글
| [3주차 -2] React.js 개론 (1) | 2024.10.15 |
|---|---|
| [3주차 - 1] Node.js 기초 (1) | 2024.10.12 |
| 2주차 퀴즈 (1) | 2024.10.09 |
| 자바 스크립트 - 2 (연산자, 함수, 객체) (3) | 2024.10.02 |
| 자바 스크립트 기본 - 1 (실습 환경 조성, 데이터 타입, 형 변환) (1) | 2024.10.02 |
