[Javascript] Array

이 글에서는 Javascript에서의 array에 대해서 알아보도록하겠습니다.

 

배열(array)이란?

- 이름과 인덱스로 참조되는 값들의 집합

 

 

배열을 구성하는 값을 배열의 element라고 하며, 배열의 위치를 가리키는 숫자를 index라고 합니다.

 

자바스크립트에서 배열의 특징은 아래와 같습니다.

 

• 배열 요소의 타입이 고정되어 있지 않으므로, 같은 배열에 있는 배열 요소끼리의 타입이 서로 다를 수도 있습니다.
• 배열 요소의 인덱스가 연속적이지 않아도 되며, 따라서 특정 배열 요소가 비어 있을 수도 있습니다.
• 자바스크립트에서 배열은 Array 객체로 다뤄집니다.

배열 생성

 

배열을 생성하는 방법은 다음과 같습니다.

var arr = [배열요소1, 배열요소2,...];          // 배열 리터럴을 이용하는 방법

var arr = Array(배열요소1, 배열요소2,...);     // Array 객체의 생성자를 이용하는 방법

var arr = new Array(배열요소1, 배열요소2,...); // new 연산자를 이용한 Array 객체 생성 방법

 

 

배열의 참조

배열 요소를 참조하고 싶을 때는 [] 연산자를 사용합니다.

var arr = ['minji', 'taeyoun', 'minbeom']

console.log(arr[1]) // taeyoun 출력

 

배열 요소 추가 및 삭제

 

예제에서 세 번째 실행문은 배열의 현재 길이보다 더 큰 인덱스에 요소를 저장하려고 합니다.

자바스크립트에서는 이렇게 배열의 길이를 넘는 인덱스에 요소를 저장하는 것을 허용합니다.

이때 배열의 길이는 자동으로 해당 인덱스까지 늘어나게 됩니다.

var arr = ["JavaScript"]; // 요소가 하나뿐인 배열을 생성함.

var element = arr[0];     // 배열의 첫 번째 요소를 읽어서 대입함.

 

arr[1] = 10;      // 배열의 두 번째 요소에 숫자 10을 대입함. 배열의 길이는 1에서 2로 늘어남.

arr[2] = element; // 배열의 세 번째 요소에 변수 element의 값을 대입함. 배열의 길이는 2에서 3으로 늘어남.

document.write("배열 arr의 길이는 " + arr.length + "입니다.<br>");   // 배열의 길이를 출력함.

 

delete arr[2];    // 배열의 세 번째 요소를 삭제함. 하지만 배열의 길이는 변하지 않음.

 

document.write("배열 arr의 요소에는 [" + arr + "]가 있습니다.<br>"); // 배열의 요소를 모두 출력함.

document.write("배열 arr의 길이는 " + arr.length + "입니다.");       // 배열의 길이를 출력함.

 

추가

1. arr.push(추가할 요소);         // push() 메소드를 이용하는 방법
2. arr[arr.length] = 추가할 요소; // length 프로퍼티를 이용하는 방법
3. arr[특정인덱스] = 추가할 요소; // 특정 인덱스를 지정하여 추가하는 방법

 

삭제 시에는 pop() 함수 및 delete 키워드가 사용가능합니다. 둘은 실행 후 배열 길이에서 차이가 발행합니다. pop의 경우 배열의 길이가 줄어들지만 delete는 element의 삭제를 진행하지만 길이는 변하지 않습니다.

 

배열 요소 모두 출력

1. for 이용

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

 

2. for of 이용

for(let fruit of fruits) {
    console.log(fruit);
}
console.clear();

 

3.forEach 를 이용

fruits.forEach(function(fruit,index,array) {
    console.log(fruit,index,array);
});

📌arrow function으로 위의 식 표현.
fruits.forEach((fruit) => console.log(fruit));

 

배열 요소 searcing

1. indexOf : find the index / 배열 안에 어떤 값이 몇번째 인덱스에 있는지 알고 싶을 때 사용할 수 있음.

console.log(fruits);
console.log(fruits.indexOf('red'));    // -1을 반환 false
console.log(fruits.<indexOf('lemon'));   // 2

2. includes : 배열에 아이템이 있는지 없는지 리턴

console.log(fruits.includes('kiwi'));   // false 
console.log(fruits.includes('strawberry')); //true

3.lastIndexOf : 값은 값이 배열 안에 함께 들어있을 때, 맨 뒤에 있는 같은 값의 index 값을 출력 해줌

console.clear();
fruits.push('strawberry');
console.log(fruits);
console.log(fruits.indexOf('strawberry'));  //0
console.log(fruits.lastIndexOf('strawberry'));  //6

 

배열 요소 모두 묶어 string으로 만들기

join()

{
    const fruits = ['apple', 'banana', 'orange'];
    const str = fruits.join(', ');
    console.log(str)
}

 

string에서 분간자 기준으로 배열 만들기

split()

{
    const fruits = 'apple, kiwi, bnanan, cherry';
    const arr = fruits.split(',');
    console.log(arr)
}

 

배열 요소 반대로 정렬

reverse()

{
    const array = [1, 2, 3, 4, 5];
    const reverse_array = array.reverse();
    console.log(reverse_array)
}

 

배열 요소 특정 범위 index 를 새로운 배열에 할당

slice()

{
    const array = [1, 2, 3, 4, 5];
    const slice_array = array.slice(2, 5)
    console.log(slice_array)
}

 

배열 요소 중 특정 값 찾아서 새로운 배열에 넣기

find()

{
	class Student{
    constructor(name, age, enrolled, score){
        this.name = name;
        this.age = age;
        this.enrolled = enrolled;
        this.score = score;
    	}
	}

	const students = [
    new Student('A', 29, true, 45),
    new Student('B', 28, false, 80),
    new Student('C', 30, true, 90),
    new Student('D', 40, false, 66),
    new Student('F', 18, true, 88),
	]

    // const arr = [];
    // students.forEach((student) => {
    //     if (student.score === 90){
    //         arr.push(student)
    //     }
    // })
    // console.log(arr)

    const result1 = students.find(function(student, index){
        return student.score === 90;
    })
    console.log(result1);
    
    const result2 = students.find(student => student.score === 90)
    console.log(result2);
}

 

배열 요소 중 특정 값에 해당하는 요소들 새로운 배열에 넣기

filter()

{
    // const result = [];

    // students.forEach(student => {
    //     if(student.enrolled)
    //         result.push(student)
    // })
    // console.log(result)
    const result = students.filter(student => student.enrolled);
    console.log(result)
}

 

배열 요소 중 특정 key의 모든 value 새로운 배열에 할당

map()

{
    const result = students.map(student => student.score);
    console.log(result)
}

 

배열 요소 중 특정 값이 1개라도 있는지 확인

some()

{
    const result = students.some(student => student.score < 50);
    console.log(result)
}

 

배열 요소의 평균 구하기

reduce()

{
    const result = students.reduce((prev, curr) => prev + curr.score, 0)
    console.log(result / students.length)
    // reduceRigth은 거꾸로 간다. 
}

 

 

* 아래의 글들을 참고하여 작성하였습니다.

https://intrepidgeeks.com/tutorial/dream-code-ellyjs-content-sorting-9-10-kinds-of-array-functions

http://www.tcpschool.com/javascript/js_array_basic