🐤[베이직] 배열과 객체

0. 기본정보

#스파르타코딩클럽 #부트캠프 #24일/94일
- 학습주제: [베이직 3rd] 자바스크립트 배열과 객체

- 학습내용: Array(배열), Object(객체) 자료형, 데이터에 따라 HTML을 변경하는 방법, 다양한 배열 메소드, Spread Operator, destructuring

- 특별사항: 코딩테스트 라이브 OT - 탐험반 신청했으나 취소 예정 ==> 지금은 "기능 구현"이 우선!
- 학습일: 2024. 5. 20.

---

1. 배운 내용 요약 - 과제 위주

[베이직 3rd] 강의 목차

- 노션 링크: https://daffy-slime-268.notion.site/4-cc20d48a3561471bb7ba953cfcf03363

1. Array(배열), Object(객체) 자료형 설명
2.  데이터에 따라 HTML을 변경하는 방법 : forEach, 템플릿 리터럴(``백틱)
3. 다양한 배열 메소드 : find, filter, map, sort
4. Spread Operator(...)
5. destructuring
6. LocalStorage 사용법 ---> 다음 시간에 이어서

[베이직 3rd] 과제 목차

- 노션 링크: https://daffy-slime-268.notion.site/4-1a5238f2e7a94402a03fec694a230768

1. 배열과 객체 만들기
2. 데이터를 HTML에 보여주기
3. find 메소드
4. filter 메소드
5. map 메소드
6. sort 메소드
7. 로컬스토리지 사용하기 ---> 다음 시간에 이어서

 

문제1) 배열과 객체 만들기

다음 사진과 같이 3명의 이름, 나이, 성별에 대한 정보가 존재합니다. 다음의 정보를 배열과 객체를 활용하여 하나의 변수에 담고, 해당 변수를 console.log로 출력하세요.

 

나의 답변)

const users = [
  { name: "철수", age: 19, gender: "남" },
  { name: "짱구", age: 20, gender: "남" },
  { name: "유리", age: 21, gender: "여" },
];

 

 

문제2) 문제1에서 만든 데이터를 html에 보여주기 - forEach

문제1에서 만든 객체들의 배열을 이용하여 html에 다음과 같이 보여주세요.

나의 답변) --- for문보다 forEact가 훨씬 편하다 (이유: 문자열의 길이에 따라 자동으로 반복됨)

const userList = document.querySelector(".userList");

users.forEach((user) => {
  let template = `<div class="card">
  <h1 class="name">이름: ${user.name}</h1>
  <h3 class="age">나이: ${user.age}</h3>
  <h3 class="gender">성별: ${user.gender}</h3> 
  </div>`;
  userList.insertAdjacentHTML("beforeend", template);
});

// CSS

.card {
  border-bottom: 1px solid blue;
}

 

 

문제3) find 메소드

문제1에서 만든 객체들의 배열을 활용하여 성별이 여자인 데이터를 한 명 찾아 콘솔에 출력해보세요.

나의 답변) --- return문이 find의 조건이다

const findGirl = users.find((user) => user.gender === "여");
console.log(findGirl);

 

 

문제4) filter 메소드

문제1에서 만든 객체들의 배열을 활용하여 성별이 남자인 데이터를 필터링하여 콘솔에 출력해보세요.

나의 답변) --- return문이 filter의 조건이다

const findBoys = users.filter((user) => user.gender === "남");
console.log(findBoys);

 

 

문제5) map 연습 문제

• 문제1에서 만든 객체들의 배열을 활용하여 모든 데이터의 나이에 10을 더한 새로운 배열을 콘솔에 출력해보세요.
• 단, 문제1에서 만든 기존 데이터는 변경되면 안됩니다.
• 기존 데이터가 변경되지 않았는지 확인하기 위해 기존 데이터와 새로운 배열을 모두 콘솔에 출력해보세요.

나의 답변) --- 새로운 배열을 반환하기 때문에 return에 반환할 객체 양식을 만들어주어야 한다

const plusAges = users.map((user) => {
  return {
    name: user.name,
    age: user.age + 10,
    gender: user.gender,
  };
});
console.log(plusAges);

 

 

문제6) sort 연습 문제

• 문제1에서 만든 객체들의 배열을 활용하여 나이순으로 정렬해보세요. (내림차순으로 정렬)
• ⚠️ sort는 기존의 데이터를 변경하는 함수입니다. spread operator로 복사본 생성 후 진행해보세요.
• 기존 데이터가 변경되지 않았는지 확인하기 위해 기존 데이터와 새로운 배열을 모두 콘솔에 출력해보세요.

나의 답변) --- 아래는 내림차순이고, 반대로 오름차순은 sort 함수에서 return a.age - b.age

let newUsers = [...users];
newUsers.sort((a, b) => {
  return b.age - a.age;
});
console.log(users);
console.log(newUsers);

---

3. 오늘의 회고

- 칭찬: 7시간 숙면, 식후 카페인 섭취(총 세 잔) 덕분에 집중력 최고!

- 반성: (없음)

- 보충: 내일부터 React 숙련 강의 1회독 시작!