[TIL : 6] JS/Node 배열

jabae·2021년 10월 11일
0

TIL

목록 보기
6/44

👩‍💻 Achievement Goals : 배열

배열 기초

  • 배열에서 사용되는 다음 용어에 대해 정확히 이해할 수 있다.

    index : 배열의 순서, 0번부터 시작한다.
    element : 배열의 요소이다.
    length : 배열의 길이를 구할 수 있다. arr.length (index + 1)
    arr[0] : 배열의 첫번째 요소 예시
    push : 배열의 끝에 새로운 값을 추가한다. arr.push(추가할값)
    pop : 배열의 끝의 요소를 삭제한다. arr.pop()

  • 배열에서 특정 인덱스(index)의 요소(element)를 조회하거나, 변경할 수 있다.
    let arr = [1, 3, 5];
    console.log(arr[1]) // 3
    arr[2] = 6;
    console.log(arr[2]) // 6
  • 배열의 요소가 배열인 이중 배열을 이해할 수 있다.
  • 이중 배열의 요소를 조회하거나 변경할 수 있다.
    let arr = [[1, 2], [5, 6], [7, 8]];
    console.log(arr[0]) // [1, 2]
    console.log(arr[0][0]) // 1
    arr[0] = [3, 4];
    console.log(arr[0]) // [3, 4]
  • 삼중배열
    let alphabet = [[['a','b'], ['c', 'd']], [['e', 'f'], ['g', 'h']]];
    console.log(alphabet[1][0][1]) // f

배열의 반복

  • 배열의 요소를 반복적으로 불러오는 방법을 이해하고 사용할 수 있다.
  • 배열의 각 요소에 대하여, 반복하는 코드를 실행시킬 수 있다.

    for of : for (let arr[i] of arr)for (let i = 0; i < arr.length; i += 1) 와 같다. (String에서도 사용할 수 있다!)

    let test = [1, 2, 3, 4, 5]
    for (el of test) {
    console.log(test[el]) // 2, 3, 4, 5, undefined <- 잘못된 사용!
    }
    for (el of test) {
    console.log(el) // 1, 2, 3, 4, 5 <- 이렇게 접근해야 한다!
    }

    for in : 객체에서 쓰인다! 배열에서도 되긴 된다!

    let user = {
    name : 'jabe', 
    age : '13', 
    city : 'seoul'
    } 
    for (key in user) {
        console.log(user[key]) // jabe, 13, seoul
    }
    for (el in test) {
        console.log(test[el]) // 1, 2, 3, 4, 5 
    }                         // 위의 예시를 가져와서 배열에 for in을 실행해도 되긴된다!
  • 기본적인 for 문 for (let i = 0; i < 5; i++) 을 응용하여 다양한 for문을 만들 수 있다.

    yes

  • 배열과 반복문을 활용하여 실생활에서 접할 수 있는 간단한 문제를 해결할 수 있다.

    yes

  • 문자열과 배열의 타입 변환을 돕는 메소드를 알고 있다.
    let str = "Hello";
    let words = str.split('')
    console.log(words) // ['H', 'e', 'l', 'l', 'o'] <-배열로 바꿀 수 있다!
    let words = str.split()
    console.log(words) // ['Hello']
    let words = str.split('e')
    console.log(words) // ['H', 'llo']
  • 띄어쓰기 (" ")로 문자열을 구분하여, 배열로 변경할 수 있다. str.split(" ").join(" ")
    let str = "Hello";
    let result1 = str.split("")
    console.log(result1) // ['H', 'e', 'l', 'l', 'o']
    let result2 = result.join("")
    console.log(result2) // 'Hello'
    str.split("") // 이렇게 하면
    console.log(str) //안 된다! 원본은 바뀌지 않기 때문이다.
  • 문자열을 요소로 가지는 배열을 띄어쓰기 (" ")로 구분한 문자열로 변경할 수 있다.
    let str = ["Nice", "to", "meet", "you"]
    let result = str.join(" ")
    console.log(result) // 'Nice to meet you'

