2024. 5. 20. 배열과 객체 (배열 메소드)

 

 

배열 Array

let 변수 ["하하", 123, "후후후", false, { a: 1 }] [ ] → 대괄호 작성 대괄호 사이에 필요한 데이터 자료형 상관없음 (문자열, 숫자, 불리언, 객체 등) 여러개의 데이터를 한 번에 저장하고 싶을 때 사용 "하하" 부터 인덱스 0 -> 데이터에 접근하고 싶을 땐 변수 우측에 => 변수[0] = "하하"

 

 

객체 Object

let 변수 { 이름: "밤송이", 종: "포메라니안", 나이: 9 } { } → 중괄호 작성 중괄호 사이에 key, value 형식으로 왼쪽이 key, 오른쪽이 value 관련된 데이터를 한 번에 관리하기 위함 Array 와의 차이  Array 는 순서가 존재함 -> 인덱스로 접근가능 [i] object 는 순서가 없으나 키가 존재함 -> key 로 접근 가능 = 변수 ["이름"]

 

 

---

 

const users = [{

    이름: "철수",

    나이: 19,

    성별: "남"

}, {

    이름: "짱구",

    나이: 20,

    성별: "남"

}, {

    이름: "유리",

    나이: 21,

    성별: "여"

}

]

 

배열array 안의 객체object들

 

---

 

 

 

    <div class="userContainer">

    <div class="usercards">

        <h1 class="name"></h1>

        <P class="age"></P>

        <P class="gender"></P>

        <hr/>

    </div>

   

</div>

 

데이터가 들어갈 html 작성

<hr/> 로 구분선 표시

 

const usersContainer = document.querySelector(".userContainer")

const names = document.querySelectorAll(".name");

const ages = document.querySelectorAll(".age");

const genters = document.querySelectorAll(".gender");

users.forEach(function (user) {

    let html = `<div class="usercard">

    <h1 class="name">이름 : ${user.이름}</h1>

    <P class="age">나이 : ${user.나이}</P>

    <P class="gender">성별 : ${user.성별}</P>

    </div>

    <hr/>`;

    usersContainer.insertAdjacentHTML("beforeend", html);

})

 

div 전체를 감싸고 있는 userContainer 는   querySelector  로 변수 지정 (하나)

 

데이터가 들어갈 자리인 name, age, gender 클래스에는 querySelectorAll  로 변수 지정 (여러개)

 

문제1 에서 만든 users 의 데이터를 forEach 메소드로 순회시켜   ${user.}  를 이용해 데이터를 넣어줌

 

html 이라는 변수를 지정해 html 의 div 를 그대로 넣어주고 

 

 usersContainer.insertAdjacentHTML("beforeend", html);   는 userContainer 요소의 끝 부분 바로 앞에 html 을 삽입함을 의미함.

 

 

결과

 

---

 

 

const girl = users.find(user => user.성별 === "여");

console.log(girl)

 

 

 

 

---

 

 

const boy = users.filter(user => user.성별 ==="남");

 

 

 

---

 

 

const newage = users.map((user) => {

    return {

        이름: user.이름,

        나이: user.나이 + 10,

        성별: user.성별,

    }

});

console.log(users);

console.log(newage);

 

 

map 은 foreach 와 다르게 새로운 배열을 만들어 주기 때문에 스프레드 오퍼레이터 없이 사용해도 기존 데이터가 변하지 않음

 

---

 

 

 

const 나이정렬 = [...users].sort((a, b) => {

    return b.나이 - a.나이

})

 

내림차순 b - a
오름차순 a - b

 

sort 는 기존 데이터를 변경하는 함수이기에 스프레드 오퍼레이터 (...) 로 복사본 생성 후 함수를 실행해야 기존 데이터가 바뀌지 않음.

 

 

---

 

 

const 튜터님 = {

    이름: "병수",

    나이: 20,

    주소: "시골",

}

const {이름, 나이, 주소} = 튜터님;

console.log(이름);

console.log(나이);

console.log(주소);

 

 

구조 분해 할당 배열, 객체 안의 데이터를 뽑아쓰다

 

예시

const product = { 상품명: "멋진셔츠", 가격: 10000, }

 

const 상품명 = product.상품명; const 가격 = product.가격;

 

const { 상품명, 가격 } = product;