본문 바로가기
Code/혼공단-7기

혼공단 7기 - 혼공JS - 3주차 미션

by Beyonder 2022. 1. 21.

 

 

혼자 공부하는 자바스크립트

#한빛미디어 #혼공학습단 #혼공단 #혼공JS

주차 Chapter 기본 미션 선택 미션
3주차 Chapter 04 비파괴적 처리와 파괴적 처리의 의미와 장단점 설명하기 p.173 확인 문제 3번 문제 풀고, 풀이 과정 설명하기

Chapter 04 반복문

: 배열의 개념과 문법을 익혀 while 반복문과 for 반복문을 이해합니다.

__04-1 배열

__04-2 반복문


I. 기본 미션 - 비파괴적 처리와 파괴적 처리의 의미와 장단점 설명하기

  • 비파괴적 처리 - 처리 후에 원본 내용이 변경되지 않음
    • 메모리가 부족했던 과거에는 표준으로 사용되지 못했으나, 메모리가 여유로운 현대 프로그래밍에서는 자료 보호를 위해 대부분 비파괴적 처리를 사용.

비파괴적 처리로 변경되지 않은 원본

  • 파괴적 처리 - 처리 후에 원본 내용이 변경됨
    • 배열처럼 거대해질 수 있는 자료는 메모리를 절약할 수 있도록 파괴적 처리로 이루어졌음.
    • 메모리를  절약할 수 있지만, 원본이 사라지기 때문에 위험할 수 있음.

파괴적 처리로 변경된 원본

  • 메모리가 부족했던 초기에 파괴적 처리가 표준으로 자리잡았으나, 메모리가 여유로워지면서 비파괴적 처리가 표준화되가고 있음.

II. 선택 미션 - p.173 확인 문제 3번 문제 풀고, 풀이 과정 설명하기 

1, 3번은 변경사항이 없어서 비파괴적 처리, 2번은 변경사항이 있어 파괴적 처리, 4번은 오탈자 (실제 실행결과는 비파괴적 처리)
(4)번의 실제 실행 결과

 

4장 내용의 키워드 정리

 


III. 참고 자료

1. 혼공 자바스크립트 20강 - 4.1절 배열

  • array[1+2] 형태의 배열 정의도 가능
  • 배열 뒤에 요소 추가 method: push()
  • 배열 중간에 요소 추가 method: splice()
    • index와 값으로 추가해줄 수 있음
  • indexOf() - index를 찾는 method, splice()와 연계해 사용하면 편리
  • JS의 경우 타 언어 대비 배열을 처리하는 syntax가 특이한편
  • 한줄평: "쎈" 표현이 나온걸 보니 저자가 해당 주제와 관련해 예전에 겪었던 어려움이 느껴짐

 

2. 혼공 자바스크립트 21강 - 스택, 힙, 비파괴적 처리, 파괴적 처리

  • 기본자료형: 숫자, 문자, 불
    • stack에 저장됨
  • 복합자료형: 배열, 함수 객체
    • heap에 큰 자료들이 저장됨
  • reference, reference 변수
    • C언어 같은 언어는 reference 변수에 주소를 바로 가져왔으나, 요즘 언어들은 보안상 주소대신 실제 값을 가져옴
  • JS의 경우 1995년도 만들어진 언어.  당시 부족한 메모리 활용도를 높이기 위해 배열의 경우 파괴적 처리를 하게됨.  2010년 이후에 추가된 method는 비파괴적 처리를 하게됨.  함수 이름만을 보고는 파괴/비파괴를 알 수 없어 외워야 함.  Ruby의 경우 이름을 통해 구별 가능.
  • 파괴적 처리 vs 비파괴적 처리
    • 파괴적 처리: 원본 변경됨
    • 비파괴적 처리: 원본 변경되지 않음
  • const는 stack에 있는 값을 변경 못하게 함.  배열의 경우는 const로 선언되더라도, 배열의 주소가 저장되므로, 주소는 변경 불가하나 배열의 값은 변경 가능 (stack의 주소는 변경 불가, heap의 내용 조작만 가능).

3. 혼공 자바스크립트 22강 - forof forin for 반복문

  • forof, forin 반복문 - 배열에서 주로 사용
    • code 조각을 사용하면 편리

  • for 반복문 - 범용적으로 사용
    • 반복변수를 반드시 let으로 사용

 

