JavaScript - 배열메소드, 구조 분해 할당

📚 복습

전역심볼
하나의 심볼을 보장받을 수 있다.
이름 얻기: Symbol.keyfor()
전역 심볼이 아닐경우 이름 얻기: description()

slice(n,m): index n부터 m까지 문자열 뽑아내기
substr(n,m): index n부터 m개를 뽑아내기
substring(n,m): index n과 m사이의 문자열 뽑아내기, 음수 0으로 인식, n과 m을 바꿔도 인식

💘 배열 메소드

✨ Array 기본 메소드

push() : 뒤에 삽입
pop() : 뒤에 삭제
unshift() : 앞에 삽입
shift() : 앞에 삭제

⚡ splice( ): 특정 요소 지우고, 추가, 반환

arr.splice(n,m); // n번부터 m개 지워라

let arr = [1,2,3,4,5];
arr.splice(1,2);
console.log(arr); // [1, 4, 5]


arr.splice(n,m,x) // n번부터 m개 지우고 x 추가

let arr = [1,2,3,4,5];
arr.splice(1,3, 100, 200);
console.log(arr); // [1, 100, 200 ,5]

let arr = ["나는", "쥬비", "입니다"];
arr.splice(1, 0, "대한민국", "개발자"); // ["나는", "대한민국"", "개발자", "쥬비", "입니다"]


let result = arr.splice(n,m): // 삭제하는 요소 반환

let arr = [1,2,3,4,5];
let result = arr.aplice(1,2);
console.log(arr); // [1,4,5]
console.log(result); // [2,3]

⚡ slice( ): 요소 반환

arr.slice(n,m) // n부터 m까지 반환

let arr = [1,2,3,4,5];
arr.slice(1,4); // [2,3,4]

let arr2 = arr.slice();
console.log(arr2); // [1,2,3,4,5] 

➕ concat( ): 합쳐서 새 배열 반환

arr.concat(arr2,arr3) // 합쳐서 새배열 반환

let arr = [1,2];
arr.concat([3,4]); // [1,2,3,4]
arr.concat([3,4],[5,6]); // [1,2,3,4,5,6]
arr.concat([3,4],5,6); // [1,2,3,4,5,6]

💫 forEach( ): 배열 반복

users.forEach(fn);

let users= ["jubby", "ohwa", "sha", "nature"];
users.forEach((item, index, arr) => {
	// 배열 반복해서 item과 index 반환
  	console.log(`${index + 1}. ${name}`);
});

🌂 indexOf( ), lastIndexOf( ): 인덱스 반환

let arr = [1,2,3,4,5,1,2,3];
arr.indexOf(3); // 2
arr.indexOf(3,3); // 7, 인덱스 3부터 '3'을 찾는다.
arr.lastIndexOf(3); // 7, 뒤에서부터 '3'을 찾는다.

⚡ includes( ): 포함하는지 확인

arr.includes(2); // true, 포함하면 
arr.includes(8); // false, 포함하지 않으면

👓 find( ), findIndex( ): 찾기

arr.find(fn); // 첫번째 true 값만 반환한다. 없으면 undefined 반환
const result = arr.find((item) => {
  return item % 2 === 0; // true일때 멈추고 해당 값!을 알려준다
});
console.log(result) // 2

let userList = [
  { name: "jubby", age: 25 },
  { name: "ohwa", age: 27 },
  { name: "sha", age: 10 },
];

const result = arr.find((user) => {
  if (user.age < 19) {
    return true; // true일때 멈추고 해당 값을! 반환한다.
  }
  return false;
});

console.log(result); // { name: "sha", age: 10 }

arr.findIndex(fn); // 첫번째 ture 값만 반환, 없으면 -1 반환
const result = arr.findIndex((user) => {
  if (user.age < 19) {
    return true; // true일때 멈추고 해당 인덱스를! 반환한다.
  }
  return false;
});
console.log(result); // 2

👓 filter( ): 모든 요소 찾기

arr.filter(fn);
const result = arr.filter((item) => {
  return item % 2 === 0; // 만족하는 모든 요소를 배열로 반환한다.
});
console.log(result) // [2,4,6]

