자바스크립트 - 배열(Array)

더미벨·2022년 5월 9일
array배열 메서드자바스크립트 배열
1

배열(Array)

자바스크립트 배열의 특징: 다른 프로그래밍 언어에서는 같은 타입의 요소만 배열 안에 넣을 수 있지만, 자바스크립트의 배열에는 서로 다른 타입의 요소들을 한 배열에 묶는 것이 가능하다. 

let myArray = [19, 44, 'good', false]
//여기서 19, 44, 'good', false를 요소(element)라고 한다.
  • 순서는 항상 0번부터 시작
let myArray = [19, 44, 'good', false]

console.log(myArray[0])// 19 출력
  • 배열 내 요소를 수정하는 방법
let myArray = [19, 44, 'good', false]

myArray[1] = 'yejee'
console.log(myArray) = [19, 'yejee', 'good', false] 
//myArray의 1번째 index인 44가 'yejee'로 변경되었다.
  • 배열의 길이 구하기
let myArray = [19, 44, 'good', false]

console.log(myArray.length) // 4 출력

배열의 여러가지 메소드

  • .slice(start,[,end])
    • 배열 내의 특정한 요소의 index 범위에 따라 새로운 배열을 리턴한다.
    • 원본 배열은 수정되지 않음
const array = [1, 2, 3, 4, 5];

const array1 = array.slice(1, 3); // [2, 3]  1번째 index부터 3번째 전 index까지
const array2 = array.slice(1); // [2, 3, 4, 5] 1번째 index부터 끝까지 모두 출력
const array3 = array.slice(-3, -1); // [3, 4]  
const array4 = array.slice(-3); // [3, 4, 5] 끝에서부터 3개

console.log(array) = [1, 2, 3, 4, 5] // 원본 배열은 수정되지 않음
  • .splice(start[,deleteCount[,item[,item2[,...]]]])
    • 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.
let array = [1, 2, 3, 4, 5];
const newArray = array.splice(2, 2, 'a', 'b', 'c')

console.log(array)// [1, 2, 'a', 'b', 'c', 5] 
//2번째 index부터 2개의 요소가 삭제되고 배열에 'a', 'b', 'c' 추가
console.log(newArray) // [3, 4]
//삭제된 요소가 출력
  • .filter: 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다. 1) callback function

    • 각 요소의 조건을 판단할 함수로 true를 반환하면 요소를 유지하고 false를 반환하면 제외한다.

    • 다음 세가지의 인수를 가진다.
      - element - 배열의 현재 요소
      - index(optional) - 배열의 현재 요소의 인덱스
      - array(optional) - 호출한 배열

      2) thisArg(optional)

    • callback 함수를 실행할 때 this로 사용되는 값.

💡 arr.filter(callback(element[, index[, array]])[, thisArg])

let vals = [5, 4, 9, 2, 1];
 
//첫번째 방법 (filter()의 인자에서 바로 함수를 써주는 방법)
vals = vals.filter((value) => value % 2 === 0)
console.log(vals) // [4, 2]

//두번째 방법(밖에서 함수를 선언하고 filter() 인자에서 callback 하는 방법)
function isEven(num) {
    return (num % 2 === 0)
}
vals = vals.filter(isEven);
console.log(vals); // [4, 2]

truthy와 falsy를 이용한 함수식

let vals = [1, 2, 3, 4, undefined, 5]

vals = vals.filter((x) => x !== undefined)
console.log(vals) // [1, 2, 3, 4, 5]

vals = vals.filter((x) => x);
console.log(vals) // [1, 2, 3, 4, 5] undefined값 자체가 falsy한 값이기 때문.

vlas = vals.filter((x) => !x);
console.log(vals) // [undefined]
/* 05/05/22 스터디 이후 추가한 내용*/

let vals = [0, 1, 2, 3, 4, undefined, 5]

vals = vals.filter((x) => x !== undefined)
console.log(vals) // [0, 1, 2, 3, 4, 5] 단순히 undefined값이 아닌 것들만 뽑으라고 함수식을 작성했기 때문.

vals = vals.filter((x) => x);
console.log(vals) // [1, 2, 3, 4, 5] truthy한 값만 나와야 하기 때문에 falsy값인 0과 undefined는 출력되지 않는다.

vals= vals.filter((x) => !x);
console.log(vals) // [0, undefined] // falsy한 값인 0과 undefined가 출력
let sentence = "It  was a dark and stormy night." // 중간에 실수로 공백을 하나 더 넣음.

let words = sentence.split(' ') // 공백을 기준으로 나눔.
console.log(words) // ['It', '', 'was', 'a', 'dark', 'and', 'stormy', 'nigth']