4. 혼공 자바스크립트 23강 - while 반복문

  • for 반복문 대비 조건이 중요할 때 주로 사용되며 다음과 같은 사례가 있음. 
    • 결과가 나올 때까지
    • 특정 시간이 될 때까지
    • 파일을 읽으며 특정 단어를 찾을 때 까지
  • JS는 파일 처리를 하려면 Node.js를 사용해야함.
  • break 키워드
  • continue 키워드
  • break와 continue는 자주 사용하지 않는 편
 

5. 혼공 자바스크립트 24강 - 4장 마무리 + 피라미드 예제

  • 여러 피라미드 형태를 출력하는 중첩 반복문에 대한 예제
    • 꼼수까지 고려해 디테일 있음
    • 반복문은 중첩해서 사용할 수 있고, index 표현식에 계산 등 다양한 형태를 쓸 수 있다는 것을 기억
    • 저자도 여러번 시도해으나 못풀었고, 외워서 결국 해결
  • 확인문제 풀이 및 설명
    • 항등원이 뭘지 한번 생각해보면 좋을 듯
    • p.173 확인문제 3번의 4번 항목 실행 결과에 오탈자
  • 한줄 총평: 강아지 귀염~

 

6. MSDN Web Doc - 'do...while' & 'for await...of'

책에는 설명되지 않은 형태의 반복문이 있어 추가해봄.

1) do...while

do...while 문은 테스트 조건이 거짓으로 평가될 때까지 지정된 구문을 실행하는 루프를 만듭니다.
단, 구문이 실행된 뒤에 테스트 조건이 평가됨으로 구문은 무조건 한 번은 실행됩니다.

문법

구문테스트 조건이 참일 때마다 한 번이상 실행되는 구문입니다. 만약 루프 내에서 여러 구문을 반복 실행 시키고 싶으시다면, 다음 명령을 사용합니다.block 구문을 활용하여 ({ ... }) 이런 식으로 그룹화합니다.조건식루프가 실행될 때마다 평가되는 식입니다. 만약 조건식이 참으로 평가되었다면, 구문 이 다시 실행됩니다. 만약 조건식이 거짓으로 평가되었다면, 자바스크립트는 do...while. 구문 밑에 있는 구문들을 실행시킵니다.

예제

do...while

예제에서 do...while 문은 적어도 한번 반복되고 i 변수가 5 보다 작을 때까지 실행됩니다.

 

2) for await...of

for await...of 구문은 보통 비동기에 대응하는 열거자를 나열할 때 쓰이지만, String, Array, Array 같은 객체 (e.g., arguments or NodeList), TypedArray, Map, Set 같은 동기적으로 열거 가능한 객체 또한 가능하며, 사용자가 직접 정의한 동기 또는 비동기 객체도 나열할 수 있도록 해준다. 일반적인 for ...of 문과 마찬가지로 열거자 심볼이 정의한 속성을 실행하게 되어 열거한 값을 변수로 받아 처리한다.

구문

variable열거할 때마다 variable. 문을 통해 변수로 받을 수 있다. variable 문 안에서는 const, let 및 var. 문으로 선언된 변수 및 상수를 선언할 수 있다.iterable열거 가능한 속성이 들어가 있는 객체 및 식을 포함한다.

비동기 열거 속성을 통한 열거 식

비동기 열거 프로토콜을 담은 객체를 아래와 같이 열거할 수 있다.

비동기 생성자는 애초부터 비동기 열거 프로토콜을 탑재한 채로 정의한다.이를 for await...of 식으로 아래와 같이 사용할 수 있다.

좀 더 상세한 비동기 생성자를 통한 for await...of 식의 사용법을 위해 기본 API를 통해 값을 비동기적으로 열거하는 방법을 알아본다.

아래 예제를 통해 먼저 API를 사용하여 스트림 데이터를 통해 비동기 열거자를 만든 뒤, 스트림에서 응답이 끝나면 최종 응답 데이터 크기를 가져온다.

7. 오탈자 - p.173, 178


공부만 하면 삭막하기만 할 수 있었던 차에, 모처럼 눈이 내렸었네요.  창밖으로 내리는 눈을 배경으로, 따뜻하고 그윽한 향의 커피와 함께, 아주 오래전 극장에서 봤던 'Love Letter'를 다시 한번 보면서 모처럼 '감성 충만'할 수 있어 좋은 한주였었어요.

 

お元気げんきですか、私あたしは元気げんきです!

(잘 지내나요!!! 저는 잘 지내요!!!)

 

 

 

 

응원 스티커 굿즈 가즈아~ 고고~냥~