TIL 4. JS - 배열과 메소드 종류

문승준·2021년 8월 5일
JavaScriptTILarray배열
1

JavaScript

목록 보기
1/8
post-thumbnail

배열

  • 하나의 변수에 여러 개의 값을 순차적으로 저장한다.
  • 요소(element)로 이루어져 있으며 index로 접근할 수 있다.

1. 배열의 생성

  • 어떤 데이터 타입의 조합도 가능하다
let arr = [1, 'second', true, null, undefined, NaN,
               ['nested array'], {'key':true}, function () {}]

console.log(arr[1]) // 'second'
console.log(arr.length) // 9
console.log(typeof arr) // object
  • new Array() 생성자 메소드
let arr = new Array(n) // n개의 공간을 가진 배열 생성
console.log(arr.length) // n

let arr = new Array(1,'second',true) // 매개변수 값들을 요소로 가지는 배열 생성
console.log(arr) // [1, 'socond', true]

2. 요소 접근, 추가와 수정

  • index를 활용한 접근
let arr = ['one', ['two', 'three']]
console.log(arr[1]) // ['two', 'three']
console.log(arr[1][0]) // 'two'
  • index를 활용한 요소 추가와 수정
let arr = []
console.log(arr[0]) // undefined
arr[1] = 2
arr[3] = 3
console.log(arr) // [empty, 2, empty, 3]
arr[1] = 'second'
console.log(arr) // [empty, 'second', empty, 3]

3. 배열 메소드

3-1. 변경자 메소드 (원본 배열이 변한다)

  • pop() : 배열 끝 요소 제거 (제거한 값 반환)
let arr = [11,22,33]

console.log(arr.pop()) // 33
console.log(arr) // [11,22]
  • push() : 배열 끝 요소 추가 (변경된 length 값 반환)
let arr = [11,22,33]

console.log(arr.push(['four',5])) // 4
console.log(arr) // [11,22, 33, ['four', 5]]

///length를 사용한 배열 끝 요소 추가
let arr = [11,22,33]

arr[arr.length] = [4, 5]
console.log(arr) // [11, 22, 33, [4, 5]]
  • shift() : 배열 앞 요소 제거 (제거한 값 반환)
let arr = [11,22,33]

console.log(arr.shift()) // 11
console.log(arr) // [22, 33]
  • unshift() : 배열 앞 요소 추가 (변경된 length 값 반환)
let arr = [11,22,33]

console.log(arr.unshift('zero',10)) // 5
console.log(arr) // ['zero', 10, 11, 22, 33]
  • splice() : 요소를 삭제하거나 다른 요소로 대치하거나, 새로운 요소 추가 (삭제 값 반환)

    splice(start, deleteCount, item)

    • start -> index 시작점 (-n이면 끝에서 n번째)
    • deleteCount -> 시작점부터 제거할 요소의 수 (옵션)
    • item -> 삭제 위치에 추가할 요소 (옵션)

// 삭제 후 대치
let arr = [1, 2, 3, 4]
let result = arr.splice(0,2,10,20,25)

console.log(arr) // [10, 20, 25, 3, 4]
console.log(result) // [1, 2]


// 제거하지 않고 추가만
let arr = [1, 2, 3, 4]
let result = arr.splice(1,0,1.5)

console.log(arr) // [1, 1.5, 2, 3, 4]
console.log(result) // []
  • reverse() : 배열의 요소 순서를 반전
const arr = [1, 2, 3];
arr.reverse()
console.log(arr); // [3, 2, 1]
  • sort() : 배열 안에 요소를 정렬

    sort(sortFunction)

    • 함수를 생략하면 오름차순 정렬 (유니코드 순서)
    • 첫 번째 인수 < 두 번째 인수 : - 값 반환
    • 첫 번째 인수 = 두 번째 인수 : 0 반환
    • 첫 번째 인수 > 두 번째 인수 : + 값 반환 => 위치 교체
// 문자 정렬
let arr = ['orange', 'banana', 'apple']
console.log(arr.sort()) // ['apple', 'banana', 'orange']

// 1. 숫자 정렬 오류
let arr = [4, 11, 2, 10, 3, 1]
console.log(arr.sort()) // [1, 10, 11, 2, 3, 4]
                        // 유니코드 문자 순서로 정렬된다 (문자열로 인식)
// 2. 오름차순 정렬
arr.sort(function(a, b) {
  return a - b
})
console.log(arr) // [1, 2, 3, 4, 10, 11]

// 3. 내림차순 정렬
arr.sort((a, b) => b - a) // 화살표 함수 활용
console.log(arr) // [11, 10, 4, 3, 2, 1]

3-2. 접근자 메소드 (원본 배열은 변하지 않는다)

  • indexOf() : 요소를 검색해 인덱스를 반환 (없으면 -1 반환)
    indexOf(searchElement[, fromIndex])
    fromIndex 는 찾기 시작할 위치 (옵션)
let arr = [1, 2, 2, 3]

// 요소 2를 검색하여 인덱스를 반환 (중복시 첫번째 인덱스)
console.log(arr.indexOf(2))    // 1

// 요소 4가 없으므로 -1을 반환 (찾지 못하면 -1을 반환)
console.log(arr.indexOf(4))    // -1