//공백 없이 문자들만 출력하고 싶음
words = words.filter((word) => word); // truthy한 값만 출력
console.log(words) // ['It', 'was', 'a', 'dark', 'and', 'stormy', 'nigth']

filter를 사용해 특정 객체만 불러오기.

const arr1 = [{id: 1, text: '1'}, {id: 2, text: '2'}]; 

arr1.filter(object => {
	return object.id !== 1;
}) // {id: 2 , text: '2'}
  • .concat(): 주어진 배열에 기존 배열을 합쳐 새로운 배열을 반환한다.

    • 원본 배열은 변하지 않는다.

      const a = [1, 2, 3]
const b = ['a', 'b', 'c']
const c = ['가', '나', '다']

const d = a. concat(b, c) // [1, 2, 3, 'a', 'b', 'c', '가', '나', '다']

console.log(a) // [1, 2, 3] 원본 배열이 변하지 않고 그대로 출력

    • 두 배열이 같은 요소를 가질 경우에 concat을 사용하여 배열을 합쳐도 중복된 값이 나온다.

      const a = [1, 2, 3]
const b = [2, 3, 4]

const c = a. concat(b)
console.log(c) // [1, 2, 3, 2, 3, 4]

    • .concat()과 .indexOf() 사용하여 중복 없는 배열 구하기

      let arr1 = ['a', 'b', 'c', 'd']
let arr2 = ['c', 'd', 'e', 'f']

let result = arr1.concat(arr2) // ['a', 'b', 'c', 'd', 'c', 'd,' 'e', 'f']

result = result.filter((el, index) => result.indexOf(el) === index)
//첫번째 'c', 'd'는 조건을 만족하지만 중복되는 'c'와 'd'는 조건을 만족하지 않는다.

console.log(result) // ['a', 'b', 'c', 'd', 'e', 'f']
  • Set

: 자료형에 관계없이 원시 값과 객체 참조 모두 유일한 값을 저장할 수 있다.

하나의 Set 내 값은 한 번만 나타날 수 있다. 즉, 어떤 값은 그 Set 콜렉션 내에서 유일하다.

const myArray = [1, 2, 3, 4, 5, 5, 2, 1];
const mySet = new Set(myArray);

console.log(myArray) // [1, 2, 3, 4, 5, 5, 2, 1]
console.log(mySet) // [1, 2, 3, 4, 5]
// Set메서드 이용하여 중복된 값 제거하기

let arr1 = ['a', 'b', 'c', 'd']
let arr2 = ['c', 'd', 'e', 'f']

let result = arr1.concat(arr2)
result = new Set(result)

console.log(result) // ['a', 'b', 'c', 'd', 'e', 'f']
// 하나의 set 내 값은 한 번만 나타날 수 있기 때문.
  • 요소 추가: .push()
let myArray = [19, 44, 'good', false]

myArray.push('orange')
console.log(myArray) // [19, 44, 'good', false, 'orange']
  • 요소 삭제

    • .pop(): 배열의 가장 끝에서부터 요소를 삭제

      let myArray = [19, 44, 'good', false]

myArray.pop()
console.log(myArray) // [19, 44, 'good']

    • .shift(): 배열의 가장 앞에서부터 요소를 삭제

      let myArray = [19, 44, 'good', false]

myArray.shift()
console.log(myArray) // [44, 'good', false]
  • 중첩된 배열(Nested Array)
let myArray = [19, 44, 'good', [100, 200, 300], false]

console.log(myArray[3]) // [100, 200, 300]
console.log(myArray[3][0]) // 100
  • 배열의 길이와 index를 이용하여 배열의 가장 마지막 요소에 접근하는 방법
let myArray1 = ['yejee', 'jenny', 11]
let myArray2 = [true, 5, 'dumibell', 10, false]
let myArray3 = ['apple', 14, 15, 66, 'orange', true]

console.log('myArray1: ', myArray1[2]) // 11
console.log('myArray2: ', myArray2[4]) // false
console.log('myArray3: ', myArray3[5]) // true
// 위의 방법처럼 배열의 길이를 이용하여 마지막 요소에 접근할 수도 있지만 배열의 길이가 길어진다면 요소의 갯수를 하나하나 세는 것에는 무리가 있다.

console.log(myArray1[myArray1.length - 1]) // 11 출력
//마지막 요소의 순번은 항상 '배열의 길이 - 1' 이기 때문에 위의 방법으로도 배열의 마지막 요소에 접근이 가능하다.
profile
더미벨
프론트엔드 개발자👩‍💻
이전 포스트

Callback 함수란?

다음 포스트

자바스크립트 - 반복문(Loop)

0개의 댓글