[5주차] Array 오브젝트(ES3 기준), Array 오브젝트(ES5 기준)

5주차에는 Array 오브젝트의 개념을 ES3과 ES5 기준으로 나누어서 살펴보았습니다. 😁✌️

 

 

주차	진도	강의시간(분)	기간
5주차	12. Array 오브젝트(ES3 기준) 13. Array 오브젝트(ES5 기준)	115	21년 11월 12일~21년 11월 18일

 

Array 오브젝트 (ES3 기준)

Array 오브젝트 개요

• 빌트인 오브젝트
• Array 형태
• 배열 엘리먼트
  • [123, "ABC"]에서 123, "ABC" 각각을 엘리먼트 또는 요소라고 부름
  • 배열 안에 작성할 수 있는 엘리먼트의 수는 2의 32승 - 1개
• 인덱스
  • 엘리먼트 위치를 인덱스라고 부름
  • 왼쪽부터 0번 인덱스, 1번 인덱스
• 배열 특징
  • 엘리먼트 작성이 순서를 갖고 있음
  • 배열 전체를 작성한 순서로 읽거나
  • 인덱스로 값을 추출할 수 있음
    • 인덱스는 순서를 액세스하는 역할을 함

---

배열 생성 방법

var book = new Array(); // 파라미터로 넣는 숫자가 엘리먼트 개수
var book = Array();
var book = [];

---

엘리먼트 작성 방법

• var book = ["책1", '책2'];
• 대괄호 안에 콤마로 구분하여 다수 작성 가능
• String 타입은 큰따옴표, 작은따옴표 모두 가능
• JS의 모든 타입의 값, 오브젝트 사용 가능
• 값을 작성하지 않고 콤마만 작성하면 undefined가 설정됨

---

배열 차원

• 대괄호의 수가 차원의 기준이 됨1차원 배열
• 대괄호 하나에 엘리먼트 작성
• [12, 34, 56] 형태

2차원 배열

• 배열 안에 1차원 배열을 작성
• [[12, 34, 56]]

3차원 배열

• 배열 안에 2차원 배열을 작성
• [[[12, 34, 56]]]

---

Array 인스턴스 생성

new Array()

• Array 인스턴스 생성, 반환
• 배열 생성 기준
  • 파라미터에 따라 배열 생성 기준이 다름
  • 파라미터를 작성하지 않으면 빈 배열
  • 작성한 순서로 엘리먼트에 설정
  • new Array(3)처럼 파라미터에 숫자를 작성하면 3개의 엘리먼스 생성

---

Array()

• Array 인스턴스 생성, 반환
  • new Array()와 생성 방법 및 기능 같음
• 인스턴스 생성 논리
  • new Array()는 new 연산자에서 생성자 함수를 호출하여 인스턴스 생성
  • Array()는 직접 생성자 함수를 호출하여 인스턴스 생성

---

length 프로퍼티

• 배열 [1, 2, 3]에서
  • length 값은 3
  • Array 오브젝트에 {length: 3} 형태로 설정됨
  • 처음 인덱스는 0, 마지막 인덱스는 2
• 열거/삭제는 할 수 없지만 개발자가 임의로 변경은 가능
• length 값을 변경하면 배열의 엘리먼트 수가 변경됨

---

**엘리먼트 추가, 삭제 메커니즘

엘리먼트 추가

• 배열에 엘리먼트를 추가하는 방법
  • 삽입할 위치에 인덱스 지정
  • 표현식으로 인덱스 지정

---

delete 연산자

• 연산자이기 때문에 배열에 속하는 것은 아님
• 삭제에 성공하면 true, 실패하면 false를 반환
• var 변수는 삭제 불가능
• 글로벌 변수는 삭제 가능 (var 키워드를 사용하지 않은 글로벌 변수)
• {name: value} 삭제 방법
  • 삭제할 프로퍼티 이름을 작성한다
  • ES5에서 삭제 불가를 설정할 수 있다.

// 오브젝트 프로퍼티 삭제
var book = {title: "책"};
console.log(delete book.title); // true
console.log(book.title); // undefined
// 삭제한 변수는 접근하면 에러가 나지만
// 프로퍼티로 접근하면 undefined가 출력된다.

// 오브젝트 전체 삭제
// var 변수에 오브젝트 할당시 오브젝트 전체 삭제 불가능
var book = {title: "책"};
console.log(delete book); // false

