241114 TIL - for...of, 기본값매개변수, 배열에서 특정값 찾기, 개인과제03

for...of

반복가능한 객체의 각 속성값에 접근하는 반복문. Array, String, Map, Set 등등이 iterable한 객체들

/* 기본 구조 */
for (variable of iterable) {
  statement;
}

• variable : 객체의 속성값들
• iterable : 반복가능한 객체

/* 예시 */
let arr = [10, 20, 30];
for (let value of arr) {
  console.log(value);
} // value가 선언된 적 없는 변수인 경우 선언해줘야함. const도 가능

복습한 이유는 소괄호 안에서 variable위치의 매개변수에 선언이 필요하다는 사실을 체험했기 때문이다! 어떻게 알게 됐는지는 묻지 마십시오! 참 힘들었어!

 

 

기본값 매개변수 default parameter

값이 전달되지 않은 매개변수는 undefined를 갖게 되는데, 이를 방지하기 위해 기본값을 설정해줄 수 있다!

/* 기본 구조 */
function fnName(param1 = defaultValue1, /* …, */ paramN = defaultValueN) {
  // …
}

각 param 마다 다르게 defaultValue를 넣어줄 수 있다!

하지만 매개변수에 할당될 값이 입력된다면 기본값은 무시된다!

/* 예시 */
function multiply(a, b = 1) {
  return a * b;
}
multiply(5); // 5*1 -> 5
multiply(5, 2); // 5*2 -> 10, b에 2가 할당됐으니 기본값인 1은 무시!

 

 

배열에 특정 값 존재하는지 체크하는 방법들

	지정값으로 찾음	콜백함수 내 조건으로 찾음
Index값 반환	indexOf() / lastIndexOf()	findIndex()
Boolean값 반환	includes()	some()
지정값으로 찾는 방법은 찾는 값이 기본형 데이터일 때, 콜백함수로 찾는 방법은 찾는 값이 참조형 데이터일 때 잘 어울림

 

[ indexOf() ] 

arr.indexOf(searchElement[, fromIndex]);

• searchElement : 찾고 싶은 값
• fromIndex : 찾기 시작할 인덱스 (기본값 0, 음수면 뒤에서부터)

• Index값 반환 : searchElement와 정확히 일치하는 첫 요소의 "인덱스" / 값이 없으면 -1

 

[ lastIndexOf() ]

arr.lastIndexOf(searchElement[, fromIndex])

• searchElement : 찾고 싶은 값
• fromIndex : 찾기 시작할 인덱스 (기본값 0, 음수면 뒤에서부터)

• Index값 반환 : searchElement와 정확히 일치하는 마지막 요소의 "인덱스" / 값이 없으면 -1

 

[ includes() ]

arr.includes(valueToFind[, fromIndex])

• valueToFind : 찾고 싶은 값
• fromIndex : 찾기 시작할 인덱스 (기본값 0, 음수면 뒤에서부터)

• Boolean값 반환 : 찾고 싶은 값이 있으면 true / 없으면 false
• fromIndex에 arr.length보다 크거나 같은 값이 입력되면 무조건 false 반환

 

[ findIndex() ]

arr.findIndex(callback(element[, index[, array]])[, thisArg])

• callback : 값을 찾을 조건을 지정하는 콜백함수. 얘가 true를 return하는 조건의 element를 찾음
• element : arr 배열의 요소, 콜백함수의 첫 인자
• index : arr 배열의 인덱스, 콜백함수의 두 번째 인자
• array : arr 위치에 배열 대신 Array로 호출됐을 경우 findIndex를 실행할 배열명
• thisArg : 콜백함수 내에서 this를 바인딩할 객체

• Index값 반환 : 콜백함수에서 지정한 조건에 부합하는 첫 요소의 "인덱스" / 값이 없으면 -1

 

[ some() ]

arr.some(callback(element[, index[, array]])[, thisArg])

• callback : 값을 찾을 조건을 지정하는 콜백함수. 얘가 true를 return하는 조건의 element를 찾음
• element : arr 배열의 요소, 콜백함수의 첫 인자
• index : arr 배열의 인덱스, 콜백함수의 두 번째 인자
• array : arr 위치에 배열 대신 Array로 호출됐을 경우 findIndex를 실행할 배열명
• thisArg : 콜백함수 내에서 this를 바인딩할 객체

• Boolean값 반환 : 콜백함수에서 지정한 조건에 부합하는 요소가 하나라도 있으면 true / 단 하나도 없으면 false

 

오늘 한 작업

@ joke 메서드 개편 및 친밀도 계산식 변경

[update] 1. joke 메서드 개편

- 캐릭별 특성 적용해 친밀도 증감폭 다르게 구현

[fix] 1. 상호작용 친밀도 계산식 변경

- 난이도 조정 위해 round(반올림)에서 trunc(소수점이하 삭제)로 변경

 

@ 장면전환 대기 기능 추가 및 메서드 오류 수정

[update] 1. 장면 전환 확인을 위한 cutaway 함수 구현

- Promise를 반환해 await을 먹일 수 있도록 설계

- 1을 눌러 다음 장면으로 넘어갈 수 있도록 함

2. 이벤트별 적절한 장면 전환 코드 추가

- 상황에 맞는 텍스트와 cutaway함수로 구성

- 장면 전환 경우들을 조건문으로 일괄 처리하도록 개편

