JS 21.03.09


  • reference type data: 대량의 데이터를 쉽게 다룰 수 있게 자바스크립트에서는 Array와 Object라는 데이터 타입을 사용합니다. 이런 대량의 데이터를 다루기에 적합하게 제작된 데이터 타입을 참조 타입(reference type) 데이터라고 부릅니다. primitive type data(Number, String, Boolean, undefined…)와는 다른 성격.

  • for / while : 대량의 정보를 처리하는 법

  • array / object : 대량의 정보를 보관하고 관리하는 법

Array Method

// Array 생성
let arr = ['a', 'b', 'c']

// length
arr.length // 3

// index 
arr[1] // 'b'

// indexOf : 주어진 값과 일치하는 제일 앞의 인덱스를 반환합니다. 없으면 -1을 반환
arr.indexOf('b') // 1
arr.indexOf('z') // -1

// includes() : 배열이 특정 요소를 포함하고 있는지 판별
arr = [1,2,3]
arr.includes(0) // false;
arr.includes(1) // true;

// push : 맨 끝에 element 추가
arr.push('d') // 4 (길이를 return)
arr // ['a', 'b', 'c', 'd']

// pop : 맨 끝 element 제거
arr.pop() // 4
arr // ['a', 'b', 'c']

// shift : 맨 앞 element 제거
arr.shift() // 1
arr // ['b', 'c']

// shift : 맨 앞에 element 추가
arr.unshift('a') // 3
arr // ['a', 'b', 'c']

// array.form() : 유사 배열 또는 반복 가능한 객체로부터 새로운 Array 인스턴스 생성
Array.from('abc') // ['a', 'b', 'c']

// Array.isArray() : array 여부를 boolean
Array.isArray(['a', 'b', 'c']) // true
Array.isArray('a', 'b', 'c') // false

// Array.of() : argument의 수나 유형에 관계없이 가변 인자를 갖는 새 Array 인스턴스를 만듭니다.
Array.of(1);         // [1]
Array.of(1, 2, 3);   // [1, 2, 3]
Array.of(undefined); // [undefined]

// slice : 복사

// array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) 
// splice(변경을 시작할 인덱스, 제거할 element의 수, 배열에 추가할 element)
// 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.
// 변경자 메소드로 배열 자체를 수정
arr = [0,1,2,3,4,5,6,7,8,9];
arr.splice(5) // [5,6,7,8,9] = 5번 인덱스부터 제거
arr // [0,1,2,3,4]

arr.splice(2, 2) // [2, 3] = 2번 인덱스부터 2개 제거(2,3번 인덱스 제거)
arr // [0, 1, 4]

arr.splice(1, 2, 1, 2) // [1, 4] = 1번 인덱스부터 2개를 각 각 1과 2로 변경
arr // [0, 1, 2]

arr.splice(1, 2, 0) // [1, 2] = 1번 인덱스부터 2개 중 첫번째 껀 0 2번째는 삭제
arr // [0, 0]

// slice : 어떤 배열의 begin부터 end까지(end 미포함)를 새로운 배열로 반환 
// 원본 배열은 바뀌지 않습니다.
// arr.slice([begin[, end]])
arr = [0,1,2,3,4,5]
arr.slice(1) // [1,2,3,4,5]

arr // [0,1,2,3,4,5]
arr.slice(1, 3) // [1,2] : index 1번 부터 3번 전까지

// sort() : 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환
// arr.sort([compareFunction])
arr = [100, 1, 1000, 10, 10000];
arr.sort() // [[1, 10, 100, 1000, 10000] 오름차순 정렬

arr = ['b', 'z', 'a']; // ["a", "b", "z"] 알파벳 순 정렬

// concat() : 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환
// array.concat([value1[, value2[, ...[, valueN]]]])
arr0 = [0]
arr1 = [1,2,3]
arr2 = [4,5]

arr1.concat(arr2) // [1,2,3,4,5]
arr0.concat(arr1, arr2) // [0, 1,2,3,4,5]
arr0.concat(arr1, arr2, 6, 7) // [0, 1, 2, 3, 4, 5, 6, 7]

arr0 // [0]
arr1 // [1,2,3]
arr2 // [4,5]

// arr.join([separator]) : 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.
arr = [0,1,0,1,2,3,4,5,6,7,8];
arr.join() // "0,1,0,1,2,3,4,5,6,7,8"
arr.join('') // "01012345678"
arr.join('-') // "0-1-0-1-2-3-4-5-6-7-8"

// toString() : 지정된 배열 및 그 요소를 나타내는 문자열을 반환
arr = [1, 2, 'a', '1a'];
arr.toString()); // "1,2,a,1a"

immutable vs mutable

mutable(변경자 메서드) : 배열 자체를 수정
  • pop / push / reverse / shift / unshift / splice / sort
immutable(접근자 메서드) : 배열을 수정하지 않고, 기존 배열의 일부에 기반한 새로운 배열 또는 값을 반환
  • concat / filter / includes / indexOf / join / slice / toString

for of vs for in vs for

  • for of : 주로 Array에 사용 (반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체)
for (배열의 요소 of 배열) {
  실행
}

// 배열의 요소는 배열의 0번 인덱스부터 마지막 인덱스까지 하나씩 대입된다.
  • for in : 주로 Object에 사용 ( 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복)

  • for of 와 for 의 차이

arr = [1,2,3,4,5]

for (let i=0; i < arr.length; i++){
    console.log(arr[i])
}

// 1
// 2
// 3
// 4
// 5

for (let i of arr){
    console.log(arr[i])
}
// 2
// 3
// 4
// 5
// undefined
// for of 문에서의 변수는 arr의 각 element를 처음부터 끝까지 돈다.

// 위 코드를 for문으로 바꾸려면
for (let i=1; i <= arr.length; i++){
    console.log(arr[i])
}





© 2020.11. by creamer

Powered by CREAMer