[혼공스] 3주차

babyjs 2025. 1. 26. 17:36

2025. 1. 26. 17:36

배열

배열은 여러 자료형 값을 순차적으로 나열한 자료구조이다. 배열은 [ ] (대괄호)를 사용하며 안에 있는 자료형 값을 요소라고 부른다. 여러 요소를 작성할 때는 ‘,’로 구분하여 작성한다. 배열 안에 있는 요소에 접근하는 방법은 문자열에서 사용했던 것처럼 변수명 뒤에 [index] 사용하면 index에 해당 되는 값을 받을 수 있다. 배열도 index 0부터 시작한다.

//배열 기본 형태 

const arr = ['배열', '객체', '함수'];
console.log(arr[0]) // 배열
console.log(arr[1]) // 객체
console.log(arr[2]) // 함수

배열 요소 개수 확인

.length 프러퍼티를 사용해 배열의 요소 개수를 확인할 수 있다. 배열 안 많은 요소들 중에 마지막 요소를 선택하고 싶으면 변수명[배열.length - 1]을 해주면 마지막 요소를 얻을 수 있다.

const arr = ["떡볶이", "김밥", "오뎅", "순대"];
console.log(arr.length); // 4
console.log(arr[arr.length - 1]); // 순대

배열 요소 추가

배열의 맨 뒷부분에 요소를 추가하기 위한 방법은 두 가지가 있다

1️⃣ push() 메서드

배열을 할당한 변수명 뒤에 .push()를 작성 후 매계변수에 추가할 요소를 작성해주면 된다.

const arr = ["떡볶이", "김밥", "오뎅", "순대"];
arr.push("튀김");
console.log(arr); // ["떡볶이", "김밥", "오뎅", "순대", "튀김"]

2️⃣ 인덱스 이용

Javascript의 배열은 길이가 정해져 있지 않다. 이러한 특징으로 인덱스로 배열 안에 요소를 추가할 수 있다. 아래 예제를 보면 arr[10]에 튀김이라는 요소를 추가해 줬다. arr 출력해 보면 중간 인덱스들이 비어 있는 상태로 출력 된다.

const arr = ["떡볶이", "김밥", "오뎅", "순대"];
arr[10] = "튀김";
console.log(arr) // ["떡볶이", "김밥", "오뎅", "순대", empty x6, "튀김"]

3️⃣ splice() 메서드

splice() 메서드는 요소를 추가, 제거 할 때 사용한다. 요소를 제거할 때는 매계변수가 두 개였지만, 요소를 추가할 때는 매계변수가 세 개를 사용하고 두 번째 매계변수는 ‘0’으로 고정해 사용한다.

splice() 메서드는 특정 위치에 요소를 추가할 수 있다.

// 기본 형태

배열.splice(인덱스, 0, 요소);

// 예제 

const arr = ["떡볶이", "김밥", "오뎅", "순대"];
arr.splice(3, 0, "튀김");
console.log(arr); // ["떡볶이", "김밥", "튀김", "오뎅", "순대"];

배열 요소 제거

요소를 제거하는 방법에도 두 가지 방법이 있다.

1️⃣ 인덱스를 통한 제거

인덱스를 통한 제거는 splice() 메서드를 사용해 요소를 제거 한다.

//기본 형태

배열.splice(인덱스, 선택한 인덱스 기준으로 제거할 인덱스 개수)

//예제

const arr = ["떡볶이", "김밥", "오뎅", "순대"];
arr.splice(1, 1); // "김밥"
console.log(arr); // ["떡볶이", "오뎅", "순대"]
arr.splice(1, 2); // "오뎅", "순대"
console.log(arr) // ["떡볶이"]

2️⃣ 값을 통한 제거

indexOf(요소) 메서드를 통해 인덱스를 알아내 splice()메서드를 통해 제거한다. indexOf(요소)를 했는데 배열 안에 그 요소가 있으면 인덱스를 출력하고 요소가 없으면 -1를 출력한다.

// 기본 형태

const 인덱스 = 배열.indexOf(요소);

//예제

const arr = ["떡볶이", "김밥", "오뎅", "순대"];
const index = arr.indexOf("김밥"); // 1
arr.splice(index, 2); // "김밥", "오뎅"
console.log(arr); // ["떡볶이", "순대"]

const index2 = arr.indexOf("오뎅");
console.log(index2); // -1

3주차 숙제

비파괴적 처리

비파괴적 처리는 처리를 했을 때 원본 값이 변하지 않는다.

장점 : 원본 자료를 보호할 수 있다.

단점 : 메모리를 많이 사용한다. (하지만 현대에는 메모리 용량이 많아서 단점이라고 볼 수 없을 거 같다.)

파괴적 처리

파괴적 처리는 처리를 했을 때 원본의 값이 변한다. 대표적으로 앞에서 배운 배열의 추가, 제거를 들 수 있다.

장점 : 메모리 공간을 효율적으로 사용해 공간 확보를 할 수 있다..

단점 : 원본 값이 사라진다.

추가 숙제

const strA = "사과, 배, 바나나, 귤";
undefined
strA.split(",") // split() 메서드는 특정 단위로 구분하여 배열로 나열해주는 메서드다.
(4) ["사과", "배", "바나나", "귤"]
strA 
"사과, 배, 바나나, 귤"; // 원본이 그대로 나와 비파괴적 처리이다.

const arrB = ["사과", "배", "바나나", "귤"];
undefined
strA.push("감") // 마지막 부분에 요소를 추가하는 메서드
(4) ["사과", "배", "바나나", "귤", "감"]
strB 
["사과", "배", "바나나", "귤", "감"]; // 원본이 변경되서 출력되서 파괴적 처리이다.

