🏃🏻‍♀️ 표준 내장 객체

[ Array, 배열 ]

🏰 const array;

const numName0 = ['One', 'Two', 'Three'];
const numName1 = ['Four', 'Five', 'Six'];


const users = [
    {name: 'Poppy', age: 35},
    {neme: 'GguGGu', age: 3},
    {name: 'An84', age: 40}
]

- .length();

배열의 아이템 갯수를 반환

console.log(numName0.length); // 3

- .at(num);

배열의 인덱싱기능과 같으나 추가 기능으로 음수를 사용해 백카운팅을 하여 배열의 맨뒤(-1)부터 접근가능

console.log(numName0.at(0)); // One 
console.log(numName0.at(-1)); // Three
console.log(numName0.at(-3)); // One
console.log(numName0.at(-4)); // undefined

- .concat(array);

대상배열 뒤쪽으로 이어서 인수로 배열을 병합해 새로운 배열데이터로 반한

console.log(numName0); // (3) ['One', 'Two', 'Three']
console.log(numName1); // (3) ['Four', 'Five', 'Six']

const numName2 = numName0.concat(numName1); 
console.log(numName2); // (6) ['One', 'Two', 'Three', 'Four', 'Five', 'Six']



// 전개연산자를 사용해서도 병합가능
const spreadNumName = [...numName0, ...numName1];
console.log(spreadNumName); // (6) ['One', 'Two', 'Three', 'Four', 'Five', 'Six']

- every(callBack);

• 인수로 함수데이터가 들어가는 콜백함수를 사용하여 대상 배열의 모든 아이템 갯수만큼 콜백함수가 실행됨
• 실행될때마다 대상의 모든 아이템이 차례로 콜백함수의 매개변수로 들어가고 콜백함수의 로직결과가 모두 참이여야 true로 반환함
• 콜백함수의 로직결과가 하나라도 거짓이면 false반환

const check = numName0.every(numverName => numverName.length >=  numName0.length);

console.log(check);  // true

- some(callBack);

• 배열의 아이템 만큼 콜백함수가 실행되며 콜백함수의
  결과중 하나라도 참이면 true 반환

- .filter(callBack));

• 대상의 모든 아이템들이 차례로 콜백함수의 매개변수로 들어가서 콜백함수의 결과가 참인 아이템들만 모아 새로운 배열로 반환
• 모든 콜백함수의 결과가 거짓일 경우 로 반환

const numFilter = numName0.filter(numverName => numverName.length === numName0.length);
console.log(numFilter); // (2) ['One', 'Two']

const usersFilter = users.filter(user => user.age >= 19); 
console.log(usersFilter);// [{"name": "Poppy", "age": 35 }, { "name": "An84","age": 40 }]

- .find(callBack);

대상의 아이템들을 차례로 콜백함수의 매개변수로 넣어 콜백함수 로직의 결과가 참이 첫 번째 아이템만 반환(참인 첫번째 아이템 반환후 콜백을 반복하지 않음)

const findItem = numName0.find(item => item === 'Two');
console.log(findItem); // Two

const findUser = users.find(item => item.age === 3);
console.log(findUser); // {neme: 'GguGGu', age: 3}

- .findIndex(callBack);

대상의 아이템들을 차례로 콜백함수의 매개변수로 넣어 콜백함수의 결과가 참인 첫번째 아이템의 인덱스번호를 반환(참인 첫번째 아이템 인덱스번호 반환후 콜백을 반복하지 않음)

const findItemIndex = numName0.findIndex(item => item ==='One');
console.log(findItemIndex); // 0

- .flat(num);

• 대상의 하위배열을 인수의 하위배결 갯수만큼 이어서 병합한 배열을 새로 생성(기본값: 1)
• .flat(Infinity);: 하위배열이 몇개인지 모를때 모두병합할때 사용

- .forEach(callBack);

대상의 아이템 갯수만큼 반복해서 콜백함수를 실행함(중간에 반복문 못멈춤 -> for반복문의 break기능 없음)

numName0.forEach(item => console.log(item)); // One Two Three 차례로 콘솔에 한줄씩 출력

- .includes(data);

대상이 인수와 같은 아이템이 있는지 논리 데이터로 반환함

