[혼공스] 3주차

이름뭐하지·2025년 7월 20일
0

배열

배열 만들기

배열은 여러 자료를 묶어서 만들 수 있는 특수한 자료구조이다.
배열 내부에 들어 있는 각각의 값들을 요소라고 하며, 어떠한 종류의 자료형도 요소가 될 수 있다.

const array = [273, 'String', true, function() {}];

배열 접근하기

요소의 순서를 인덱스 라고 한다.
특정 순서의 요소를 인덱스를 통해 접근할 수 있다.

const numbers = [100, 200, 300];
console.log(numbers[0]); // 100

배열 길이 알아내기

배열 내부에 들어 있는 요소의 개수를 확인할 때는 배열의 length 속성을 확인한다.

const numbers = [1,2,3,4,5];
console.log(numbers.length); // 5

배열 뒷부분에 요소 추가하기

push() 메소드를 사용하여 배열 뒷부분에 요소를 추가할 수 있다.

numbers.push(6);
// 배열 뒷부분에 요소 6이 추가 되었다.
console.log(numbers); // 1, 2, 3, 4, 5, 6

배열 요소 제거하기

인덱스로 요소 제거하기

인덱스로 요소를 제거할 때는 splice() 메소드를 사용한다.

const arr = [1,2,3];
// 배열의 2번째 인덱스부터 1개의 요소 제거
// 제거된 요소가 배열로 리턴된다.
arr.splice(2,1); // [3]

console.log(arr); // [1, 2] 요소가 제거된 것을 알 수 있다.

값으로 요소 제거하기

값을 기반으로 요소를 제거할 때는 배열 내부에서 특정 값의 위치를 찾는 indexOf() 메소드를 사용해서 값의 위치를 추출한 뒤 splice() 메소드를 사용해 제거한다.

const fruits = ['사과', '바나나', '귤', '배'];
const index = fruits.indexOf('귤')
console.log(index); // 2 

fruits.splice(index, 1); // 귤이 제거된다.

indexOf() 메소드는 배열 내부에 요소가 있을 경우 인덱스를 리턴한다.
배열 내부에 요소가 없을 때는 -1을 리턴한다.

배열의 특정 위치에 요소 추가하기

배열의 특정 위치 (인덱스)에 요소를 추가할 때는 splice() 메소드의 2번째 매개변수에 0을 입력하고, 3번째 매개변수에 추가하고 싶은 요소를 입력한다.

const numbers = [1,2,3];
numbers.splice(0, 0, 0);
console.log(numbers); // 0, 1, 2, 3

반복문

for in 반복문

for in 반복문은 배열의 인덱스를 기반으로 반복할 때 사용하는 반복문이다.

for (const 반복 변수 in 배열 또는 객체) {}

for of 반복문

for of 반복문은 배열의 값을 기반으로 반복할 때 사용하는 반복문이다.

for (const 반복 변수 of 배열 또는 객체) {}

for 반복문

for 반복문은 횟수를 기반으로 반복할 때 사용하는 반복문이다.

for(let i = 0; i < 반복 횟수; i++) {}

while 반복문

whilel 반복문은 조건을 기반으로 반복할 때 사용하는 반복문이다.

while (불 표현식) 
{
	문장
}

break과 continue

break 키워드는 조건문이나 반복문을 벗어날 때 사용하는 키워드이다.
continue 키워드는 반복문 안의 반복 작업을 멈추고 반복문의 처음으로 돌아가 다음 반복 잡업을 진행할 때 사용하는 키워드이다.

숙제

비파괴적 처리와 파괴적 처리

자바스크립트는 자료(데이터)의 처리를 위해서 다양한 연산자, 함수, 메소드를 제공한다. 연산자, 함수, 메소드는 크게 비파괴적 처리와 파괴적 처리로 구분할 수 있다.

비파괴적 처리 : 처리 후의 원본 내용이 변경되지 않는다.
파괴적 처리 : 처리 후의 원본 내용이 변경된다.

과거에는 컴퓨터 메모리가 많이 부족했기 때문에, 프로그래밍 언어와 라이브러리들은 최대한 메모리를 절약해서 사용하는 방식으로 설계되었다.

데이터가 기본 자료형이면 메모리를 조금만 차지하기 때문에 원본과 결과를 모두 메모리에 저장해도 상관 없지만, 배열과 같은 메모리를 많이 차지하는 구조는 원본과 결과를 모두 메모리에 저장하는 것은 위험하다. 그래서 자바스크립트는 배열과 같은 거대해질 수 있는 자료는 메모리를 절약할 수 있게 대부분 파괴적 처리로 동작하게 설계하였다.

비파괴적 처리는 자료 보호를 할 수 있다는 장점이 있지만 자료의 크기가 큰 경우 메모리 낭비가 발생할 수 있다.

파괴적 처리는 자료 보호를 할 수 없다는 점에서 안정성이 떨어지지만 메모리를 절약할 수 있다.

메모리가 여유로운 현대의 프로그래밍 언어와 라이브러리는 보통 비파괴적 처리를 진행한다.

추가 숙제

1번 : 비파괴적 처리이다.
split() 메소드를 통해 문자열을 ',' 로 분리한 배열이 생성되지만(결과), 원본 문자열 또한 보존된다.

2번 : 파괴적 처리이다.
push() 메소드를 통해 배열의 맨 뒷 부분에 요소가 추가되어 원본이 변경되므로 파괴적 처리이다.

3번 : 파괴적 처리이다.
map() 함수를 통해 배열의 각 요소의 값이 변경되므로 파괴적 처리이다.

4번 : 파괴적 처리이다.
trim() 메소드를 통해 문자열의 양 끝 공백이 제거되므로 자료형은 문자열(기본 자료형) 이지만 원본이 변경되므로 파괴적 처리이다.

0개의 댓글