🗓️ TIL (Today I Learned) 날짜
읽은 날: 2024.01.11
기록한 날: 2024.01.21
🔎 읽은 범위
Chapter 04
👀 지난 주 내용 복습하기
작성중!! 다음 주 중으로 추가할 예정
📖 책에서 기억하고 싶은 내용
배열?
여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형
배열 내부의 값을 요소라고 함
배열의 요소 가지고 놀기
- 요소의 순서 = 인덱스, 인덱스는 0부터 시작
요소의 개수 확인: 배열.length - 배열의 마지막 요소 선택
배열.length - 1 => 배열의 인덱스는 0부터 시작하기 때문에 -1을 해줘야 한다. - 배열에 요소 추가하기
(1) push() 사용
배열의 끝에 새로운 요소 추가
(2) 인덱스 응용
배열의 원하는 인덱스에 냅다 새로운 요소 넣기
배열의 특정 위치에 요소 추가: 배열.splice(인덱스, 0, 요소) - 배열 요소 제거하기
(1) 인덱스 기반 제거
배열.splice(인덱스, 제거할 요소의 개수)
(2) 값으로 요소 제거
indexOf() + splice() // 배열 내부 요소 하나만 제거 가능
indexOf(): 배열 내부에 요소가 있으면 그 요소의 인덱스 반환, 없으면 -1 반환
const 인덱스 = 배열.indexOf(요소);
배열.splice(인덱스, 1)
(3) 여러 개 제거하기
filter() 메소드나 반복문 사용해서 제거
반복문
for - in loop
배열 요소를 하나하나 꺼내서 특정 문장을 실행할 때 사용
for (const 반복변수 in 배열 또는 객체)for - of loop
요서의 값을 반복할 때 foor-in 보다 안정적이다.
for (const 반복변수 of 배열 또는 객체)for
특정 횟수만큼 반복하고 싶을 때 사용하는 반복문
for (let i = 0; i < 반복 횟수; i++)배열과 함께 사용하는 경우가 많다.
while
불 표현식이 true이면 문장을 계속해서 실행
while (불 표현식)무한루프에 빠지지 않게 조건을 거짓으로 만드는 내용이 필요하다.
키워드
break
switch 조건문이나 반복문을 벗어날 때 사용하는 키워드
while (true) {
} breakcontinue
반복문 안에서 사용 시 계속되는 반복 작업을 멈추고 처음으로 돌아가 다시 코드를 실행하는 키워드
😊 오늘 읽은 소감 & 떠오르는 생각
너무너무 자주 사용하는 반복문에 대한 내용이었다. 지난 주에 아파서 못한 내용도 4주차 내용하면서 같이 정리해야겠다.
이번에 공부한 내용 중에 가장 인상적인 내용은 자료의 파괴/비파괴적 처리 부분이었다. 전에 본 기억을 토대로, 파괴적 처리였지만 지금은 비파괴적으로 사용할 수 있는 메소드들에 대해 더 알아볼 수 있어서 좋았다.
✅ 미션
기본 미션
자료의 파괴적 처리, 비파괴적 처리 의미와 장단점 비교
-
파괴적 처리
결과 도출을 위해 원본이 파괴되는 처리 -
비파괴적 처리
원본은 그대로 유지된 채로 새로운 결과가 나오는 처리 -
메모리와 처리 방식의 차이
과거
메모리 부족 -> 배열은 용량이 커질 수 있음 -> 그런 배열을 여러 개 가지고 있는 건 메모리에 잠재적 부담 -> 메모리를 아끼기 위해 배열을 새로 생성하지 않고 원본 배열에서 파괴적 처리
현재
메모리 용량 여유 -> 굳이 배열을 변경하지 않아도 괜찮음, 원본 배열을 유지하는게 중요시 됨 -> 원본 배열을 유지하고 새로운 배열에서 처리하는 비파괴적 처리 -
더 알아보자
과거에서 현재로 넘어오면서 변화한 메소드들이 있다. 기존의 메소드는 파괴적 처리를 하는 메소드였는데 새로운 메소드로 사용하면 비파괴적 메소드로 사용 가능하다.
하지만 기존부터 비파괴적인 map(), trim()과 같은 메소드는 원본 배열과 동일한 타입의 인스턴스를 반환하는데 반해, 아래에서 소개할 메소드는 일반 Array 타입으로 반환된다.- sort() -> toSorted(): 배열 사본을 만들어 저장 - reverse() -> toReversed(): 순서가 반전된 새로운 배열 반환 - splice() -> toSpliced(): 제거된 요소 없이 추가된 요소만 포함해서 보여준다. splice()는 삭제된 요소도 포함해서 배열을 반환해줌 (차이 존재) 원본 배열을 유지하면서 삭제된 요소도 확인하고 싶다면 slice() 사용하면 된다. - with(): 배열.[인덱스] = 새로운 값; 을 대체하는 메소드이다. 배열.[인덱스] = 새로운 값;는 원본 배열이 변경된다. 하지만 새 배열 = 배열.with(원하는 인덱스, 새로운 값);은 새로운 배열을 만들어 변경한다. -
참고: https://velog.io/@eunbinn/es2023-new-array-copying-methods-javascript
선택 미션
p.173 3번 풀기
(1) 비파괴적 처리: split()은 구분자를 중심으로 문자열을 나누어 반환하는데, 이때 원본 문자열은 변하지 않는다.
(2) 파괴적 처리: push()는 원본 배열에 새로운 요소를 추가하는 매소드이다. 따라서 파괴적 처리이다.
(3) 비파괴적 처리: map()은 새로운 배열을 만들어 결과값을 새로운 배열에 담기 때문에 원본 배열은 변하지 않는다.
(4) 비파괴적 처리: trim() 역시 새로운 문자열로 결과를 반환하기 때문에 원본 자료가 변하지 않는다.