sports = {item: "축구"};
console.log(delete sports); // true

• 인덱스로 배열의 엘리먼트를 삭제할 수 있다.

// 배열 처리 매커니즘으로 인해
// 엘리먼트를 삭제해도 length가 변하지 않는다.
var value = [1, 2, 3, 4];
console.log(delete value[1]); // true
console.log(value.length); // 4

---

배열 엘리먼트 삭제 매커니즘

• 삭제된 인덱스에 undefined를 설정
  • 배열을 읽을 때 제외시켜야 함
  • 앞으로 하나씩 당겨서 엘리먼트를 이동하면 처리 시간이 소요되기 때문

---

4. 엘리먼트 삽입, 첨부

unshift()

• 0번 인덱스에 파라미터 값을 삽입
• 배열에 있던 엘리먼트는 뒤로 이동됨

---

push()

• 배열 끝에 파라미터 값을 첨부

---

concat()

• 배열에 파라미터 값을 연결하여 반환
• 파라미터가 1차원 배열이면 값만 반영

---

엘리먼트 복사

slice()

• 배열의 일부를 복사하여 배열로 반환
  • 첫 번째 파라미터의 인덱스부터 두 번째 인덱스 직전까지
    • 끝 인덱스의 디폴트 값이 length이기 때문
• true, false를 숫자로 반환

var value = [1, 2, 3, 4, 5];
console.log(value.slice(true, 3)); // [2, 3]
console.log(value.slice(false, 3)); // [1, 2, 3]

• 첫 번째 파라미터만 작성하면 끝까지 반환
• 첫 번째 파라미터 값이 두 번째 파라미터 값보다 크면 빈 배열을 반환
• 파라미터에 음수를 작성하면 length 값을 더함

var value = [1, 2, 3, 4, 5];
// -4 + 5 = 1
// -2 + 5 = 3
console.log(value.slice(-4, -2)); // [2, 3]

---

엘리먼트 값을 문자열로 변환

join()

• 엘리먼트와 분리자를 하나씩 결합하여 문자열로 연결
  • 분리자는 선택사항이고, 디폴트 값은 콤마(,)
• 마지막 엘리먼트는 분리자를 연결하지 않음
• var value = [1, 2, 3]; var result = value.join("##"); console.log(result); // 1##2##3 console.log(typeof result); // string
• 파라미터를 작성하지 않으면 콤마로 분리
• 파라미터에 빈 문자열을 작성하면 엘리먼트 값만 연결하여 반환
  • 사용 빈도수가 높음!
  • 데이터로 HTML의 마크업을 만들어 한 번에 표시할 때 사용 (ex. <table>)

var value = [1, 2, 3];
var result = value.join("");
console.log(result); // 123

---

toString()

• 배열의 엘리먼트 값을 문자열로 연결
  • 콤마로 엘리먼트를 구분

---

**toLocaleString()

• 엘리먼트 값을 지역화 문자로 반환
  • 문자열을 콤마로 연결하여 반환

---

엘리먼트 삭제

shift()

• 배열의 첫 번째 엘리먼트를 삭제
• 삭제한 엘리먼트 값이 undefined로 남지 않고 완전히 삭제됨
  • length 값이 하나 줄어듦
• 삭제한 엘리먼트를 반환
  • 빈 배열이면 undefined가 반환

---

pop()

• 배열의 마지막 엘리먼트를 삭제
• 삭제되는 엘리먼트의 위치를 제외한 나머지는 shift()와 동일
• 빈 배열이면 undefined 반환

---

splice()

• 엘리먼트를 삭제하고 삭제한 엘리먼트를 반환
• 삭제한 위치에 세 번째 파라미터를 삽입
• 파라미터를 작성하지 않으면 아무것도 삭제하지 않음
  • 삭제한 것이 없으므로 빈 배열을 반환

---

sort(분류)

sort()

• 엘리먼트 값을 오름차순으로 정렬
• 정렬 기준은 엘리먼트 값의 Unicode
  • 코드 포인트가 작으면 앞에 오고 크면 뒤에 옴
• 주의: sort 대상 배열도 정렬
  • 정렬되지 않은 값이 필요하다면 원본 배열을 미리 복사해둬야 함

---

sort()와 unicode

• 숫자에 해당하는 Unicode의 code point로 정렬

---

sort 알고리즘

var value = [101, 26, 7, 1234];
value.sort(function(one, two){
    return one - two;
});
log(value);

