혼공JS Chapter04

배열

여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형으로 대괄호[]를 사용한다.

배열 내부에 있는 값을 요소라고 한다.

let 변수 = [요소, 요소, 요소, 요소, 요소, 요소]

//간단 배열
let value = [273, 'Hello', true, 43]

배열의 뒷부분의 요소를 추가할 때는 push() 메소드를 사용한다.

배열.push(요소)

//push() 활용법
const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업']
undefined
todos
(3) ['우유 구매', '업무 메일 확인하기', '필라테스 수업']
todos.push('저녁 식사 준비하기')
4
todos
(4) ['우유 구매', '업무 메일 확인하기', '필라테스 수업', '저녁 식사 준비하기']

배열 요소를 제거하는 방법

• 첫 번째 인덱스 기반으로 제거하는 경우 ****
• 두 번째 값을 기반으로 제거하는 경우

배열을 제거하는 메소드는 splice()를 사용한다.

배열.splice(인덱스, 제거할 요소의 개수)

//배열 제거
const itemA = ['사과', '배', '바나나']

// 배열의 2번째 인덱스로부터 1개 요소를 제거한다.
itemA.splice(2,1)
['바나나']
itemA
(2) ['사과', '배']

// 값으로 요소 제거하기
const 인덱스 = 배열.indexOf(요소)
배열.splice(인덱스, 1)

const index = itemB.indexOf('바나나')

itemB.splice(index,1)
['바나나']

itemB
(2) ['사과', '배']

자료의 비파괴와 파괴

• 비파괴적 처리

  const a = 'Hello'
  const b = 'World'
  
  const c = a+b
  
  consloe.log(c) // HelloWorld
  
  consloe.log(a) // Hello
  consloe.log(b) // World
  

• 처리 후에 원본 내용이 변경되지 않는다

파괴적 처리

const array = ['사과', '배', '바나나']
array.push("귤") // 4
array
(4)["사과", "배", "바나나", "귤"]

배열과 같이 거대할 수 있는 자료는 메모리를 절약할 수 있게 대부분 파괴적 처리로 이루어졌지만 파괴적 처리는 메모리를 절약할 수 있지만, 원본이 사라지기 때문에 위험할 수 있다.

메모리가 여유로운 현대의 프로그램이 언어와 라이브러리는 자료 보호를 위해 대부분 비파과적 처리를 한다.

 

반복문

배열과 함께 사용할 수 있는 반복문은 for in 반복문으로 배열의 요소를 하나하나 꺼내서 특정 문장을 실행할 때 사용한다.

 

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

// for in을 사용한 예시
const myArray = [1, 2, 3, 4, 5];

for (let index in myArray) {
	console.log(myArray[index]);
}

요소의 값을 반복할 때 안정적으로 사용할 수 있는 반복문은 for of 반복문이다.

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

// for of을 사용한 예시
const myArray = [1, 2, 3, 4, 5];

for (let value of myArray) {
  console.log(value);
}

결과

1 2 3 4 5

두 결과 모두 같은 1,2,3,4,5를 출력하는 것을 알 수 있다.

for 반복문도 있지만 저번 혼공자(혼자 공부하는 자바에서 하여서 넘어가겠다.)

while문도 간단하게 표현 방식만 적겠다.

while(불 표현식){
	문장
}

//무한 반복문
let i = 0 
while(true) {
	alert(`${i}번째 반복중입니다.`)
	i += 1
}

계속 1씩 증가 하면서 메시지가 뜬다.

let i = 0 
while(true) {
	console.log(i+'번째 반복중입니다.')
	i += 1
}

console.log()썼다가 크롬이 작동을 안 했다 ㅋㅋㅋㅋ ;;;

 

반복문에는 break 키워드와 continue 키워드가 있다.

break 키워드는 반복문을 벗어날 때 사용하는 키워드로 무한루프를 사용할 때 break를 사용하여 벗어날 수 있다.

반대로 continue 키워드는 반복문 안의 반복 작업을 멈추고 반복문의 처음으로 돌아가 다음 반복 작업을 진행한다.