3. 고백 실패 이벤트 텍스트 기본형 추가

- failTexts 추가 및 성공 이벤트 변수 명 수정

[fix] 1. talk메서드에서 게임 화제 골랐을 시 1만 오르는 문제상황 해결

- 친밀도 계산을 조건문 로직 각각에 분할해 넣음

 

@ 게임광엔딩 기능 구현

[update] 1. 히든엔딩용 display 함수 추가

- 내방 씬과 교실씬, 스테이터스 정보를 제거한 display 추가

2. 스테이지 도중 게임 중단을 위한 불리언 변수 isGameEnd 추가

- 게임광엔딩 또는 게임오버 시 true로 변하도록 투입

- stage 반복문에서 장면 전환마다 true인지 체크하고, 참이면 반복문 빠져나가도록 구현

3. 엔딩화면 위해 Endcard 함수 추가

-figlet 활용해 the end 출력 및 재시작과 게임 종료 선택

4. 게임광 엔딩 루트를추가

-gameEnding() : 히든엔딩용 display함수 실행 후 게임엔딩 이벤트씬 실행

- 내방 씬에서 게임실력이 120 이상이 될 경우 반복문 나가고, 히든 엔딩 루트 시작하도록 이벤트씬 작동

[fix] 1. 자주 활용되는 함수의 선언부 상단으로 옮김

-funcEnd, wait, eventScene, cutaway

2. classmate 이미지 정렬 용이하게 하기 위해 변수명에 숫자 추가함

- 스테이지 숫자에 따라 오름차순으로 지정

[refactor] 1. 스테이지 별 다른 classmate 이미지 출력하는 방식 변경

- import한 아스키 이미지들에서 classmate 이미지만 추출해 배열화

- stage 값을 비교하는 switch문 제거하고, 추출해 만든 배열의 인덱스를 stage로 접근하도록 변경

 

@ 인기쟁이 엔딩 구현

[update] 1. 연인 속성인 캐릭터들 모아놓는 배열인 dates 추가

- 다른 함수나 배열과 연동 쉽도록 stage 값에서 1을 빼서 인덱스 값과 일치하도록 보관

-고백 성공 이벤트 발동 때  push 받도록 설계함

2. 엔딩별 다양한 텍스트 기본형 추가

- text.js에 쌓여가는 문자열...

3. startGame 함수 대폭 개편

- 함수 실행마다 isHidden, isGameEnd, dates 등의 변수들 초기화해주도록 함

- 엔딩이 겹치지 않도록 각 엔딩 분기를 조건문을 활용해 분리함

- 인기쟁이 엔딩 추가 : 리팩토링이 급하다....

[fix] 1. simpledisplay 교실 씬 함수 수정

- 다양한 상황에 활용할 수 있도록 배열과 텍스트를 매개변수로 받도록 함

2. 게임광 엔딩 조건 조절

-계속 게임만 한 경우 3일차 내방씬에서 달성되도록 수정

 

 

오늘 만난 문제 상황

[ 끊임 없는 버그로 인한 정신력 소모 ]

 한 가지 특정 사건이 있었던 건 아니지만, 의도한대로 작동하지 않는 경우가 잦아서 힘든 하루였다. 말미엔 집중이 다 흐트려져서 무념무상으로 과제로 만든 게임을 하고 있었던 수준...

 오늘은 엔딩 구현이 가장 큰 목표였다. 장면 전환 대기도 엔딩 구현 및 UX를 위해 구상했고 무튼, 결과적으론 모든 엔딩을 의도한대로 구현하긴 성공을 했는데, 약간 물이 새는 구멍을 막아도 막아도 다른 곳에서 물이 새는 느낌으로, 뭐를 해결하면 뭐가 터지고의 반복인 하루였다.

 그도 그럴 것이 엔딩 구현 및 장면 전환은 기존 코드 중간중간에 조건문이나 비동기 작업 꼴로 끼어들어야 하는 작업이었기 때문에, 개입을 상정하지 않았던 함수 같은 경우엔 대폭 갈아 엎는 경우도 있었고, 조건 설정이 미흡해 함수가 중첩 작동하는 경우도 비일비재했다. 

 또 개인적으로 스트레스 받았던 점은 코드가 점점 더 지저분해지고 있다는 것이었다. 경험 부족 탓이겠지만, 일단 새는 곳을 틀어막고 틀어막고 하다 보니 급히 살을 붙여 해결하는 경우가 잦았고, 주석도 명확하지 않게 기록하고 있고... 그 짧던 스크롤이 이렇게나 길어졌나 싶고, 하나의 함수가 한 화면에 다 들어오지 않는 녀석도 몇 있는데, 볼 때마다 한숨 뿐이다.

 다만 긍정적으로 생각되는 점은 애초에 코드를 시작하기 전에 구조를 미리 다 생각하고 들어가는 것이 중요하겠다는 것을 깨달았다는 거 하나! 그리고 최대한 재사용성 높게 함수를 기획하면 스스로 편하다는 거 하나! 주석은 일기장이 아니라는 것 하나! 등등을 깨달았다는 거다.

 사람은 역시 당해봐야 안다! 좋은 경험하고 있다고 생각한다. 내일은 과제 마무리 겸 리팩토링을 목표로 하고 있다. 아마 오늘보다 더 머리 싸매는 일이 많을지도 모르겠지만, 내가 싼 똥... 내가 치우는 거다!