JavaScript : Array

JavaScript의 객체

내장 객체 Array

Array : 하나의 변수에 여러 개의 값을 저장하기 위한 JavaScript의 내장 객체
- JavaScript의 Array는 인덱스의 범위를 엄격하게 체크하지 않으며 C 계열의 배열에 비해 다양한 방식으로
작동

- 배열의 생성 : 배열 객체를 이용한 생성

// 배열 생성 ; array 객체로 생성
const v1 = new Array(10); // 10개짜리 빈 배열 생성
const v2 = new Array(); // 빈배열 
const v3 = new Array(2021, "String", true); // 어떤 객체든 집어넣을 수 있다.

// .length 속성 : 요소의 갯수
console.log('v1 :', v1, v1.length);
console.log('v2 :', v2, v2.length);
console.log('v3 :', v3, v3.length);

배열의 생성 : 리터럴

// 리터럴로 생성 (추천)
const v4 = [];
const v5 = [2021, "string", true];

Array와 객체의 관계
- 객체의 속성에 접근할 때, 다음과 같이 배열처럼 접근할 수 있음

// 객체의 속성 -> 배열처럼 접근 가능
console.log(person.name, person['name']);
console.log(person.age, person['age']);

JavaScript의 Array는 배열의 인덱스를 엄격하게 체크하지 않는다

// 인덱스를 엄격히 체크하지 않음.
const arr = []; // 빈배열
console.log(arr, arr.length);
// 인덱스 범위 벗어난 접근
arr[10] = 2021;
console.log(arr, arr.length);

Array 주요 메서드 : concat

console.log('======= 배열의 메서드')
const veges = ['배추', '무', '쪽파']
const sources = ['소금', '고춧가루', '새우젓']

// 배열합치기 : concat
const items = veges.concat(sources);
console.log("concat : ", items);

======= 배열의 메서드
[ '배추', '무', '쪽파' ] [ '소금', '고춧가루', '새우젓' ]  
concat :  [ '배추', '무', '쪽파', '소금', '고춧가루', '새우젓' ]

 

Array 주요 메서드 : join

const veges = ['배추', '무', '쪽파']
const sources = ['소금', '고춧가루', '새우젓']
console.log("join :", items.join(",")); // 요소를 ,로 합치기

 

join : 배추,무,쪽파,소금,고춧가루,새우젓

 

Array 주요 메서드 : push 와 pop

console.log("======= push & pop")
// push : 배열 맨 뒤에 새 요소 추가
// pop : 배열 맨 뒤의 요소 추출 후 제거
// push+pop : stack처럼 활용 가능.
let fruits = ['banana', 'apple', 'mango', 'orange'];
console.log(fruits);
fruits.push("수박");
console.log(fruits);
console.log('pop:', fruits.pop());// 맨 뒤 요소 추출
console.log('pop:', fruits.pop());// 맨 뒤 요소 추출
console.log('pop:', fruits.pop());// 맨 뒤 요소 추출
console.log('stack : ', fruits);

======= push & pop
[ 'banana', 'apple', 'mango', 'orange' ]
[ 'banana', 'apple', 'mango', 'orange', '수박' ]
pop: 수박
pop: orange
pop: mango
stack :  [ 'banana', 'apple' ]

 

 

Array 주요 메서드 : shift

// shift : 배열의 맨 앞에서 요소추출 후 제거
// push + shift = queue 자료형
fruits = ['banana', 'apple', 'mango', 'orange'];
fruits.push('수박');
console.log(fruits)
console.log('shift : ', fruits.shift()); // 맨 앞 요소 추출
console.log('shift : ', fruits.shift()); // 맨 앞 요소 추출
console.log('shift : ', fruits.shift()); // 맨 앞 요소 추출
console.log('queue : ', fruits);

[ 'banana', 'apple', 'mango', 'orange', '수박' ]
shift :  banana
shift :  apple
shift :  mango
queue :  [ 'orange', '수박' ]

 

 

Array 주요 메서드 : splice

- 원하는 위치의 요소를 삭제하거나 추가하는 메서드
- 인수가 한 개일 경우 : 해당 인덱스부터 끝까지 요소를 반환 후 제거

