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