// break와 continue를 사용한 간단한 예제
for (let i = 1; i <= 5; i++) {
  // i가 3일 때 반복문 종료
  if (i === 3) {
    console.log("반복문을 종료합니다.");
    break;
  }

  // i가 2일 때는 현재 반복을 건너뛰고 다음 반복으로 이동
  if (i === 2) {
    console.log("현재 반복을 건너뜁니다.");
    continue;
  }

  console.log("현재 i의 값:", i);
}

결과

현재 i의 값: 1

현재 반복을 건너뜁니다.

현재 i의 값: 3

반복문을 종료합니다.

---

 

---

이번 주차까지는 그래도 자바에서 배운 내용이랑 비슷하여 괜찮았지만 다음주 함수 때부터 좀 더 집중해서 공부를 시작해야 될 거 같다. (할 수 있다!!!)

 

---

4주차 미션

기본 미션

• 비파괴적 처리와 파괴적 처리의 의미와 장단점 설명하기'

 

비파괴적 처리

• 의미: 비파괴적 처리는 원본 데이터를 변경하지 않고 새로운 데이터를 생성하는 방식 원본 데이터는 그대로 유지되며, 새로운 결과가 반환되거나 다른 변수에 할당된다.

파괴적 처리

• 의미: 파괴적 처리는 원본 데이터를 직접 변경하는 방식입니다. 연산 또는 메서드가 호출된 후에는 원본 데이터가 변화되어 원본 데이터는 더 이상 그 전의 상태를 갖지 않다.
• 비파괴적 처리의 장점:
  • 안전성: 원본 데이터를 보존하므로 예기치 못한 문제가 발생할 때 복구하기 쉽다.
  • 함수형 프로그래밍에서 불변성을 유지할 수 있어 코드의 예측 가능성이 높아진다.
• 비파괴적 처리의 단점:
  • 메모리 사용량이 증가할 수 있고 여러 개의 중간 결과물을 생성해야 하므로 메모리 부담이 있을 수 있다.
• 파괴적 처리의 장점:
  • 메모리 효율성: 원본 데이터를 직접 변경하므로 새로운 데이터를 생성하고 유지할 필요가 없어 메모리를 절약할 수 있다.
  • 성능: 대용량 데이터를 다룰 때 효율적인 경우가 많다.
• 파괴적 처리의 단점:
  • 안전성: 원본 데이터를 직접 변경하므로 실수가 발생할 경우 데이터를 복구하기 어렵다.
  • 함수형 프로그래밍의 불변성 원칙을 어기게 되어 부작용이 발생할 수 있다.

---

선택미션

p173.확인 문제 3번 풀고, 풀이과정 설명 하기

1. [파괴적 / 비파괴적]

const strA = "사과, 배, 바나나, 귤"

strA.split(",")
(4) ["사과","배","바나나","귤"]

strA
"사과, 배, 바나나, 귤"

split() 메서드는 비파괴적 처리를 하며, 원본 문자열을 변경하지 않고 구분자를 기준으로 나눈 새로운 배열을 반환한다.

 

2. [파괴적 / 비파괴적]

const arrayB = ["사과", "배", "바나나", "귤"]

arrayB.push("감")
5

arrayB
(5)["사과", "배", "바나나", "귤", "감"]

push() 메서드는 파괴적 처리를 하며, 원본 배열을 변경하고 새로운 배열의 길이를 반환한다. 따라서 arrayB 변수에 할당된 배열이 변화되어 "감"이 추가된 배열로 바뀐다.

 

3. [파괴적 / 비파괴적]

const arrayC = [1,2,3,4,5]

arrayC.map((x) => x * x)
(5) [1, 4, 9, 16, 25]

arrayC
(5) [1,2,3,4,5]

map 메서드는 비파괴적 처리를 하며, 원본 배열을 변경하지 않고 새로운 배열을 반환한다. 따라서 arrayC 변수에 할당된 배열은 변화가 없이 유지가 된다.

 

4. [파괴적 / 비파괴적]

const strD = " 여백이 포함된 메시지   "

strD.trim()
"여백이 포함된 메시지"

strD
"   여백이 포함된 메시지    "

trim 메서드는 비파괴적 처리를 하며, 원본 문자열을 변경하지 않고 앞뒤의 공백을 제거한 새로운 문자열을 반환한다. 따라서 strD 변수에 할당된 문자열은 변화가 없이 유지된다.