// [7, 26, 101, 1234]

1. sort() 파라미터의 function(){}을 호출하면서 101과 26을 파라미터 값으로 넘김. 101이 one, 26이 two에 설정됨.
2. one(101) - two(26)의 결과는 양수이며 이 값을 반환
3. 이때, 0보다 큰 값이 반환되면 배열에서 값의 위치를 바꿈. 즉, [26, 101, 7, 1234]
4. 다시 콜백 함수를 호출하면서 101과 7을 넘겨줌. one(101) - two(7)의 결과는 양수이며 0보다 큰 값을 반환
5. 반환 값이 0보다 크므로 배열에서 값의 위치를 바꿈. 즉, [26, 7, 101, 1234]
6. 다시 함수 호출, 101과 1234 넘겨줌. one(101) - two(1234)의 결과는 음수이며 0보다 작은 값 반환
7. 반환 값이 0보다 작거나 같으면 배열에서 값의 위치 바꾸지 않음. 즉, [26, 7, 101, 1234]
8. 다시 처음으로 돌아가 바뀌는 것이 없을 때까지 배열의 엘리먼트 위치를 조정

---

reverse()

• 배열의 엘리먼트 위치를 역순으로 바꿈
  • 엘리먼트 값이 아니라 인덱스 기준
  • 대상 배열도 바뀜
  • var value = [1, 3, 7, 5]; console.log(value.reverse()); // [5, 7, 3, 1]

---

**Array 오브젝트 (ES5 기준)

isArray()

• 체크하는 대상이 배열이면 true, 아니면 false를 반환
• isArray()는 함수
  • Array.isArray() 형태로 호출해야 함

---

isArray() 함수가 필요한 이유

• typeof 연산자로 위와 같은 값들의 데이터 타입을 구하면 모두 object가 나오기 때문에 배열 여부를 체크할 수 없음
• [1, 2]는 Array.isArray()를 사용하여 데이터 타입을 체크
• null은 Object.is()를 사용하여 체크
• 서버에서 JSON 데이터를 읽을 때 많이 사용

---

index 처리 메소드

indexOf()

• 파라미터 값과 같은 엘리먼트의 인덱스를 반환
  • 왼쪽에서 오른쪽으로 검색
  • 값이 같은 엘리먼트가 있으면 더이상 검색하지 않고 종료
  • 데이터 타입까지 체크
  • 같은 값이 없으면 -1을 반환
• 두 번째 파라미터의 인덱스부터 검색

---

String과 Array의 indexOf() 차이

var value = [1, 2, 5, 4, 5]; // number 타입
log(value.indexOf(5));
log(value.indexOf("5")); // 타입이 달라서 -1 반환
log(value.indexOf(5, 3)); // 3은 검색 시작 인덱스

// 2
// -1
// 4

log("ABCBC".indexOf("C", -2)); // String 오브젝트는 음수는 0으로 간주
var list = ["A", "B", "C", "B", "C"];
log(list.indexOf("C", -2)); // Array 오브젝트는 음수에 length 더해서 시작 인덱스

// 2
// 4

---

lastIndexOf()

• 파라미터 값과 같은 엘리먼트의 마지막 인덱스를 반환
  • 오른쪽에서 왼쪽으로 검색한다는 의미이기도 함
• 다른 처리 방법은 indexOf()와 동일

---

콜백 함수를 가진 Array 메소드 (키워드: 시맨틱, 독립성)

forEach()

• 배열의 엘리먼트를 하나씩 읽어가면서 콜백 함수를 호출
• 콜백 함수의 파라미터는 엘리먼트 값, 인덱스, 배열 전체
• break, continue는 사용할 수 없음
  • 반드시 처음부터 끝까지 돌아야 함
  • throw는 사용 가능
• 콜백 함수 분리(독립성)

---

for()와 forEach()의 차이

forEach()

• forEach()를 시작할 때 반복 범위 설정
• 엘리먼트를 추가하더라도 처리하지 않음
• 현재 인덱스보다 큰 인덱스의 값을 변경하면 변경된 값을 사용
  • 현재 인덱스보다 큰 인덱스의 값을 변경하면 변경된 값을 사용
• 현재 인덱스보다 큰 인덱스의 엘리먼트를 삭제하면 배열에서 삭제되므로 반복에서 제외됨
  • 추가는 처리하지 않지만, 삭제는 반영

---

for()와 forEach()

