[혼공스] 3주차 Chapter 04 반복문

기본 미션

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

비파괴적 처리:

• 연산 후에도 원본 데이터가 바뀌지 않는 것
• 예) 숫자 연산

비파괴적 처리는 불변성을 유지하며 안정적인 코드 작성에 유리하지만, 메모리 사용량이 증가할 수 있다.

파괴적 처리:

• 연산 후에 원본이 바뀌는 것
• 예) 배열의 push() 메서드.

파괴적 처리는 메모리를 절약할 수 있지만, 원본 데이터가 변하기 때문에 사이드 이펙트가 발생할 수 있다.

선택미션

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

공통적으로 함수실행 이후 원본 데이터에 변화가 있는지 확인하면 알 수 있다.

1. 비파괴적 처리

> const strA = "사과, 배, 바나나, 귤";
undefined

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

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

2. 파괴적 처리

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

> arrayB.push("감");
5

> arrayB;
["사과", "배", "바나나", "귤", "감"]

3. 비파괴적 처리

> const arrayC = [1, 2, 3, 4, 5];
undefined

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

> arrayC;
[1, 2, 3, 4, 5]

4. 비파괴적 처리

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

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

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

---

학습 기록

배열

• 배열은 여러 자료형의 값을 모아놓은 것이다.
• 순서가 중요하며 인덱스를 통해 해당 순서의 값을 확인할 수 있다.

배열 생성 방법:

• 대괄호 안에 쉼표로 구분된 값들을 넣어 만든다.
• 배열 내부의 각 값을 요소(element)라고 부른다.

let arr = [요소, 요소, 요소];

배열 요소 접근:

• 배열 변수 이름 뒤에 대괄호와 인덱스를 사용하여 특정 요소를 가져올 수 있다.
• 인덱스는 0부터 시작한다.

let arr = ["apple", "banana", "mango"];

arr[0]; // "apple"

배열 길이 구하기:

• arr.length로 배열의 길이(요소 개수)를 구할 수 있다.

let arr = ["apple", "banana", "mango"];

arr.length; // 3

배열 요소 추가:

• push() 메서드를 사용하여 배열의 맨 뒤에 요소를 추가할 수 있다.
• push(요소)

let arr = ["apple", "banana", "mango"];

arr.push("pineapple");
console.log(arr); //  ["apple", "banana", "mango", "pineapple"];

배열 중간에 요소 추가:

• splice() 메서드를 사용하여 특정 인덱스에 요소를 삽입할 수 있다.
• splice(인덱스, 0, 요소)

let arr = ["apple", "banana", "mango"];

arr.splice(1, 0, "orange");
console.log(arr); //  ["apple", "orange", "banana", "mango"];

배열 요소 제거:

• splice() 메서드를 사용하여 특정 인덱스의 요소를 제거할 수 있다.
• splice(인덱스, 1)

let arr = ["apple", "banana", "mango"];

arr.splice(1, 1);
console.log(arr); //  ["apple", "mango"];

배열에서 특정 값의 인덱스 찾기:

• indexOf() 메서드를 사용하여 배열 내 특정 값의 인덱스를 찾을 수 있다.
• indexOf(요소)
• 원하는 요소가 없을 때는 -1 을 출력한다.

let arr = ["apple", "banana", "mango"];

arr.indexOf("mango"); // 2
arr.indexOf("orange"); // -1

배열에서 특정 값을 찾아 제거하기:

• - indexOf() 와 splice()를 같이 활용해서 특정 값을 제거할 수 있다.
• indexOf를 통해 먼저 인덱스를 찾는다.
• splice로 해당 인덱스의 값을 제거한다.

let arr = ["apple", "banana", "mango"];

let idx = arr.indexOf("mango"); // 2
arr.splice(idx, 1);
console.log(arr); // ["apple", "banana"];

 

스택, 힙, 비파괴적 처리, 파괴적 처리

스택

• 기본 자료형(숫자, 문자열 불 등)이 저장되는 공간이다.
• 데이터가 차곡차곡 쌓이는 구조다.
• 복합 자료형은 데이터 대신 주소가 저장된다.

힙

• 복합 자료형(배열, 함수, 객체 등)이 저장되는 공간.
• 데이터가 무작위로 저장되는 구조.

10 > 5 ? console.log("맞았을 때 출력됩니다.") : console.log("틀렸을 때 출력됩니다.")

자료형과 스택 / 힙의 관계

스택:

• 변수나 상수를 선언하면 스택에 이름과 값이 저장된다.
• 복합자료형은 이름과 주소(힙에 존재하는 데이터의 위치)가 저장된다.
• 주소를 저장한 변수나 상수를 레퍼런스(참조)변수 라고 부른다.

힙:

• 복합 자료형의 다양한 값을 저장한다.
• 스택에 있는 주소가 힙에 있는 값을 가리키는 것을 레퍼런스(참조)한다고 표현한다.

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

비파괴적 처리:

• 연산 후에도 원본 데이터가 바뀌지 않는 처리방식이다.
• 예) 숫자 연산

  let num1 = 10;
  let num2 = 20;

  num1 + num2; // 30
  num1; // 10
  num2; // 20

파괴적 처리:

