[TIL] 240618 캠프 65일차: JS 배열 사용법(특정 속성의 특정 값을 통해 객체 반환, forEach(elem, index, array))

오늘 배운 내용                                     

객체가 들어있는 배열에서 특정 속성이 특정 값을 가지는 지 확인하는 법

배열에 객체가 들어있는 경우, 객체가 가지는 속성 중 특정 속성이 가지는 값으로 필터링하고 싶을 때가 있다. 이번 과제에서 몬스터 정보가 객체로 담겨있는 배열에서 몬스터 아이디를 통해 해당 객체를 가져오고 싶었는데 어떻게 해야할 지 몰랐다가 검색을 통해 알 수 있었다. 해결한 방법은 다음과 같다.

// find안에 다음과 같이 함수를 넣으면 객체 안의 속성 인 id가 monsterId와 일치하는 객체만 가져오게 된다.
const monsterData = MONSTER_CONFIG.find(monster => monster.id == monsterId);

 

array.forEach(elem, index, array)

자바스크립트에서 array.forEach메소드는 다양한 형태로 사용할 수 있는데, 위 제목과 같이 3개의 params를 받을 수 있다. 각각의 변수가 의미하는 바는 다음과 같다.

• elem: array타입에 들어있는 원소
• index: 해당 원소가 들어있는 인덱스
• array: 해당 배열

const numbers = [3, -1, 1, 4, 1, 5];
numbers
  .filter((num) => num > 0)
  .forEach((num, idx, arr) => {
    // Without the arr argument, there's no way to easily access the
    // intermediate array without saving it to a variable.
    // 0보다 큰 원소와 양쪽 원소의 값을 왼쪽에 가까운 순으로 출력한다.
    console.log(arr[idx - 1], num, arr[idx + 1]);
  });
// undefined 3 1
// 3 1 4
// 1 4 1
// 4 1 5
// 1 5 undefined

 

핸들러와 헬퍼의 의미

핸들러는 이벤트가 발생했을 때, 수행하는 로직(함수와 같은)들을 다루는 존재들을 의미하며,

헬퍼는 복작합 로직을 단순화하는데 도움을 주는 존재들을 의미한다. 헬퍼같은 경우, 기능을 구현하는데 꼭 필요하지는 않지만, 핸들러의 개수가 많아지면 모든 핸들러에 대해 이벤트 처리하는 코드가 많아질 수 있으므로 보다 단순하고 정리된 코드흐름을 가져가기 위해서는 만들어두는 것이 좋다.

 

오늘 한 일                                       

• 클라이언트와 서버가 가질 게임 규칙과 연관된 json파일(ex. monster.json)제작
• 해당 json파일을 통해 클라이언트 게임 프로그램에 적용되도록 game.js파일 변경