// 인덱스 2부터 검색을 시작해서 -1을 반환
console.log(arr.indexOf(1, 2)) // -1

// * 배열에 요소가 존재하는지 확인하고 없으면 넣기*
let arr = ['a', 2, 'c', 4]

if (arr.indexOf('e') === -1) {
  arr.push('e')
}

console.log(arr) // ['a', 2, 'c', 4, 'e']

// (!arr.includes('e')) -> 가독성이 더 좋긴하다
  • includes() : 특정 요소를 포함하고 있는지 판별 (boolean 반환)
    -> 매개변수 2는 검색을 시작할 인덱스 (옵션)
let arr = ['a', 2, 'c', 4]

console.log(arr.includes('c',-2)) // true
console.log(arr.includes(4,4)) // false
console.log(arr.includes('c',-10)) // true
  • filter() : 콜백함수의 반환 결과가 true인 요소를 모아 새로운 배열 반환

    filter(callbackFunction, thisAgr)

    • callbackFunction : 각 요소를 시험할 함수
      -> 3개의 인자 (element, index, array) - element 매개변수만 필수
      -> (요소값, 요소 인덱스, filter를 호출한 배열)
    • thisAgr : 함수 실행시 this로 사용하는 값
// *95점 이상만 필터링 하기* (화살표 함수 활용)
let arr = [{name:'billy', score: 90},
           {name:'danny', score:85},
           {name:'jason', score: 95}]

let result = arr.filter((value)=>value.score >= 95)

console.log(result) // [{name:'jason', score:95}]


// *'an'이 포함된 것만 필터링 하기* (콜백 함수 선언)
let fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']

let result = fruits.filter(withAn)
 
function withAn (value) {
    return value.includes('an')
  }

console.log(result)
  • concat() : 기존 배열에 주어진 배열을 합쳐서 새로운 배열 반환
    • 원본 배열은 변하지 않고 서로 영향을 받지 않는다.
    • 매개변수에 값 또는 배열을 넣는다
    • push()와 다르게 배열을 해체하여 요소로 추가한다. 
// 매개변수에 따른 차이

let arr1 = [1, 2, 3]
let arr2 = [3, [4, 5]]
let result1 = arr1.concat(arr2)
let result2 = arr1.concat(arr2, 6)
let result3 = arr1.concat(3, [4, 5])

console.log(result1) // [1, 2, 3, 3, [4, 5]]
console.log(result2) // [1, 2, 3, 3, [4, 5], 6]
console.log(result3) // [1, 2, 3, 3, 4, 5]

// * 중복된 값 없애기 *

let arr1 = [1, 2, 3]
let arr2 = [3, 4, 5]
let result = arr1.concat(arr2)
let eraseDupli = result.filter(
  (el,index)=>result.indexOf(el)===index
  )

console.log(eraseDupli) // [1, 2, 3, 4, 5]
  • slice() : 인덱스 범위에 따라 새로운 배열 반환 (끝점의 이전까지)
    • 원본 배열은 변하지 않고 서로 영향을 받지 않는다.
    • 매개변수1 -> 인덱스 시작점
      매개변수2 -> 인덱스 끝점 (옵션, 기본값은 length)
    • 새로운 변수에 할당해주어야 한다
let arr = ['a', 'b', 'c']
let result1 = arr.slice(0,-2)
console.log(result1) //['a']

let result2 = arr.slice(1,2)
console.log(result2) // ['b']

let result3 = arr.slice(4)
console.log(result3) // []

3-3. 순회 메소드

  • forEach() : 배열 요소 각각에 대해 주어진 함수를 실행
    forEach(callbackFunction, thisAgr)
    callbackFunction : 각 요소를 시험할 함수
    -> 3개의 인자 (element, index, array) - element 매개변수만 필수
    thisAgr : 함수 실행시 this로 사용하는 값

    반환값은 undefined => 바뀐 배열을 반환하지 않아서 미리 빈 배열을 선언한다.

// * 각 요소에 1씩 더한 배열 만들기

let arr = [1, 2, 3];
let arrPlusOne = [];  // => 미리 빈 배열을 선언해야한다.

// 반복문 활용
for (let i=0; i<arr.length; i++) {
  arrPlusOne.push(arr[i]+1);
}
console.log(arrPlusOne) // [2, 3, 4]

// forEach 활용
arr.forEach(function(value){
  arrPlusOne.push(value + 1);
});

console.log(arrPlusOne) // [2, 3, 4]

  • map() : forEach()처럼 배열 요소를 순회하며 주어진 함수를 실행한다.
    forEach(callbackFunction, thisAgr)
    callbackFunction : 각 요소를 시험할 함수
    -> 3개의 인자 (element, index, array) - element 매개변수만 필수
    thisAgr : 함수 실행시 this로 사용하는 값

    수행한 결과를 모은 새로운 배열을 반환한다.


let numbers = [1, 4, 9];
let doubles = numbers.map(function(num) {
  return num * 2;
});
console.log(doubles) // [2, 8, 18] -> 실행된 배열 반환
console.log(numbers) // [1, 4, 9]  -> 기존 배열 그대로

참조목록

profile
문승준
개발자가 될 팔자
다음 포스트

TIL 5. JS - For 반복문과 배열 순회

0개의 댓글