[JS] 배열

배열

• 자바스크립트에서는 변수 선언 시 별도의 자료형 지정이 없기 때문에 어떤 자료형의 값들이던 다 하나의 배열공간에 담을 수 있음(자바의 컬렉션과 비슷함)
• 배열의 0번 인덱스에서 마지막 인덱스까지 순차적으로 모두 접근할 려면 향상된 반복문 사용(for of문)

배열의 선언

• 배열의 선언 시 배열의 크기를 지정한 채로 선언하거나, 크기를 지정하지 않아도 됨 (크기에 제약이 없다)

let arr1=new Array(); : //배열의 크기가 0인 배열
let arr1=new Array(3); : //배열의 크기가 3인 배열
let arr1= []; : //배열의 크기가 0인 배열 (권장)

배열에 값 대입

arr1[0] = "바나나";
arr1[1]  = "키위";
arr1[10] = "삼겹살";// 배열의 크기가 11로 늘어났다.[2]~[9]까진 비어있는상태

선언과 동시에 초기화

const arr4 = new Array("홍길동","이순신");
const arr5 = ["java","html","css"];

---

배열 객체의 메소드

1. .indexOf(찾고자하는요소)

• 배열에서 해당 요소가 위치해있는 인덱스 위치를 반환
• 존재하지 않는 요소를 제시하면 -1 반환

function indexOfTest(){
   const area2 = document.getElementById("area2");

   const arr = ["사과","딸기","바나나","복숭아","파인애플"];
   const fruit = prompt("찾고자 하는 과일명을 입력하시오");

   const index = arr.indexOf(fruit);
 
  if(index == -1){
         area2.innerHTML = `당신이 찾는 과일 ${fruit}는 판매하지 않습니다`;
  }else{
         area2.innerHTML = `당신이 찾는 과일 ${fruit}는 ${index}번째 위치에 있습니다`;
     }
  }

2. .concat(배열,배열..)

• 여러개의 배열을 결합하고자 할 때 사용
• 원본 배열에 영향을 끼치지 않는 메소드
• 두 개의 배열을 합쳐서 새로운 배열로 반환

function concatTest(){

     const area3 = document.getElementById("area3");

     const arr1 = ["사과","딸기"];
     const arr2 = ["핸드폰","전자레인지","냉장고"];

     area3.innerHTML += `arr1 : ${arr1}<br>`;
     area3.innerHTML += `arr2 : ${arr2}<br>`;

     area3.innerHTML += `arr1기준으로 배열 합침 : ${arr1.concat(arr2)}<br>`;
     area3.innerHTML += `arr1 : ${arr1}<br>`;

     area3.innerHTML += "여러개의 배열을 합치기 : "+arr1.concat(arr2, [1,2,3],["히히"]);
 }

3. .reverse()

• 배열에 담긴 값들을 역순으로 바꿔주는 메소드
• 원본배열에 영향을 끼침

const arr = [1,2,3,4,5];
area4.innerHTML +=  "reverse()호출시 : "+arr.reverse()+"<br>";

4. .sort()

• 배열 안에 담긴 값들을 문자열 기준으로 오름차순으로 정렬시켜주는 메서드
• 원본배열에 영향을 끼침

function sortTest(){
        const area5 = document.getElementById("area5");

        const arr = ["마","가","다","라","나"];

        area5.innerHTML += `arr : ${arr}<br>`;
        area5.innerHTML += `sort결과 : ${arr.sort()}<br>`;
        area5.innerHTML += `원본 arr : ${arr}<br>`;
  }

• 내림차순 정렬하고 싶다면 오름차순 정렬 후 역순으로 뒤집기(reverse)

 area5.innerHTML += `내림차순정렬 : ${arr.sort().reverse()}<br>`;

• 특이케이스 : sort시 내부요소를 문자열로 취급하여 정렬하기 때문에 문자열 기준 오름차순 정렬이 되어버린다.

const arr2 = [1 , 2, 15, 25];// 1 2 15 25
console.log(arr2.sort());
// "2" > "15" true

• 해결 방법1 : 기존 정렬기준대신 새로운 정렬기준 만들기

//1) 정렬기준을 새로만들기
function compare(a,b){
    if(a > b){
        return 1; //양수면 a가 b보다 크다는 뜻이므로 a는 b 뒤쪽에 위치 (순서를 바꿈)
    }
    else if( a == b){
        return 0;
    }else{
        return -1; //음수면 a가 b보다 작다는 뜻이므로 a는 b 앞쪽에 위치
    }
}
//2) sort매서드의 매개변수로 내가 만든 정렬기준을 추가
console.log(arr2.sort(compare));