// splice : 요소 삭제와 삽입을 한번에 할 수 있다.
fruits = ['banana', 'apple', 'mango', 'orange'];
console.log("원본 : ", fruits);
// 인수가 1개일때 
console.log('splice2 : ', fruits.splice(2));
console.log('원본: ', fruits);

======= splice
원본 :  [ 'banana', 'apple', 'mango', 'orange' ]
splice2 :  [ 'mango', 'orange' ]

 

- 인수가 두 개일 경우 : 첫 번째 인수 인덱스부터 두 번째 인수 개수만큼 반환 후 제거

// 인수가 2개일 때 : 1번째 인수 인덱스 부터 2번째 인수 갯수만큼 추출 후 제거
fruits = ['banana', 'apple', 'mango', 'orange'];
console.log("원본 : ", fruits);
console.log('splice 2,1: ', fruits.splice(2, 1));
console.log('원본: ', fruits);

splice 2,1:  [ 'mango' ]
원본:  [ 'banana', 'apple', 'orange' ]
원본 :  [ 'banana', 'apple', 'mango', 'orange' ]

 

- 인수가 세 개 이상 : 첫 번째 인수 인덱스부터 두 번째 인수 개수만큼 반환 후 제거, 제거된 위치에 세 번째 이후 인수를 새로운 요소로 추가

// 인수가 3개 이상이상 : 1번쨰 인수 인덱스 부터, 2번째 인수 갯수만큼 추출후 제거, 
// 3번째 이후 인수들을 삽입
fruits = ['banana', 'apple', 'mango', 'orange'];
console.log("원본 : ", fruits);
console.log('splice 2,1,etc: ', fruits.splice(2, 1, 'kiwi', 'guaba'));
console.log('원본: ', fruits);

splice 2,1,etc:  [ 'mango' ]
원본:  [ 'banana', 'apple', 'kiwi', 'guaba', 'orange' ] 

 

Array 주요 메서드 : reverse, slice, sort

console.log("======= reverse")
// Reverse : 배열의 순서를 뒤집는다.
fruits = ['banana', 'apple', 'mango', 'orange'];
console.log("원본 : ", fruits);
fruits.reverse();  // 배열 순서 뒤집기
console.log('reversed : ', fruits);

console.log("======= slice");
// slice : 배열의 일부 추출, 원본이 유지된다.
let slices = fruits.slice(1, 3);
console.log("조각 : ", slices);
console.log("원본 : ", fruits);

console.log("======= sort");
console.log("원본 : ", fruits);
fruits.sort(); // 기본적으로 오름차순
console.log("sort(asc) : ", fruits);

======= reverse
원본 :  [ 'banana', 'apple', 'mango', 'orange' ]
reversed :  [ 'orange', 'mango', 'apple', 'banana' ]       
======= slice
조각 :  [ 'mango', 'apple' ]
원본 :  [ 'orange', 'mango', 'apple', 'banana' ]
======= sort
원본 :  [ 'orange', 'mango', 'apple', 'banana' ]
sort(asc) :  [ 'apple', 'banana', 'mango', 'orange' ] 

// 사용자의 규칙으로 정렬할 경우, 키 함수를 정의
fruits.sort(function (v1, v2) {
    if (v1 == v2) return 0;  // 반환값이 0이면 순번이 같다.
    if (v1 < v2) return 1;   // v1이 더 작으면 뒤로
    if (v1 > v2) return -1;  // v1이 더 크면 앞으로  --> 내림차순
});
console.log("sort(user Defind):", fruits)

sort(user Defind): [ 'orange', 'mango', 'banana', 'apple' ]

 

String의 split 메서드는 특정 구분자를 기준으로 문자열을 분리, Array로 반환한다/

// split : 특정 구분자 기준으로 문자열 분리 -> Arrays 반환
const str = "javascript is something strange than other languages";
let chunks = str.split(" ") // 공백으로 분리
console.log("split:", chunks);

split: [
  'javascript',
  'is',
  'something',
  'strange',
  'than',
  'other',
  'languages'
]

 

// loop 1:
for (let i = 0; i<chunks.length; i++){
    console.log("Word", chunks[i]);
}

// loop 2 :
for (let word in chunks){
    console.log("word",chunks[word]);
}

Word javascript
Word is
Word something
Word strange
Word than
Word other
Word languages