const arrC = [1, 2, 3, 4, 5];
undefined
arrC.map((x) => x * x); //map() 메서드는 새로운 배열을 만들어 주는 메서드다.
(5) [1, 4, 9, 16, 25]
arrC
(5) [1, 2, 3, 4, 5] // 원본이 그대로 나와 비파괴적 처리이다.

const strD = " 여백이 포함된 메시지  ";
undefined
strD.trim() // trim() 메서드는 대상 문자열 앞뒤 여백이 있을 경우 이를 제거해 문자열을 반환한다.
"여백이 포함된 메시지"
strD
" 여백이 포함된 메시지  " // 원본이 그대로 나와 비파괴적 처리이다.

반복문

반목문은 조건식을 평가하여 결과가 true인 경우 코드 블록을 실행한다. 만약 조건식이 false면 반복문은 종료 된다. 이 처럼 특정 조건에서 작업을 반복하기 위해 사용하는 것이 반복문이다.

for in 반복문

for in 반복문의 형태는 아래와 같다. 배열과 객체를 사용할 때 나오는 반복 변수의 값은 각각 다른데 먼저 배열은 반복 변수의 값으로 인덱스가 나오고 객체는 반복 변수의 값으로 프로퍼티 키가 나온다.

for (반복 변수 in 배열 or 객체) {
	실행할 코드
} // -> for in문 기본 형태

// for in문 예제

const arr = [1, 2, 3];
for (key in arr) {
  console.log(key)
} /* -> 결과
	0
	1
	2
*/

for of 반복문

for of 문의 기본 형태는 아래와 같다. 반복 변수에는 배열의 요소 값이 온다.

for (const 반복 변수 of 배열) {
	실행할 코드
} //-> for of문의 기본 형태

// for of문 예제

const todos = ["혼공스 공부", "블로그 정리", "독서"]
for (list of todos) {
	console.log(`Todolist: ${list}`)
} /* -> 결과 
  Todolist: 혼공스 공부
  Todolist: 블로그 정리
  Todolist: 독서
*/

for 문

// for문 기본형태

for (변수 선언;  조건식; 증감식) {
	조건이 참일 때 실행 되는 코드
}

// for문 예제

for (let i = 0; i < 10; i++) {
	console.log(i)
}

for문 변순 선언 할 때는 const가 아닌 let으로 선언해 준다. 그 이유는 반복문 실행 과정을 알고 있으면 이해하기 쉽다. 예제 실행 과정을 살펴보면 먼저 i = 0이 할당되고 조건식을 살펴봐 true면 아래 코드가 실행 된다. 그 후에 i는 증감식에 의해 증가되 i = 1이 할당 된다. 이 때 const로 변수 선언을 하면 TypeError가 발생한다. 그래서 변수 선언 할 때는 let을 사용해야 한다.

for문은 조건식이 false일 때까지 반복 실행 된다. 이 개념이 중요하다고 생각하는 이유는 중첩 조건문을 이해하는데 많은 도움을 주기 때문이다.

for ( let i = 0; i < 6; i++) {  // -> 1️⃣
	for (let j = 0; j < 6; j++) { // -> 2️⃣
		if (i + j === 4) console.log(i, j) // -> 3️⃣
	}
}
0,4
1,3
2,2
3,1
4,0
/*
1️⃣ 과정에서 i가 0으로 할당 되고 조건식을 비교 하게 된다. true면 2️⃣ for문을 실행한다.
2️⃣에서는 j를 0으로 할당하고 조건식을 비교해 true면 3️⃣ if문이 실행 된다. if문이 true면 코드를
실행하고 false면 j가 증가 되고 2️⃣로 돌아가 조건식을 확인한다. 이 과정을 2️⃣ for문이 
false 될 때 까지 실행한 후 i를 증가 시켜 1️⃣ for문을 실행한다.
위의 과정을 1️⃣ for문이 false 될 때 까지 반복한다.
*/

whlie 문

if문이랑 생김새가 비슷하지만 차이점이 있다. if문은 조건이 true일 때 코드를 한 번만 실행 시키지만 whlie문은 조건이 true면 코드를 계속 실행시킨다. 조건이 true일 때 코드 블록을 계속 실행하면 무한 루프에 걸릴 수 있다. 무한 루프를 방지하기 위해서는 while문 코드 블록 안에 break나 false 조건을 추가해야 한다.

for문은 반복 횟수가 명확할 때 사용하고, while문은 반복 횟수가 불명확할 때 주로 사용된다.

//while문 기본 형태

while(조건 표현식) {
	실행할 코드
}

continue

for문 코드 블럭 안에 continue를 넣으면 조건식이 true여도 안에 있는 코드를 실행하는 것이 아니라 continue에 막혀 코드 실행 흐름을 증각심으로 이동 시킨다.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let count = 0;
for ( let i = 0; i < arr.length; i++) {
	if(arr[i] % 2 !== 0) continue;
	count++
}
console.log(count);
/*위에 코드는 짝수 갯수를 찾는 코드이다. if문 조건식 즉 요소가 홀수면 continue가 실행 되
i는 증감식으로 실행 흐름이 이동 되서 증가 된 후에 다시 조건을 살펴 코드를 실행한다. */

break

switch, while에서 본 것처럼 break를 만나면 코드 블럭을 탈출한다. break는 레이블문, 반복문, switch문의 코드 블럭 안에서만 사용할 수 있다. 그 외에 다른 문의 코드 블럭에 break를 사용하면 에러가 발생 한다.

babyjs 님의 블로그