• forEach()는 시맨틱 접근
  • 처음부터 끝까지 반복한다는 시맨틱
  • 반복 중간에 끝나지 않는다는 시맨틱
  • 시맨틱으로 소스 코드의 가독성 향상
• for()는 함수 코드를 읽어야 알 수 있음
  • break, continue
• forEach()는 반복만 하며
  • 콜백 함수에서 기능 처리, this 사용 가능
• forEach()는 인덱스 0부터 시작
  • for()와 같이 인덱스 증가 값을 조정할 수 없음
  • 뒤에서 앞으로 읽을 수도 없음. 이것도 시맨틱 접근

---

true, false를 반환하는 메소드

every()

• forEach()와 같은 시맨틱 접근
• 배열의 엘리먼트를 하나씩 읽어가면서 false를 반환할 때까지 콜백 함수를 호출
  • 즉 false가 반환되면 반복을 종료
  • false를 반환하지 않으면 true를 반환
• false가 되는 조건이 배열의 앞에 있으면 효율성이 높음

---

some()

• every()처럼 시맨틱 접근
• 단, true를 반환할 때까지 콜백 함수를 호출
  • 즉, true가 반환되면 반복을 자동으로 종료
  • true를 반환하지 않으면 false를 반환
• true가 되는 조건이 배열의 앞에 있을 때 효율성이 높음

---

필터, 매핑

filter()

• forEach()처럼 시맨틱 접근
• 배열의 엘리먼트를 하나씩 읽어가면서
• 콜백 함수에서 true를 반환하면 현재 읽은 엘리먼트를 반환
• 조건에 맞는 엘리먼트를 추려낼 때 유용

---

map()

• forEach()처럼 시맨틱 접근
• 배열의 엘리먼트를 하나씩 읽어가면서 콜백 함수에서 반환한 값을 새로운 배열에 첨부하여 반환
• forEach()와 map()은 반환 여부의 차이가 있음
  • 사용 목적 역시 다름

---

반환 값을 파라미터 값으로 사용

reduce()

• forEach()처럼 시맨틱 접근
• 배열 끝까지 콜백 함수 호출
  • 파라미터 작성 여부에 따라 처리가 다르다.
  • 첫 번째 파라미터에 콜백 함수를 전달하고 두 번째 파라미터에는 초깃값을 전달할 수 있다.

---

콜백 함수만 작성한 경우 (즉, 파라미터를 하나만 작성한 경우)

var value = [1, 3, 5, 7];
var fn = function (prev, curr, index, all) {
  console.log(prev + "," + curr);
  return prev + curr;
};
var result = value.reduce(fn);
console.log("결과:", result);
// 실행 결과
// 1,3
// 4,5
// 9,7
// 결과:16

• 처음 콜백 함수를 호출할 때
  • 인덱스 [0]의 값을 직전 값에 설정
  • 인덱스 [1]의 값을 현재 값에 설정
  • 인덱스에 1을 설정
• 두 번째로 콜백 함수를 호출할 때
  • 콜백 함수에서 반환된 값을 직전 값에 설정
  • 인덱스 [2]의 값을 현재 값에 설정
• 위의 코드가 4번이 아니라 3번 반복한 것은 처음 시작할 때 인덱스가 1이기 때문

두 번째 파라미터를 작성한 경우

var value = [1, 3, 5, 7];
var fn = function (prev, curr, index, all) {
  console.log(prev + "," + curr);
  return prev + curr;
};
var result = value.reduce(fn, 7);
console.log("반환:", result);
// 실행 결과
// 7,1
// 8,3
// 11,5
// 반환:16

• 처음 콜백 함수를 호출할 때
  • 두 번째 파라미터 값을 직전 값에 설정
  • 인덱스 [0]의 값을 현재 값에 설정
  • 인덱스에 0을 설정
• 두 번째로 콜백 함수를 호출할 때
  • 콜백 함수에서 반환된 값을 직전 값에 설정
  • 인덱스 [1]의 값을 현재 값에 설정

---

reduceRight()

• reduce()와 처리 방법이 같음
• 단, 배열 끝에서 앞으로 하나씩 읽어가면서 콜백 함수에서 반환한 값을 반환

var value = [1, 3, 5, 7];
var fn = function(prev, curr, index, all){
    log(prev + "," + curr);
    return prev + curr;
};
var result = value.reduceRight(fn);
log("반환:", result);

// 7,5
// 12,3
// 15,1
// 반환:16