TIL 26 / 27일차

minjun kim·2024년 10월 25일

배열 구조 분해 Array Destructuring

let fruits = ["apple", "banana", "cherry"];

const [first, second, thrid] = fruits;
first === fruits[0]

나머지를 보내고 싶다면?

const [first, ...rest] = fruits;
console.log(rest);
했을 때 처음을 제외하고 나머지만 분류할 수 있다.
단 항상 rest는 마지막에 위치하고 있어야 한다.
(배열로써 리턴해준다.)

객체 구조 분해 (Object Destructuring)

배열과 객체의 다른 점은
객체의 경우는 순서가 중요하지 않다.
대신 key의 값이 일치해야만 한다 반드시!

여기도 ...rest가 있는데
마찬가지로 객체로써 return을 해준다.

구조분해를 꼭 해야 하는가?
성능에 지장은 없으니 내가 편한 방법으로 상요하기

let person = {name:"Alice",eidueiduage:"22",city:"nework"};

let {name, eidueiduage : age} = person;
이런 아래의 방법으로 key명을 바꿔줄 수도 있음.

const obj1 = {name : '강민', age: 30, city : 'seoul'};
const obj2 = {...obj1, address: "15-3939"};

console.log(obj2);

이렇게 객체를 복사를할 때 spread operator, ... 을 잘 쓸 때
객체나 배열 복사를 할 때 편리하게 복사를 할 수 있음.
그래서 그냥 {} 나 []에 ... 이 있다면
아하 이걸 다 가져와서 복사해서 새롭게 사용하려 하는구나로 알아야 한다.

const obj2 = {...obj1, name : '호준'};
이렇게 사용하면 key의 value에 접근해서 value값을 바꿔줄 수 있다.
이들은 새로운 주소로 할당을 받는거임

절대 레퍼런스를 복사하면 안된다.
const obj2 = obj1 이런식으로가 안된다. => 배열도 마찬가지
참조하는 프로그래밍보다 독립적인 데이터를 가지고 있게 하는게

코드가 밑으로 쭉 내려갔을 때 디버깅이 힘들어짐

즉 빈 객체나 배열을 담아줘서
안전하게 진행해주면 된다
왜냐 이제는 브라우저가 성능이 많이 좋아져서
안정성에 더 집중하게 된 것이다.

1. 배열의 변경 메서드 (Mutable Methods)

push() 메서드
push를 해서 메서드에 값을 넣어줄 수 있다.

animals.push('tiger','lion'); 이렇게 한번에 넣어줄 수도 있음
animals.push(['tiger','lion']); 만약 이렇게 넣음면 어떻게 될까?

에러가 뜨지 않고 배열에 감싼 상태로 들어가니
push는 다 때려넣기 때문에 넣고 싶으면 그 내용만 넣으면 된다.

pop()

let numbers = [1,2,3,4,5,6];
numbers.pop();

마지막요소를 빼낸다 근데 이 pop이 재밌는게
마지막요소를 빼낸 값을 본인이 가지고 있음.
console.log(numbers.pop());

이렇게 했을때 6과 [1,2,3,4,5] 가 같이 출력됨..

const number = numbers.pop();
그래서 빼낸 값을 변수로 지정할 수 있음!

shift()메서드는 pop()의 정반대
shift는 첫번째 요소를 빼난다

그냥 맨뒤에서 뽑는 메서드와 맨앞에서 뽑는 메서드가 있다고 기억하기

unshift() 는 맨 앞에다 추가하는 메서드

fruits.unshift('grape'); 이고
fruits.unshift('grape','yeahe'); 이렇게도 연결지어 가능하다.

sort() 메서드 문제

sort는 기본 값을 가지고 있기 때문에 기본 값 만으로 정렬이 되긴 함
기본 정렬을 원한다면 sort() 만 사용해도 됨
sort((a,b) => a-b) // numbers.sort()

그러나 내림차순을 할 때는 (a,b) => b - a

근데 문자길이 만큼 나열한다면
words.sort((a,b) => a.length-b.length);
이런식으로 (a,b) => a.length-b.length 로 콜백해서
리턴을 시켜주는 작업 즉 콜백함수다.