• 연산 후에 원본 데이터가 바뀌는 처리방식이다.
• 예) 배열의 push() 메서드

let arr = ["apple", "banana", "mango"];

arr; // ["apple", "banana", "mango"];

arr.push("orange");

arr; // ["apple", "banana", "mango", "orange"];

자료형에 따른 처리 구분 이유:

• 자바스크립트 언어가 탄생할 시기에는 컴퓨터의 메모리가 부족했다.
• 이에 다양한 값을 저장하는 자료형은 값을 직접 수정(파괴적 처리)해 메모리 부족을 극복하려고 했다.
• 현대에는 과거에 비해 메모리 크기가 크게 증가했고, 안정성의 이유로도 파괴적 처리를 선호하지 않는다.
• 일반적으로 배열이나 객체등을 조작할 때는 원본을 복사해서 비파괴적으로 처리한다.

상수인데 변경 가능한 상수

• 상수(const)는 스택의 값을 변경할 수 없게 제한한다.
• 따라서 스택에 저장된 주소 자체를 다른 값으로 변경하면 에러가 발생한다.

  const a = [1, 2, 3];
  a = [5, 6]; // 에러

• 상수 내부의 복합 자료형은 힙에 저장되기 때문에 변경할 수 있다.

  const a = [1, 2, 3];
  a.push(5);
  console.log(a); // [1,2,3,5]

mutable(가변)과 immutable(불변)

• 파괴적 처리와 비파괴적 처리는 메서드가 원본 데이터를 수정하는가에 대한 개념이다.
• mutable 과 immutable 은 값 자체가 변경 가능한가 에 대한 개념이다.
• 자바스크립트에서 객체와 배열은 기본적으로 mutable하지만, 그 데이터를 다루는 방식(메서드)이 파괴적일 수도 있고 아닐 수도 있다.

윤쌤의 조언

• 이론 없이도 코드 작성은 가능하지만 더 발전하기 위해서는 이론 공부가 필요하다.
• 이론에 의해 코드가 짧아지는 것을 몇 번 보고 나면 '뭔가 알면 짧아질 것 같은데?'와 같은 생각에 코드작성을 못하게 되는 경우가 있다. 그래도 완성하는 것이 아예 완성하지 못하는 것보다 낫다.
• 완성하는 능력을 키우고 해당 이론을 공부하는 것이 더 도움이 된다.

 

forof forin for 반복문

for 계통 반복문의 종류:

• for of, for in, for 3가지가 있다.
• for of와 for in은 배열 등과 함께 사용하고, for는 범용으로 사용한다.
• 반복문은 중첩할 수 있다.

for of:

• 배열 요소를 순회할 때 사용한다.
• 반복 변수명을 요소, 인덱스 등으로 사용 가능하다.

const arr = ["하나", "둘", "셋", "넷", "다섯"];

for (const i of arr) {
  console.log(i); // 차례대로 "하나", "둘", "셋", "넷", "다섯" 출력
}

for in:

• 객체의 속성을 순회할 때 사용한다.
• 반복 변수명을 속성명, 인덱스 등으로 사용 가능하다.

const arr = ["하나", "둘", "셋", "넷", "다섯"];

for (const i of arr) {
  console.log(i); // 차례대로 0, 1, 2, 3, 4 출력
}

for:

• 특정 횟수만큼 반복할 때 사용한다.
• 시작, 끝, 증감 값 등을 지정할 수 있다.
• 반복 변수는 반드시 let으로 선언해야 한다.

for (let 초기값 ; 조건문 ; 증감식){
  반복할 내용
}

 

while 반복문

while:

• 조건식이 참일 경우 계속해서 반복문 내부를 실행
• 조건식이 거짓이 되면 반복문을 벗어남

while (조건식) {
  반복할 내용
}

for 반복문과의 비교:

• while 반복문은 조건이 중요할 때 사용
• for 반복문은 특정 횟수만큼 반복하거나 배열 등을 기반으로 반복할 때 사용
• 결과가 나올 때까지, 특정 시간까지, 파일에서 특정 단어를 찾을 때까지 등
• 정확한 반복 횟수를 정할 수 없을 때 유용하다.

브레이크 구문:

• 반복문을 즉시 종료시킨다.

let i = 1;

while (true) {
  console.log(`${i}번 반복했습니다`);
  i++;
  
  if (i === 5) {
    console.log("이제 그만");
    break;
  }
}

컨티뉴 구문:

• 현재 반복을 건너뛰고 다음 반복으로 넘어간다.
• 즉, 아래의 경우 continue에 막혀 "이제 그만" 이라는 문장은 한번도 출력되지 않는다.

let i = 1;

while (i !== 5) {
  console.log(`${i}번 반복했습니다`);
  i++;
  continue;
  
  console.log("이제 그만");
}

윤쌤의 조언

• while문의 경우 파일의 입출력과 관련해서 사용하는 경우가 있는데,
• 자바스크립트에서 파일의 입출력은 node.js와 연계되기 때문에 당장은 사용할 일이 없다.
• 따라서 for 반복문 위주로 학습하면 된다.
• VSCode의 코드 조각은 최소한의 조작으로 최대의 행동을 할 수 있게 만들어주는 도구다.
• 거부감 없이 활용해도 된다.