[Javascript] 배열 사용법

배열 메서드 사용법

• push('원소') : 배열의 마지막 인덱스의 요소 추가

const fruits = ['apple', 'banana', 'grape', 'plum', 'orange'];
fruits.push('strawberry');
console.log(fruits); // 출력결과 : ['apple', 'banana', 'grape', 'plum', 'orange'];

• pop() : 배열 마지막 인덱스의 요소를 삭제

const fruits = ['apple', 'banana', 'grape', 'plum', 'orange'];
console.log(fruits.pop()); // 출력결과 : orange

• unshift('원소') : 배열의 맨 앞에 위치에 원소를 추가, 새로운 배열의 길이를 리턴

const fruits = ['apple', 'banana', 'grape', 'plum', 'orange'];
const result = fruits.unshift('strawberry');
console.log(fruits); // 출력결과: [ 'strawberry', 'apple', 'banana', 'grape', 'plum', 'orange' ]
console.log(result); // 출력결과: 6

• shift() : 배열의 첫 번째 인덱스의 요소를 삭제 후 삭제한 요소를 리턴

const fruits = ['apple', 'banana', 'grape', 'plum', 'orange'];
const result = fruits.shift();
console.log(result); // 출력결과: apple

• concat(['원소','원소',...]) : 한 개 또는 여러 개의 요소를 결합, 이 메서드는 기존 배열을 수정하지 않고 새로운 배열을 반환

const fruits = ['apple', 'banana', 'grape', 'plum', 'orange'];
const result = fruits.concat('strawberry', 'mandarin', 'watermelon');
console.log(result);
// 출력결과
// 출력 결과
[
    'apple',
    'banana',
    'grape',
    'plum',
    'orange',
    'strawberry',
    'mandarin',
    'watermelon'
  ]
console.log(fruits); // 출력결과: [ 'apple', 'banana', 'grape', 'plum', 'orange' ]

• splice(삭제할 인덱스, 삭제할 인덱스 개수, 삭제한 인덱스 위치에 추가할 요소) : 배열에서 요소를 삭제하고 필요하다면 요소를 추가 할 수 있다. 삭제한 요소를 리턴

const fruits = ['apple', 'banana', 'grape', 'plum', 'orange'];
const result = fruits.splice(2, 1); // 2번째 인덱스에서 1개의 요소를 삭제
console.log(result); // 출력결과: [ 'grape' ]
console.log(fruits); // 출력결과: [ 'apple', 'banana', 'plum', 'orange' ]

// or
const fruits = ['apple', 'banana', 'grape', 'plum', 'orange'];
const result = fruits.splice(2, 2, 'strawberry'); // 2번째 인덱스에서 2개의 요소를 삭제 후 'strawberry'를 추가
console.log(result); // 출력결과 : [ 'grape', 'plum' ]
console.log(fruits); // 출력결과 :  [ 'apple', 'banana', 'strawberry', 'orange' ]

• slice(시작 인덱스, 끝 인덱스) : 시작 인덱스 부터 끝 인덱스 전까지 배열을 잘라서 반환한다.

const fruits = ['apple', 'banana', 'grape', 'plum', 'orange'];

const result = fruits.slice(1, 3); // 1번 인덱스부터 3번 인덱스 까지의 요소를 반환
console.log(result); // 출력결과 : [ 'banana', 'grape' ]
console.log(fruits); // 출력결과 : [ 'apple', 'banana', 'grape', 'plum', 'orange' ]

• sort() : 빠른 순으로 정렬, callback 함수를 사용해서 정렬 방식을 정할 수 있다.

const numbers = [5, 6, 2, 1, 4, 3];

const result = numbers.sort(); // 
console.log(result); // 출력 결과 : [ 1, 2, 3, 4, 5, 6 ]

// or 

const result1 = numbers.sort((a, b)=> b - a); // sort((a:compare, b:compare)=> a - b); 비교함수
console.log(result1); // 출력 결과 : [ 6, 5, 4, 3, 2, 1 ]

• reverse() : 배열의 요소를 역순으로 정렬

const numbers = [5, 6, 2, 1, 4, 3];

const result = numbers.reverse();
console.log(result); // 출력 결과 : [ 3, 4, 1, 2, 6, 5 ]

• join('연결할 문자열') : 배열의 모든 요소를 연결해 하나의 문자열을 만드는 기능, 연결할 문자열을 생략할 경우 , 로 연결된다.

const fruits = ['apple', 'grape', 'banana','plum', 'orange'];
const result = fruits.join('/');
console.log(result); // 출력 결과 : apple/grape/banana/plum/orange

const result1 = fruits.join(); // 연결할 문자열을 생략
console.log(result1); // 출력 결과 : apple,grape,banana,plum,orange

• fileter(callback( value, index, array[])=> ()) : callback 함수에 지정된 조건을 만족하는 요소를 반환

const numbers = [5, 6, 2, 1, 4, 3];
const result = numbers.filter((value, index)=> value > 3); // 3보다 큰 값만 출력
console.log(result); // 출력 결과 : [ 5, 6, 4 ]

• indexOf('찾을 문자열') : 배열에 특정 문자열을 앞에서 부터 찾은 후 위치를 반환, 찾는 문자열이 없을 경우 -1을 리턴
• lastIndexOf(찾을 문자열') : 배열에 특정 문자열을 뒤에서 부터 찾은 후 위치를 반환, 찾는 문자열이 없을 경우 -1을 리턴

const result = 'apple'.indexOf('p');
console.log(result); // 출력 결과 : 1

const result1 = 'apple'.lastIndexOf('p');
console.log(result1);// 출력 결과 : 2

• map((value, index)=> ()) : 배열 내의 요소를 재정의 한 후 새로운 배열로 반한

const students = [
    {id:1, name:'kim', age:30},
    {id:2, name:'lee', age:10},
    {id:3, name:'park', age:60},
    {id:4, name:'namgung', age:20},
    {id:5, name:'song', age:90},
];

const result = students.map(student=>student.name);
console.log(result); // 출력결과 : [ 'kim', 'lee', 'park', 'namgung', 'song' ]

• every((value, index)=> ()) : 배열의 요소가 거짓을 나올 때 까지 요소를 한번 씩 판별한 후 거짓이 나오면 바로 callback 함수를 종료한 후 false를 리턴하고 모든 요소가 거짓일 아닐 경우 true을 반환

const numbers = [5, 6, 2, 1, 4, 3];
const result = numbers.every((value, index)=> value > 3); // 배열 요소 중에 3보다 큰 값이 있을 경우 
console.log(result); // 출력 결과 : false

const result1 = numbers.every((value, index)=> value > 0); // 음수 판별
console.log(result1); // 출력 결과 : true

• some((value, index)=> ()) : 배열의 요소중에 true이 있을 때 까지 callback 함수를 실행 후 하나라도 있으면 true 없으면 false를 반환

const numbers = [5, 6, 2, 1, 4, 3];
const result = numbers.some((value, index)=> value == 2);
console.log(result); // 출력 결과 : true