students.sort(function(a, b) {
    return a.age - b.age;
})

이게 콜백함수 버전의 sort를 해체했을 때의 모습이다.
단순히 (a,b) => a.age - b.age 로 보기보다는

sort가 화살표 함수버전으로 보여지니까 원본도 알고 있어야 한다.
만약 원본버전에서 return이 없다면 값은 나오지 않는다.
콜백함수는 어떤 값을 return 하는지가 매우 중요하다.

sort는 일종의 반복이여서 알고리즘 때 반복으로 생각해야 함

2. 배열의 비변경 메서드

concat 메서드 문제

let arr1 = [1,2];
let arr2 = [3,4];

console.log(arr1.concat(arr2));

let letters = ["A","B","C","D"];
console.log(letters.concat("E",["F","G"]));

이렇게 배열형태로 감싸도 다 벗겨져서 들어가게 된다.

slice() 메서드 문제

let animals = ["Dog","Cat","Tiger","Elephant","Zebra"];
console.log(animals.slice(-3));

이렇게 했을 때 뒤에서 -3이라서
이렇게 인자를 하나만 두고도 사용할 수 있다.

정수 3을 사용하면 index넘버 3부터 시작하고 알아서 끊는다.

join()

배열을 하나로 합쳐서 다 문자열로 만드는 요소

let words = ["Hello","world","this","is","JavaScript"];
console.log(words.join("-"));

이런식으로 그냥 join하면 콤마까지 보여준다.

includes()

배열에 특정요소가 포함되어있는지 확인하는 메서드
그리고 확인하면 있으면 true 없으면 false 를 뱉는다.

map()

const newNumbers = numbers.map((numbers)=>numbers*10);

풀어서 작성하면

numbers.map(function(number){
    return number * 10
});

sort와 마찬가지로 화살표 함수로 생략되어 있고
number 부분은 순회하는 값이다. 마찬가지로 return을 내포하고 있다.
그리고 map의 결국 return뒤에 오는 값이 결국 배열에 return된다.

왜냐면 map에서 대문자처리나 소문자처리를 하게 될 경우
화살표 함수에서도 괄호를 치고{} 연산을 해야 한다.
그리고 중괄호를 치면 return을 꼭 써줘야 한다.
중괄호 생략이 return도 같이 생략인데 중괄호 쓴 순간 return은 사용이 안된다.

forEach() 메서드 문제

let people = [
    {name:'alice',age:25},
    {name:'bob',age:30},
    {name:'charlie',age:35}
];

people.forEach((p)=>{
    console.log(p.name,p.age);
});

순회하면서 배열의 정보를 모두 보여줌

filter() 메서드

로직을 짤 때 결과값이 true이면
그때 변경된 값을 배열에 새로 return해준다

그래서

let ages = [12, 18, 20, 15, 30, 22];
ages.filter(function(age){
    // age = 12
    if (age > 18) {
        return true;
    }
})

이런식으로 조건이 성립할 때 true를 리턴하면?
true가 들어가는게 아닌 그 당시의 ages의 값이
새로운 배열을 만들어낸다.

그래서 이런 값들을 변수에 할당도 가능하다.

let products = [
{name:'laptop',price:1200,category:'electronics'},
{name:'shoes',price:100,category:'clothing'},
{name:'smartphone',price:800,category:'electronics'},
{name:'lt-shirt',price:20,category:'clothing'},
];

// const newProducts = products.filter((p) => {
//     if (p.category === 'electronics') {
//         return true;
//     }
// });

const newProducts = products.filter((p) => {

    if (p.price >= 100){
        return true;
    }
})

console.log(newProducts);

return을 하는 값을 요소에 추가되기 때문에
조건을 여러개 만들어도 됨
filter안이 복잡해져도 상관이 없고, 원하는 로직을 구현하면 됨

products.filter((p) => {

    if (p.price >= 100){
        return true;
    }
    if (products.price < 30) {
        return true;
    }
}).forEach((product)=>{
    console.log(product);
})

이런식으로도 붙일수는 있다 길어져도 가독성을 따라가면 좋다.