배열 기초 메소드

  • 배열 요소(element)를 조회할 수 있다. bracket notation

    yes

  • 배열을 복사, 분리하는 법을 이해할 수 있다.

    slice(시작, 끝): 시작 인덱스부터 끝 익덱스 전까지 자른다. (접근자 메소드로 원본은 헤치지 않는다!)
    splice(시작, 끝) : 시작 인덱스부터 끝 익덱스까지 자른다. (
    변경자 메소드로 원본은 자르고 남은 것들이 남아있다.)
    splice(시작, 제거수, 교체할값) : 시작인덱스에 제거 수 1로 시작 인덱스 값을 바꾸거나, 제거수 0으로 시작 인덱스 뒤에 추가할 수 있다.

    let arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
    arr.slice(1, 5) // ['b', 'c', 'd', 'e']
    console.log(arr) // ['a', 'b', 'c', 'd', 'e', 'f', 'g'] <- slice는 원본을 해치지 않는다!
    arr.splice(2, 6) // ['c', 'd', 'e', 'f', 'g']
    console.log(arr) // ['a', 'b'] <- splice는 원본을 변화시킨다!
    arr.splice(1, 1, 'c') // .splice(시작인덱스, 제거할수, 교체할것)
    console.log(arr) // ['a', 'c'] <- 값을 바꿀 수도 있다!
    arr.splice(1, 0, 'b')
    console.log(arr) // ['a', 'b', 'c'] <- 값을 추가할 수도 있다!
  • 변수, 데이터, 또는 특정 값이 배열인지 아닌지 판별할 수 있다.

    Array.isArray : 배열이면 true, 이외의 것이면 false를 내보낸다.

    typeof 배열 // 'object'
    typeof 객체 // 'object'
    Array.isArray(배열) // true
    Array.isArray(객체) // false
  • 배열의 요소(element)를 추가 및 삭제할 수 있다.

    push : 배열의 뒤에 추가한다.
    unshift : 배열의 앞에 추가한다.
    pop : 배열의 뒤에 삭제한다.
    shift : 배열의 앞에 삭제한다.

    let arr = ['b', 'c', 'd'];
    console.log(arr.push('e')) // 4가 나온다. 반환값이 length이다.
    console.log(arr) // ['b', 'c', 'd', 'e']
    console.log(arr.unshift('a')) // 역시 5가 나온다!
    console.log(arr) // ['a', 'b', 'c', 'd', 'e']
    arr.pop() // 'e'삭제된 값이 나온다.
    console.log(arr) // ['a', 'b', 'c', 'd']
    arr.shift() // 'a'
    console.log(arr) ['b', 'c', 'd']
  • 배열의 길이를 구할 수 있다.

    length : 문자열처럼 배열에서도 사용할 수 있다!

    let arr = ['b', 'c', 'd'];
    console.log(arr.length) // 3
  • 변수, 데이터, 또는 특정 값이 배열에 포함되어 있는지 확인할 수 있다.

    indexOf : 찾는 요소의 인덱스 값을 반환한다. 존재하지 않다면 -1을 반환한다.
    includes : 찾는 요소가 있으면 true를, 없으면 false를 반환한다. (internet explorer에서는 호환되지 않는다!)

    let words = ['Happy', 'Sunny', 'Day'];
    words.indexOf('Sunny') // 1
    words.includes('Happy') // true
    words.indexOf('day') // -1 <- 대소문자를 구분하니 조심하자!
    words.includes('happy') // false <- 역시 대소문자를 구분한다!

📚 그 외

  • 문제를 풀다가 return arr.slice()으로 바로 리턴해 주었는데 안됐다. 접근자 메소드로 원본을 해치지 않았던 것...! return arr.pop() 이렇게도 했었는데 마지막 요소를 반환한다. pushunshift는 길이를 반환하고. 알면 쉽게 풀 수 있는 문제지만 모르면 정말 헷갈릴 수 있는 메소드가 많은 것 같다. 정확하게 짚고 넘어가는 게 필요하다. 두루뭉슬하게 알지 말자!🔥
  • 문제를 풀다가 .concat으로도 배열 두 개를 이을 수 있다는 걸 알았다. arr1.concat(arr2)이런 식으로! Math.max.apply(null, arr) 로 배열에서 최대값을 찾을 수 있다. 정말 다양한 메소드들...
  • 이중배열은 그래도 c언어에서도 꽤 봤는데 이번에 삼중배열을 처음 알게 되었다...!(휴파님은 모르는 게 없으신가봐🤯) 항상 아주 예리한 질문을 하시는데 mdn을 잘 찾아보고 대비해야겠다.
  • 그래도 오늘은 배웠던 거(c)랑 겹치는 부분이 많아 재밌었다. 비교하는 재미도 있었고! 이런게 배움의 재미인가... ...!!!😜
profile
it's me!:)

0개의 댓글