01. 객체
🚩 객체를 사용해 데이터를 키-값 쌍으로 사용법에 대해 알아보자
1-1 객체의 기본 구조와 문법
기본 정의
객체는 key 와 value 의 한쌍으로 구성된 데이터 구조이다.
(혹은 데이터 타입이라고도 할 수 있다.)
자바스크립트에서는 거의 모든 것이 객체로 다루어진다.
각 key 는 그와 연결된 value를 가리키며,
이를 통해 데이터에 접근할 수 있다.
앞으로 JSON(JavaScript Object Notation) 을 자주 다룰텐데,
이런 json 타입 또한 객체를 이해하고 있으면 쉽게 이해할 수 있다.
객체 선언 및 접근
// 객체는 const 또는 let으로 변수화 시켜 선언합니다.
let react = {
name: "리엑트",
state: 0,
useState: true,
printHello: () => console.log("리엑트")
};
// 객체접근방법1 : dot notation 점 표기법
console.log(react.name); // 리엑트
react.printHello();
// 객체접근방법2 : Bracket Notation 괄호 표기법
// 키 값이 변수일 때 사용합니다.
console.log(react['name']);
1-2 객체 속성
리엑트에서는 state 라는 개념을 사용하기 때문에
js의 예시와 같이 직접적으로 객체의 속성을 삭제하거나 수정하지 않는다.
react 에서는 상태를 불변하게 유지하는 방법을 선호합니다.
따라서 아래의 방법은 정리 정도로만 읽으면 된다.
속성 추가 및 수정
// 속성 추가 방법
user.email = "john.doe@example.com";
user.age = 31;
console.log(user);
// 속성 삭제
delete user.email;
console.log(user);
02. 배열
🚩 배열을 사용하여 순차적 데이터를 저장하고 관리할 수 있다.
2-1 배열의 정의와 기본 작업
배열의 정의
배열은 같은 타입의 여러 데이터를 하나의 변수에 순차적 으로 저장하기 위해 사용한다.
let numbers = [1, 2, 3, 4, 5];
console.log(numbers.length); // 5
요소의 접근과 수정
배열의 요소에 접근하고 요소를 수정하기 위해서는?
console.log(numbers[0]); //배열 접근하기
numbers[2] = 10; //배열 수정하기
console.log(numbers); //[1, 2, 10, 4, 5]03. 주요 메서드
🚩 배열과 객체에 대한 실용적인 코드란?
3-1 객체
Object.keys()
객체의 키만을 추출하여 배열로 반환하는 메서드이다.
const student = {
name: "minjun",
age: 30,
isAdmin: true
};
const keys = Object.keys(student);
console.log(keys); // ["name", "age", "isAdmin"]
Object.values()
객체의 값만을 추출하여 배열로 반환한다.
const values = Object.values(user);
console.log(values); // ["르탄이", 30, true]
Object.entries()
객체의 키와 값을 쌍으로 하는 배열을 반환한다.
const entries = Object.entries(user);
console.log(entries);
// [["name", "르탄이"], ["age", 30], ["isAdmin", true]]
Object.assign()
하나 이상의 출처 객체로부터 대상 객체로 속성 복사할 때 사용한다.
const userDetails = {
occupation: "개발자"
};
Object.assign(user, userDetails);
console.log(user);
// {name: "르탄이", age: 30, isAdmin: true, occupation: "개발자"}
3-2 배열
push, pop
push 는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새 길이를 반환한다.
pop 은 배열의 마지막 요소를 제거하고, 그 요소를 반환한다.
const fruits = ["Apple", "Banana"];
fruits.push("Orange");
console.log(fruits); // ["Apple", "Banana", "Orange"]
const lastFruit = fruits.pop();
console.log(lastFruit); // "Orange"
console.log(fruits); // ["Apple", "Banana"]
map => 중요
map 과 filter 를 잘 알아야 하는 이유는 React를 다루기 위해 매우 중요하다.
map 에서 기억해야 할 것은
- 배열 내의 모든 요소 각각에 대해
- 주어진 함수를 호출한 결과를 모아
- 새로운 배열을 반환 한다.
여기서 새로운 배열을 반환한다는 것은
리액트에서 불변성과 관련하여 큰 의미를 가진다.
따라서 push pop sort 등 기존 배열에 담겨있는 내용을 직접 수정 하기 보다는
불변성을 유지하여 새로운 배열을 생성하여 사용해야 한다.
const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(num => num * num);
console.log(squared); // [1, 4, 9, 16, 25]
map 의 활용방법에 대해 설명한다면 youtube를 예시로 들 수 있다.
비디오 정보는 데이터베이스에 저장되어 있는데 해당 정보를
브라우저에 그려주기 위해선 반드시 map 을 사용해야 한다.
filter
filter 역시 매우 중요한 배열 api라 할 수 있다.
주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환하는 역할을 한다.
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]아래의 예시를 보면 언제 사용하는지 확인할 수 있다.
const 동영상리스트 = [{
아이디: 1,
제목: "동영상01",
썸네일이미지: "image01.jpg"
},{
아이디: 2,
제목: "동영상02",
썸네일이미지: "image02.jpg"
},{
아이디: 3,
제목: "동영상03",
썸네일이미지: "image03.jpg"
}];
const 새로운_필터링_된_리스트 = 동영상리스트.filter(function(동영상) {
return 동영상.제목.includes("01");
});위의 예시를 보면 제목에 01 이라는 단어가 들어간 리스트만
반환하기 위해서 filter 를 사용한 것이다.
유튜브 영상에서도 원하는 결과물을 반환하려면 filter가 제격이다.
reduce
배열의 각 요소에 대해 주어진 함수(reduce 함수)를 실행하고, 결과물을 누적시켜 반환한다.
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 15
sort
sort 함수 는 사용법을 아는 것도 중요하지만, 매커니즘을 이해하는게 중요하다.
어떻게 sort 를 통해 배열의 각 요소가 정렬되는지 생각해보아야 한다.
sort() 메서드는 배열의 요소를 적절한 위치에 정렬하고, 배열을 반환한다.
기본적으로 sort() 는 문자열로 변환된 요소들을 각각의 유니코드 코드 포인트 에 따라 정렬한다.
이는 숫자 정렬시 예상치 못한 결과를 초래할 수 있기 때문에, 숫자 배열을 정렬할 때는
정렬 순서를 정의하는 비교 함수를 제공해주어야 한다.
// 기본 사용법
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
console.log(fruits); // ["Apple", "Banana", "Mango", "Orange"]
// 숫자 배열 정렬
const numbers = [40, 100, 1, 5, 25];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 5, 25, 40, 100]
// 내림차순 정렬
numbers.sort((a, b) => b - a);
console.log(numbers); // [100, 40, 25, 5, 1]