console.log(numName0.includes('Three')); // true
console.log(numName0.includes('Six')); // false

- .join('string');

• 인수로 구분자를 넣어 배열의 아이템이 구분자로 구분되는 문자데이터를 반환함
• 구분자의 기본값은 , (인수가없으면 ,로 구분됨)

console.log(numName0.join()); // One,Two,Three
console.log(numName0.join(' * ')); // One * Two * Three

- .map(callBack);

대상배열의 아이템이 콜백함수의 매개변수로 들어가 로직을 실행해 나온값을 병합해 새로운 배열로 반환

const newNumName = numName0.map(item => item + ' ' + Math.random().toFixed(3));
console.log(newNumName); // (3) ['One 0.199', 'Two 0.778', 'Three 0.705'] -> 뒤의 숫자는 랜덤

const userPropertyAdd = users.map(property => ({
    ...property,
    city: null,
    isValid: true
}));

console.log(userPropertyAdd);
// (3) [{…}, {…}, {…}]
// 0: {name: 'Poppy', age: 35, city: null, isValid: true}
// 1: {neme: 'GguGGu', age: 3, city: null, isValid: true}
// 2: {name: 'An84', age: 40, city: null, isValid: true}
// length: 3
// [[Prototype]]: Array(0)

- .shift();

• 배열의 첫번째 아이템을 제거하고 한뒤 제거한 아이템을 문자데이터로 반환
• 배열의 원본데이터도 마지막이 제거된 배열로 변경됨

console.log(numName0.shift()); // One
console.log(numName0); // (2) ['Two', 'Three']

- .pop();

• 배열의 마지막 아이템을 제거하고 한뒤 제거한 아이템을 문자데이터로 반환
• 배열의 원본데이터도 마지막이 제거된 배열로 변경됨

console.log(users.pop()); // {name: 'An84', age: 40}
console.log(users);
// (2) [{…}, {…}]
// 0: {name: 'Poppy', age: 35}
// 1: {neme: 'GguGGu', age: 3}
// length: 2
// [[Prototype]]: Array(0)

- .push(data);

• 배열에 뒤쪽에 인수로 들어돈 데이터(무제한)들을 아이템으로 추가해 length를 반환
• 원본 데이터 변경데이터도 추가된 데이도 변경됨

console.log(numName1.push('Seven', 'Eight')); // 5
console.log(numName1); // (5) ['Four', 'Five', 'Six', 'Seven', 'Eight']

- .reduce(callBack, data(초기값설정));

• 배열의 아이템이 콜백함수의 두번째 인수로들어가 아이템갯수만큼 콜백함수의 로직 실행
• 콜백이 차례로 실행되면 반환값이 다음 콜백의 첫번째 매개변수로 전달되고 마지막 최종 콜백결과가 반환됨

console.log(numName0.reduce((delivery, item) => delivery + item, 'number '));
// 실행순서 
// 1. 'number '가 매개변수delivery로 들어가서 반환 'number One'
// 2. 'number One'가 매개변수delivery로 들어가서 반환 'number OneTwo'
// 3. 'number OneTwo'가 매개변수delivery로 들어가서 최종 반환값 'number OneTwoThree'

- .reverse();

배열의 순서를 반전시킴 원본데이터도 변경됨

console.log(numName0.reverse()); // (3) ['Three', 'Two', 'One']
console.log(numName0); // (3) ['Three', 'Two', 'One']

- .sort();

대상의 배열을 콜백 반환값에 따라 정렬함, 대상 배열의 원본도 순서 변경

// 작은숫자부터 큰숫자 차례로 정렬
arr.sort((a, b) => a - b);

// 큰숫자부터 작은숫자 차례로 정렬
arr.sort((a, b) => b - a);

- .splice(index, length, data);

• .splice(추가하거나 삭제하고 싶은 시작점 index, 첫번째 인수인덱스부터 아이템을 삭제할 갯수, 추가할 아이템 데이터);
• 배열의 아이템을 삭제하거나 추가 또는 교체, 원본데이터 변경됨

numName0.splice(2, 1, '하나','둘'); 
console.log(numName0); // (4) ['One', 'Two', '하나', '둘']

🎮 패스트캠퍼스
프론트엔드 웹 개발의 모든 것 초격차패키지 Online.