🌊 reverse( ): 역순으로 재정렬

let arr = [1,2,3,4,5];
arr.reverse(); // 역순으로 재정렬, [5,4,3,2,1]

🎈 map( ): 함수를 받아 특정 기능을 시행하고 새로운 배열을 반환

arr.map(fn); // 함수를 받아 특정 기능을 시행하고 새로운 배열을 반환

let userList = [
  { name: "jubby", age: 25 },
  { name: "ohwa", age: 27 },
  { name: "sha", age: 10 },
];

let newUserList = userList.map((user, index) => {
  return Object.assign({}, user, {
    id: index + 1,
    isAdult: user.age > 19,
  });
});

console.log(newUserList); 
// { name: "jubby", age: 25, id: 1, isAdult: true },
// { name: "ohwa", age: 27, id: 2, isAdult: true },
// { name: "sha", age: 10, id: 3, isAdult: false },

🎈 join( ), split( )

let arr = ["안녕", "나는", "철수야"];
let result = arr.join("-"); // 안녕-나는-철수야

const name = "jubby,ohwa,sha,nature";
const result = name.split(","); // ["jubby", "ohwa", "sha", "nature"];
name.split(""); // 한글자씩 다 반환(공백까지)

🎈 isArray( ):

Array.isArray(arr); // 배열이면 true, 아니면 false
console.log(typeof arr); // Object 로 나오기 때문

🎱 sort( ): 배열 재정렬

arr.sort(); // 배열 재정렬, 배열자체가 변경된다.
// 대신 숫자는 문자열로 취급함 그래서 함수를 인자로 보내준다.
function fn(a,b) {
	return a-b;
} 
arr.sort(fn);
arr.sort((a,b) => {
	return a-b; //b가 a보다 작으면 앞으로 보내는 형식
});

그래서 Lodash 라이브러리를 사용한다.
_.sortBy(arr);

📟 reduce( )

arr.reduce(fn) // (누적 계산값, 현재값) => {return 계산값 };

// forEach: 배열의 모든 수 합치기
let arr = [1,2,3,4,5];
let result = 0;
arr.forEach(num => {
  result += num;
});

// reduce: 배열의 모든 수 합치기
const result = arr.reduce((prev, cur) => {
	return prev + cur
}, 0);

// reduce
let userList = [
  { name: "jubby", age: 25 },
  { name: "ohwa", age: 27 },
  { name: "sha", age: 10 },
];

let result = userList.reduce((prev, cur) => {
  if(cur.age > 19) {
    prev.push(cur.name);
  }
  return prev; // ["jubby", "ohwa"]
}, []);

arr.reduceRight(); // 배열 우측부터 연산

✨구조 분해 할당 (Destructuring assignment)

구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식

// 배열 구조 분해
let [x, y] = [1, 2];

console.log(x); // 1
console.log(y); // 2

let name = ["jubby", "ohwa", "sha", "nature"];
let [user1, user2, user3, user] = name;

console.log(user1); // "jubby"

let str = "jubby-ohwa-sha-nature";
let [user1, user2, user3, user] = str.split('-');


//기본 값 설정
let [a,b,c] = [1,2] // c=undefined
let [a=3, b=4, c=5] = [1,2]; // a=1, b=4, c=5

//일부 반환값 무시
let [user1, , user2] = ["jubby", "ohwa", "sha"]; // user1="jubby", user2="sha"

//바꿔치기
let a = 1;
let b = 2;

[a, b] = [b, a];

// 객체 구조 분해
let user = {name: "jubby", age:25};
let {name, age} = user; // name="jubby", age=25
let {age, name} = user; // name="jubby", age=25 , 똑같이 작용

//새로운 변수 이름으로 할당
let {name: userName, age: userAge} = user;

// 기본 값 설정
let {name, age, gender} = user; // gender=undefined
let {name, age, gender="female"} = user; // gender="female"

let user = {name: "jubby", age:25, gender: "male"};
let {name, age, gender="female"} = user; // gender="male"