JS(7) Type - 객체타입(1) 배열

객체타입 (Object Types)

객체는 property로 값과 메서드를 가지며, 이 둘은 각각 객체의 상태와 동작을 나타냄

값을 변수에 저장할 때 값 자체가 아닌 값의 위치가 저장됨

let arr1 = [1,2,3];
let arr2 = arr1;

arr1[0] = 10;
console.log(arr2); // [10,2,3]

 

배열(Array) : 데이터를 순서대로 저장하는 객체

원시타입과 달리 여러개의 데이터를 한 변수에 저장 가능

데이터를 추가, 제거, 정렬, 검색 등 여러가지 메소드 제공

 

배열의 생성

const arr1 = [];
const arr2 = [1,2,3];
const arr3 = new Array(4,5,6); // [4, 5, 6]
const arr4 = new Array(3); // [비어있음 x 3]

 

배열의 특징

const myArray = [1, 2, 3, 4, 5];
console.log(myArray.length); // 5 배열의 길이

const arr = [[1,2],[3,4],[5,6]]; // 다차원 배열

 

배열의 메소드

 

- push() / pop() : 배열의 끝에 요소를 추가하고 길이를 반환 / 배열의 마지막 요소를 꺼내서 반환

const arr = [1, 2, 3];
console.log(arr.push(4)); // 4 길이 반환
console.log(arr); // [1, 2, 3, 4]
console.log(arr.pop()); // 4 꺼낸 요소 반환
console.log(arr); // [1, 2, 3]

 

- shift()  unshift() : 배열에서 처음 요소를 꺼내고 반환 / 배열의 앞에 요소를 추가하고 길이 반환

const myArray = ["사과", "바나나", "수박"];
console.log(myArray.shift()); // 사과 꺼낸 요소 반환
console.log(myArray); // ["바나나", "수박]
console.log(myArray.unshift("오이", "배")); // 4 길이 반환
console.log(myArray); // ['오이', '배', '바나나', '수박']

 

- splice() : 배열의 요소를 추가, 제거 또는 교체

const arr = [1, 2, 3];
console.log(arr.splice(1, 0, 4)); // 1번째 인덱스(0) 앞에서부터 0개를 삭제하고 4를 추가. 삭제한 요소가 없으니 빈 배열 반환.
console.log(arr); // [1, 4, 2, 3]

console.log(arr.splice(2, 1, 5)); // 2번째 인덱스(2) 앞에서부터 1개를 삭제하고 5를 추가. 삭제한 요소들로 이루어진 새 배열 [2] 반환.
console.log(arr); // [1, 4, 5, 3]

console.log(arr.splice(0, 4, 1, 2, 3, 4)); // 처음부터 4개를 삭제하고 1, 2, 3, 4를 추가. 삭제한 요소들로 이루어진 새 배열 [1, 4, 5, 3] 반환.
console.log(arr); // [1, 2, 3, 4]

arr.splice(1, 2); // 1번째 인덱스(2) 앞에서 부터 두개를 삭제
console.log(arr); // [1, 4]

 

- slice() : 배열에서 요소들을 추출해서 새로운 배열로 반환

const arr = [1, 2, 3, 4];
console.log(arr.slice(1, 3)); // 1번째 인덱스(2) 앞에서 부터 3번째 인덱스(4)앞까지 슬라이싱

console.log(arr.slice()); // 인자가 없으면 전체

console.log(arr.slice(1)); // 두번째 인자가 없으면 끝까지

 

- sort() : 배열의 요소를 정렬하고 정렬된 배열을 반환. 숫자를 정렬할 때는 인수로 비교 함수 활용

const arr = ['가나다라', '마바사아', '나다라마'];
console.log(arr.sort()); // ['가나다라', '나다라마', '마바사아']
console.log(arr); // ['가나다라', '나다라마', '마바사아']

// 원소를 문자로 전환한 후 유니코드 순서대로 변환하므로 숫자는 다르게 정렬됨
const nums1 = [3, 1, 8, 6];
console.log(nums1.sort()); // [1, 3, 6, 8]