• 해결 방법 2 : 1회용으로 정렬기준 만들기 (익명함수, 화살표함수)

//2_1) 그 외 방법(익명함수)
console.log(arr2.sort( function (a,b) { return a-b; } ));
// 양수 반환하는 경우는 크다, 음수 반환하는하는 경우 작다로 해석해서 정렬


//2_2) 화살표함수
console.log(arr2.sort( (a , b) => a-b )) //함수와 같음, 화살표 의미는 return

5. push / pop

• push(추가할 요소) : 배열의 '맨 뒤'에 요소를 추가하고 배열 크기를 반환 (원본배열에 영향)
• pop() : 배열의 '맨 뒤' 요소를 제거하고 제거된 요소를 반환 (원본배열에 영향)
• 배열의 마지막에 추가하고 빼기 때문에 연산효율이 좋음

function pushPopTest(){
      const area6 = document.getElementById("area6");

      const arr = ["서초동","방대동","역삼동","삼성동","대치동"];

      area6.innerHTML += `arr : ${arr}<br>`;
      arr.push("신사동");
      area6.innerHTML += `arr에 push후 : ${arr}<br>`;
      area6.innerHTML += `arr에 push후 배열의 크기 : ${arr.push("논현동")}<br>`;
      area6.innerHTML += `원본 arr : ${arr}<br>`;

      area6.innerHTML += `arr에 pop 후 : ${arr.pop()}<br>`;
      area6.innerHTML += `원본 arr : ${arr}<br>`;

      // 둘다 원본배열에 영향을 끼친다.
	arr.length = 0;//배열안의 데이터를 모두 날리는 방법
}

6. unshift(추가한 요소) / shift()

• unshift(추가한 요소) : 배열의 '맨 앞'에 요소 추가 후 배열의 크기 반환
• shift() : 배열의 '맨 앞' 요소를 제거하고, 제거된 요소를 반환
• 두 함수는 배열의 길이만큼 반복문을 돌림 (연산 효율 떨어짐)

7. slice / splice

• slice(시작인덱스,끝인덱스) : 시작인덱스~끝인덱스 전까지 배열 안의 요소들을 추출해주는 메소드 (원본배열에 영향을 끼치지 않음)
• splice(시작, 제거수, 추가값) : 배열의 요소를 추출해서 제거 및 추가, 추가값은 생략 가능 (원본배열에 영향을 끼침)

area8.innerHTML += `slice 결과 : ${arr.slice(2,4)}<br>`
area8.innerHTML += `splice 결과 : ${arr.splice(2, 3,["react","react2","react3"])}<br>`;

• join([구분자]) / toString() : 배열에 담긴 값들을 하나의 문자열로 합쳐서 반환 (원본배열 영향x)

area9.innerHTML += `arr : ${arr}<br>`;
area9.innerHTML += `toString : ${arr.toString()}<br>`;
// 배열객체를 html요소에 출력할 경우 내부적으로 .toString()호출후 돌아온 결과 출력

area9.innerHTML += `join : ${arr.join() }<br>`;
// join은 기본적으로 ,를 통해 하나의 문자열로 합친다면

// join메소드 호출 시 구분자 제시시 해당 구분자로 하나의 문자열로 합쳐진다.
area9.innerHTML += `구분자 제시한 join : ${arr.join(" ") }<br>`;

배열 반복문

1. 기본 반복문
2. 향상된 반복문

for of문

• for (let 변수명 of 순차적으로 접근할 배열){}
• 배열에 주로 쓰임

for(let item of arr){
   area1.innerHTML += item+"<br>";
}

 

for in문

• 객체에 주로 쓰임

function loop(){
    const arr = ["소금","후추","쌈장","삼겹살"];
    arr.mkm = "민경민";

    // 가장 기본적인 반복문
    for(let i = 0; i<arr.length; i++){
        console.log(arr[i]);
    }

    console.log("========================================================");
    //향상된 반복문 (배열을 반복시킬때 사용하는걸 권장)
    for( let food of  arr   ){
        console.log(food);
    }

    console.log("========================================================");
    // 향상된 반복문 (객체를 반복시킬때 사용하는걸 권장)
    for( let key in arr){
        console.log(key , arr[key]);
    }

    // 배열을 비우는 방법
    arr.length = 0;

    const arr2 = [1,2,3,4,5];
    arr2.length = 2;
    console.log(arr2);
		//길이 5짜리 배열에서 길이를 2개로 바꾸면 앞에 2개만 남음
}
</script>

