[React] 객체와 배열

1. 객체의 기본 구조와 문법

객체

: key와 value의 쌍으로 구성된 데이터

선언 방법

const 와 let 사용

let user = { //속성
  name: "홍길동",
  age: 30,
  isAdmin: true,
	printHello: () => console.log("hello!")
};

객체 접근방법 1

점 표기법

console.log(user.name);  // 홍길동
console.log(user.age);   // 30

객체 접근방법 2

괄호 표기법

console.log(user['name']);
console.log(user['age']);

let attribute = "name";
console.log(user[attribute]);

1-2. 객체 속성

리액트에서는 state를 사용해서 직접적으로 객체의 속성을 삭제, 추가, 수정하는 것 보다 상태를 불변하게 유지하는 방법을 선호

속성 추가

객체에 존재하지 않았던 "새로운" 속성을 넣고싶을때

let user = {
  name: "홍길동",
  age: 30,
  isAdmin: true,
  printHello: () => console.log("hello!"),
};

user.email = "example@naver.com"; // 추가

결과

email이 추가된거 확인 가능

속성 변경

let user = {
  //속성
  name: "홍길동",
  age: 30,
  isAdmin: true,
  printHello: () => console.log("hello!"),
};

user.age = 31; // 수정

결과

age:30에서 age:31로 바뀐거 확인 가능

속성 삭제

delete 키워드 사용
user에서 isAdmin 속성을 삭제하고 싶다!

delete user.isAdmin; 
console.log(user);

isadmin이 삭제된거 확인 가능

주요메서드

Objects.keys() : 객체의 키만 추출해서 배열로 반환

//(1) objects.keys()
const user = {
  //속성
  name: "홍길동",
  age: 30,
  isAdmin: true,
};

const keys = Object.keys(user);
console.log(keys);

object.values() : 객체의 값만 추출하여 배열로 반환

const user = {
  name: "홍길동",
  age: 30,
  isAdmin: true,
};

const values = Object.values(user); 
console.log(values);

Object.entries(): 객체의 키와 값을 쌍으로 하는 배열을 반환

const user = {
  name: "홍길동",
  age: 30,
  isAdmin: true,
};

const entries = Object.entries(user);
console.log(entries);

Object.assign(): 객체로부터 대상 객체로 속성을 복사

const user = {
  name: "홍길동",
  age: 30,
  isAdmin: true,
};

const userDetails = {
  occupation: "개발자"
};
Object.assign(user, userDetails);
console.log(user);

2. 배열

배열의 정의는 알거라고 가정하고,

요소의 접근과 수정

console.log(numbers[0]); //배열 접근
numbers[2] = 10; //배열 수정
console.log(numbers); //[1, 2, 10, 4, 5]

주요 메서드

push : 배열의 끝에 하나 이상의 요소 추가 -> 배열의 새 길이를 반환

const fruits = ["Apple", "Banana"];

//orange 추가 밀어넣기
fruits.push("Orange");
console.log(fruits);

pop : 배열의 마지막 요소 제거하고 요소 반환

const lastFruit = fruits.pop(); // pop해서
console.log(lastFruit); //pop()된게 들어옴
console.log(fruits); // 끝의 요소 삭제

map
1) 배열내의 모든 요소 각각에 대해
2) 주어진 함수를 호출한 결과를 모아
3) 새로운 배열을 반환

const numbers = [1, 2, 3, 4, 5];
//const squared = numbers.map(주어진 함수);
//const squared = numbers.map(function(이름));
const squared = numbers.map(function (num) {
  return num * num;
});
console.log(squared); // [1, 4, 9, 16, 25];
//이런 새로운 배열이 squared에 담김

filter : 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환

const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers);  

제목에 ‘01’이라는 단어가 들어간 리스트만 반환하고 싶다

const 동영상리스트 = [{
	아이디: 1,
	제목: "동영상01",
	썸네일이미지: "image01.jpg"
},{
	아이디: 2,
	제목: "동영상02",
	썸네일이미지: "image02.jpg"
},{
	아이디: 3,
	제목: "동영상03",
	썸네일이미지: "image03.jpg"
}];

const 새로운_필터링_된_리스트 = 동영상리스트.filter(function(동영상) {
	return 동영상.제목.includes("01");
});

reduce: 결과물을 누적시켜 반환

numbers.reduce(function (누적된값, 일반값)

const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum);  // 15

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]

내림차순 정렬

const numbers = [40, 100, 1, 5, 25];
numbers.sort((a, b) => b - a);
console.log(numbers);  // [100, 40, 25, 5, 1]