js) 배열 정리 (+ 관련 함수)
▤ 목차
배열이란 일반적으로 '리스트 객체' 라고 생각하면 편하다.
배열은 보통 리스트에 저장된 다수의 값들을 포함하고 있는 하나의 객체이다.
여러 개의 기억장소에 대해 대표명(배열명)하나만을 부여하고, 배열명[첨자] 형태로 각 기억장소를 구분한다.
반복 처리가 효과적이다.
✔ js 배열은
⌨ 형식
배열명 = new Array();초기값을 줄 수있지만, 배열을 넘어가면 자동적으로 배열이 확장된다.
💻 코드로 보기
let aa= new Array(); //초기값 줄 수 있는데, 늘어나면 알아서 확장된다.
aa[0] =10;
aa[1] =10.5;
aa[3] ='결과로';
document.write(`aa[0] : ${aa[0]} aa[1] : ${aa[1]} aa[3] : ${aa[3]}`);
//aa[0] : 10 aa[1] : 10.5 aa[3] : '결과로'
document.write(' <br>',`aa[2] : ${aa[2]}`);
//aa[2] : '결과로'
js 배열은 타입에 영향을 받지 않는다.
aa[4] ="안녕";
aa[5] =true;
aa[6] ={kbs : 9, sbs:5}; //json 형식도 가능
document.write('<br>', aa[4],' ', aa[5],' ', aa[6]['sbs'],' ', aa[6].kbs);
배열의 길이를 알고 싶은 경우에는 java와 같이 length를 사용하면된다.
let bb = new Array(100,200,300);
document.write('<br>', bb[1],' ', bb[2],' ', bb[3],' 크기는',bb.length);
👏 배열의 길이 (인덱스로 넣을 수 있다.)
const cc = []; //비어있는 배열 선언. 배열 리터럴
cc[0] = 'tom';
cc.push(23); //prototype method
cc.push('seoul');
cc.push(82,1234,5678);
document.write('<br>', cc[0],' ',cc[2], ' ', cc[3]); //?
document.write(`<br> cc 배열의 크기는 ${cc.length}`); //?
위의 출력될 값을 생각해보자.
값은 tom seoul 82 로 출력될 것이다. 결국 배열의 길이는 6으로 나온다.
✔const 배열 변경 가능성
const로 변수를 선언하는 경우 값을 바꿀 수 없다고 배웠다.
const a = 3;
a = 5; //err
const로 정의한 변수도 바꿀 수 없을까? 있다. 혼란스럽지만 let과 마찬가지로 const로 선언한 배열도 참조타입의 값을 선언할 수 있다.
const arr = [];
arr.push(1);
arr.push("haha");
arr[0] = 'tom';
//err안남
배열의 요소값은 변경이 가능하다. 왜일까?
const는 변수가 한번 메모리 주소를 가리키면 더이상 다른 곳을 가리킬 수 없다. 즉, 메모리 주소에 이름(변수+식별자)를 고정시킨 것이다. 변수와 변수명은 해당 주소에 붙어있다고 생각하자.
위와같이 const arr =[] 이 선언된다면 arr이는 힙 영역 어딘가에 메모리를 가리키게 될 것이다.
이후, 배열을 변경하는 것은 stack의 값을 변경하는 것이 아닌 힙메모리 영역의 데이터를 변화시키는 것이기 때문에 오류가 나지 않는 것이다.
✔배열 요소 출력 및 제거
let korea = ['연필','지우개','노트'];⌨ 출력
1번 방법
for(let i=0; i<korea.length; i++){
document.write(korea[i]+" ");
}2번 방법
for(let i of korea){
document.write(i+" ");
}반복 가능한 객체(Array, Map,Set, String, arguments ..등)에 대해 사용할 수 있다.
보통은 Array(배열)에 많이 사용한다.
0번째 요소부터 마지막 요소까지 순차적으로 출력된다.
배열안에 있는 요소를 꺼내 사용하기 좋다.
3번 방법
for(let i in korea){
document.write(korea[i]+" ");
}
object에 사용할 수 있는 객체이다.
배열에 사용할 수 있지만 보통 배열은 of 를 사용한다.
const obj = {
name : '이름',
age : '나이'
}
for(const key in obj){
console.log(key); // key값 출력
console.log(obj.name, obj.age); // value 값 출력
console.log(`key 값 : ${key}`); // 1. key값 : 이름 // 2. key값 :age
console.log(`value 값 : ${obj[key]}`); // 1. value 값 : 이름 // 2. value값 : 나이
}
위와 같은 코드에서 obj.name처럼 사용하기 위해서는 객체내에 name이라는 key값을 가진 value가 존재해야한다.
없는 key값을 사용하게 되면 undefined가 출력된다.
객체의 모든 value값을 얻으려면 obj[key]로 객체를 순회하여 얻을 수 있다.
4번 방법 forEach()
const array = ['1번', '2번', '3번'];
array.forEach((element)=>{
console.log(element);
})콜백 함수를 사용한다.
콜백함수란 매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것을 말한다.
5번 방법 while / do while
while(condition) {
// condition이 참이면 실행
}
do {
// 거짓이더라도
//do에 작성된 코드는 무조건 1회는 실행
}while(condition)
do while은 잘 사용하지 않는다.
💻 제거
let ar = ['I','go','home'];👏 delete
delete ar[1]; //go 삭제
document.write(ar , ' ' , ar.length);
//I,,home 3
delete 같은 경우, 자리는 남아 있다.
즉, 배열의 길이는 그대로 유지된다.
👏 splice
ar.splice(1,1); //인덱스 1부터 1개 삭제
document.write(ar , ' ' , ar.length); //I,home 2
인덱스를 삭제해버린다.
즉, 배열의 길이도 변경이된다.
ar.push('good');
ar.splice(1,0, 'kbs', 'mbc');
//good,kbs,mbc
👏 shift() 와 pop()
ar.pop(); //배열의 마지막 요소 삭제
ar.shift(); //배열의 첫번째 요소 삭제
👏 구조분해 할당
배열, 객체의 값들을 추출하여 한번에 여러 변수에 할당하는 기능
let nums = [1,2,3,4];
let [a1, a2, a3] = nums;
document.write(`<br> ${a1} ${a2} ${a3}`);
let persons = {name:'이기자', age:22, gender:'남'};
let {name:irum, age:nai, gender:gen} = persons;
document.write(`<br> ${irum} ${nai} ${gen}`);
let {name, age,gender} = persons; //키와 변수명이 일치하는 경우, 키명만 적어주면 된다.
document.write(`<br> ${name} ${age} ${gender}`);
✔ 전개 연산자 (배열 결합)
let digits = [..."0123abc"];문자열을 각 요소로 만들어 배열을 만들어버린다.
⌨ 전통적 배열 결합
const arr1 = [1,2,3];
const arr2 = [4,5,6];
const arr3 = arr1.concat(arr2); //배열 결합 (전통적)
💻 전개 연산자
const arr4 = [...arr1,...arr2];
document.write("<br><br>"+ arr4);arr1.push(...arr2);
const fruits =['apple','peach','melon'];
const obj1 = {...fruits}; //객체에 담기
document.write(obj1, ' ' , obj1[0]);