const nums2 = [23, 5, 1000, 42];
console.log(nums2.sort()); // [1000, 23, 42, 5]

//비교함수(a에서 b를 빼서 음수와 양수가 나오는)를 활용
nums1.sort(function(a,b){return a - b}); // [1, 3, 6, 8]
nums2.sort(function(a,b){return a - b}); // [5, 23, 42, 1000]

 

- forEach() : 배열의 각 요소에 대해 함수를 실행. 함수는 인자로 배열 요소, 인덱스를 받음

const arr = ['젠지', 'kt', '한화'];
arr.forEach(function(item, index, arr){
	console.log(item, `은/는 ${index}번째 인덱스 입니다.`);
	console.log(`원래 배열은 ${arr}입니다.`);
});
// 젠지 은/는 0번째 입니다.
// 원래 배열은 젠지,kt,한화입니다.
// kt 은/는 1번째 입니다.
// 원래 배열은 젠지,kt,한화입니다.
// 한화 은/는 2번째 입니다.
// 원래 배열은 젠지,kt,한화입니다.

const arr2 = [];
arr.forEach(function(item){
	arr2.push(item + '짱');
});
console.log(arr2); // ['젠지짱', 'kt짱', '한화짱']

 

- map() : 배열의 각 요소에 대해 주어진 함수를 실행. forEach와 비슷하지만 새로운 배열을 반환

const arr = [1, 2, 3];
const arr2 = arr.map((x,y)=>x+y); // 각 요소들과 인덱스의 합
console.log(arr2); // [1, 3, 5]

 

- filter() : 배열의 각 요소에 대해 주어진 함수에서 true인 값만 가지고 새로운 배열을 반환

const testArray = [0,1,2,3,4,5];

testArray.filter(function(c){ return c <= 2; }); // [0, 1, 2] true인것들로 새 배열 만듦

testArray.map(function(c){ return c <= 2 }); // [true, true, true, false, false, false] 반환된 값으로 새 배열을 만듦

const oddarray = testArray.filter(function(item, index){
	if(item % 2 === 1){
    	console.log(`${index}번째 요소 ${item}은/는 홀수입니다.`);
        return true;
    } else {
    	console.log(`${index}번째 요소 ${item}은/는 짝수입니다. 탈락`);
        return false;
    }
});
// 0번째 요소 0은/는 짝수입니다. 탈락
// 1번째 요소 1은/는 홀수입니다.
// 2번째 요소 2은/는 짝수입니다. 탈락
// 3번째 요소 3은/는 홀수입니다.
// 4번째 요소 4은/는 짝수입니다. 탈락
// 5번째 요소 5은/는 홀수입니다.

console.log(oddarray); // [1, 3, 5]

 

- reduce() : 배열의 요소를 모두 더해줌. a에 누적값 c에 가산값. 초깃값 필수

const arr = [1, 2, 3];
const sum = arr.reduce((a,c)=>a+c,0) // a에 초깃값 0부터 c를 누적함. a:0 c:1 -> a:1 c:2 -> a:3 c:3
console.log(sum); // 6


// 객체 연산 가능
const data = [
    {
        "age": 28,
        "eyeColor": "green",
        
    },
    {
        "age": 37,
        "eyeColor": "green"
    },
    {
        "age": 39,
        "eyeColor": "brown"
    }
];
const ageSum = data.reduce((a, c) => a + c.age, 0);
console.log(ageSum); // 104

 

- includes() : 요소가 포함되어있으면 true 아니면 false 반환

const arr1 = ['hello', 'world', 'Damn']
arr1.includes('Damn') // true

 

- join() : 배열 요소들을 문자열로 연결

const arr1 = ['hello', 'world', 'Damn']
arr1.join('!') // hello!world!Damn

const arr2 = ['010', '1034', '1100']
arr2.join('-') // 010-1034-1100