• 배열을 통한 반복작업 (for each)
• item : 현재 반복 진행중인 요소
• index : 현재 반복 진행중인 순서
• array : 반복 진행중인 배열

function foreachTest(){

    const a = [1,2,3,4,5];

    // forEach문법 기본 형태
    a.forEach(  function(item,index,array) {
        console.log(`${item}은 ${array}의 ${index}에 위치해 있습니다.`);
				//1은 1,2,3,4,5의 0에 위치해 있습니다.
    });

    //forEach구문 안에 내가 실행시키고자 하는 이미 정의된 함수를 넣을수도 있음
		//배열 뒤에 .forEach 바로 붙일 수 있음
    [1,2,3,4,5,6,7].forEach(alert);

    forEachtest(console.log);
}

function forEachtest(callback){
    callback("잘 되나?");
}

• includes(찾을값) : 일반 자료형으로 이루어진 배열에서 내가 원하는 값이 있는지 찾을 때 사용 -존재할 때 : true 반환 / 존재하지 않을 때 : false 반환
• 배열 탐색 (find, filter) : 객체로 이루어진 배열에서 내가 원하는 값을 찾고자 할 때 사용됨

function findAndFilterTest(){
    const mkmArr = [
        { id : 'alsrudals', name : "경민" },
        { id : 'alsrudals2', name : "경민2" },
        { id : 'alsrudals3', name : "경민2" },
        { id : 'alsrudals4', name : "경민4" },
        { id : 'alsrudals4', name : "정민" },
        { id : 'alsrudals4', name : "정민4" },
        { id : 'alsrudals4', name : "경민33" },
        { id : 'alsrudals4', name : "정민2" },
        { id : 'alsrudals4', name : "정민6" },
    ];

    let mkm;
    // find의 기본형태 (내가 원하는 요소를 찾은후 return true시 현재 item을 '하나' 반환시켜주면서 반복종료)
    //                 (찾고자 하는 값이 없다면 undefined반환)
    mkm = mkmArr.find( function(item, index){
        if(item.name == "경민2"){
            return true;
        }
    })
    console.log(mkm);

    let filteredArray;
    // filter의 기본형태 : 조건을 충족하는 요소가 있으면 해당 요소를 순차적으로 빈배열안에
    //                    차곡차곡 쌓은후 해당 배열을 반환.(일치하는 데이터가 없다면 빈배열([]) 반환)
    filteredArray = mkmArr.filter( function(item){
        if(item.name.includes("경민")){ // 5개 데이터 반환
            return true; 
        }
    });
    
    // 요런구조로 filter함수가 정의되어 있음.
    function filterSample(callback){
        const emptyArr = [];

        // 반복문 돌리면서 
        for(let i =0; i<this.length; i++){
            if(callback(this[i] , i , this )){
                emptyArr.push(this[i]);
            }
        }
        return emptyArr;
    }
    // 화살표 함수로 축약시킴
    filteredArray = mkmArr.filter( item => item.name.includes("경민"));

    console.log(filteredArray);
}

• 배열 변형(map) : 현재 배열을 바탕으로 각 요소(item)에 함수를 호출하여 결과값을 반환해줌
• 기본형태는 find, filter과 동일

function mapTest(){
    const mkmArr = [
        { id : 'alsrudals', name : "경민" },
        { id : 'alsrudals2', name : "경민2" },
        { id : 'alsrudals3', name : "경민2" },
        { id : 'alsrudals4', name : "경민4" },
        { id : 'alsrudals4', name : "정민" },
        { id : 'alsrudals4', name : "정민4" },
        { id : 'alsrudals4', name : "경민33" },
        { id : 'alsrudals4', name : "정민2" },
        { id : 'alsrudals4', name : "정민6" },
    ];

    const mapedArr = mkmArr.map(function(item,index){
        return {id : item.id , index , name : item.name+index };
    });

    const mapedArr2 = mkmArr.map( (item,index) => new Object());

    console.log(mapedArr2);
}

• 화살표함수에 중괄호를 추가하면 무조건 return을 추가해야함
• switch문은 강력 동등비교 -> "+" === "+" (값 뿐만 아니라 자료형 일치까지 비교)