: key
와 value
의 쌍으로 구성된 데이터
const
와 let
사용
let user = { //속성
name: "홍길동",
age: 30,
isAdmin: true,
printHello: () => console.log("hello!")
};
점 표기법
console.log(user.name); // 홍길동
console.log(user.age); // 30
괄호 표기법
console.log(user['name']);
console.log(user['age']);
let attribute = "name";
console.log(user[attribute]);
리액트에서는 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);
배열의 정의는 알거라고 가정하고,
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]