[javaScript] 배열 메서드 정리 & 배열의 반복문과 복사

배열이란

배열은 순서가 있는 값의 묶음을 말한다.

배열은 대괄화를 이용해서 만들며, 대괄호 내부의 순서(index)로 조회할 수 있다.

 

이때 index에 해당되는 value를 배열에서만 특화적으로 요소,혹은 원소(element)라고 부르기도 한다. 

---

배열의 모양

배열은 다음과 같이 생겼다.

let myArray = [32,45,33,52,12];

요소는 예시처럼 숫자가 아니라, 문자,객체,배열 등 다양한 형태가 모두가능하다.

---

배열을 만드는 법

• 대괄호(square bracket)을 이용해서 만든다.
• 각각의 원소는 쉼표로 구분해준다.

---

배열을 조회하는 법

배열이름[index]

let myNumber = [12,33,24,35,22]

myNumber[1] //33

각각의 요소에 0부터 순서대로 매겨지는 index값으로 조회할 수 있다.

대괄호 안에 인덱스 넣으면 끝!

---

배열의 요소를 변경하는 법

let myNumber = [12,33,24,35,22]

myNumber[1] //33
myNumber[1] = 50
myNumber[1] //50

변수를 재할당 해줄 때와 같이 =를 사용해서 재할당이 가능하다.

---

배열의 길이 알아내기

 arr.length

배열의 길이를 조회할땐, 배열이름 뒤에 .length를 붙이면 된다.

let myNumber = [12,33,24,35,22] 

myNumber.length // 5

기본적으로 .length는 배열에서만 사용할 수 있고, 다음의 두가지 상황도 추가로 알고 있음 좋다.

• string의 길이를 알아낼 수 있다.
• arguments 유사배열(사실은 객체)의 길이를 알아낼 수 있다.

//1️⃣문장길이 조회
let string = 'chilldev say hello'
string.length = 18 //띄어쓰기까지 센다.


//2️⃣arguments객체 길이 조회
//arguments란 인자를 받는 자바스크립트 함수에 자동으로 생기는 객체로,
//받은 인자들을 순서대로 정리한다.
function returnArguments(){
    return arguments
}
returnArguments('a','b','c','d')[0] // 'a' 

//배열문법 length로 조회가능하지만
//Array.isArray를 사용해 조회해보면 배열이 아니라고 나온다.
Array.isArray(returnArguments('a','b','c','d')) // false

---

배열에 사용되는 다양한 메서드

메서드	설명	원본 변형	리턴값	예시, 주의
.split()	지정한 구분자를 이용해서 문장을 배열로 나눈다.	원본변형❌	나누어진 배열	const str = 'The quick brown fox jumps over the lazy dog.'; const words = str.split(' '); console.log(words[3]); // "fox" // 🛑 split(' ') === 띄어쓰기로 나누기 const chars = str.split(''); console.log(chars[8]); // "k" // 🛑 split('') === 모든 글자 나누기 // 띄어쓰기도 포함됨 const strCopy = str.split(); console.log(strCopy); // ["The quick brown fox jumps over the lazy dog."] // 🛑 split() === 문장을 포함 배열을 반환 const myString = ''; const splits = myString.split(); console.log(splits); //[""]
.join()	배열의 모든 요소를 연결해 하나의 문자열로 만든다.	원본변형❌	합쳐진 문자열	const elements = ['Fire', 'Air', 'Water']; console.log(elements.join()); // "Fire,Air,Water" // 🛑 join() ===  쉼표 로 연결 console.log(elements.join('')); // "FireAirWater" // 🛑 join('') ===  연결기호없이 연결 console.log(elements.join('-')); // "Fire-Air-Water"
.slice()	어떤 배열의 지정한구간을 새로운 배열로 복사해옴 (얕은 복사)	원본변형❌	새롭게 복사해온 배열	const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; animals.slice(2) // ["camel", "duck", "elephant"] // 🛑하나만 적으면 0부터 해당 인덱스까지 복사 animals.slice(2, 4) // ["camel", "duck"] animals.slice(1, 5) // ["bison", "camel", "duck", "elephant"] // 🛑end인덱스가 배열을 넘으면 그냥 끝까지만 복사 animals.slice(-2) // ["duck", "elephant"] // 🛑음수는 끝에서부터 복사 animals.slice(2, -1) // ["camel", "duck"] // 🛑음수는 무조건 끝에서부터의 인덱스로 계산 animals.slice() //["ant", "bison", "camel", "duck", "elephant"] // ⭐️ 배열 전체 새롭게 얕은 복사! 자주씀
.splice()	배열의 기존 요소를 삭제or교체or추가 해서 배열의 내용 변경 array.splice(시작인덱스,몇개지울건지,뭘로바꿀껀지)	원본변형⭕️	제거한 요소를 담은 배열 아무 값도 제거하지 않았으면 빈 배열	const months = ['Jan', 'March', 'April', 'June']; months.splice(1, 0, 'Feb'); // [] 0개 지움 // 🛑0개 지우면 그냥 그 사이에 추가만 한다. console.log(months); //["Jan", "Feb", "March", "April", "June"] months.splice(4, 1, 'May'); // ['June'] 1개 지움 console.log(months); //["Jan", "Feb", "March", "April", "May"]
.concat()	기존배열에 인자로 주어진 배열의 값을 합쳐 새 배열 반환	원본변형❌	추가된 새로운 배열	const array1 = ['a', 'b', 'c']; const array2 = ['d', 'e', 'f']; const array3 = array1.concat(array2); console.log(array3); //["a", "b", "c", "d", "e", "f"] console.log(array1); //['a', 'b', 'c']
Array.isArray()	배열인지 체크한다.		boolean 배열인 경우 > true 배열이 아닌 경우 > false	let numbers = [1,2,3,4,5] typeof numbers // object Array.isArray(numbers) // true
.push()	배열의 마지막에 요소를 더한다.	원본변형⭕️	더한 후, 총 length	let numbers = [1,2,3,4,5] numbers.push(6) numbers // [1,2,3,4,5,6]
.unshift()	배열의 처음에 요소를 더한다.	원본변형⭕️	더한 후, 총 length	let numbers = [1,2,3,4,5] numbers.unshift(0) numbers // [0,1,2,3,4,5]
.pop()	배열의 마지막 요소를 뺀다.	원본변형⭕️	뺀 후, 빠진 요소	let numbers = [1,2,3,4,5] numbers.pop() numbers // [1,2,3,4]
.shift()	배열의 처음에 요소를 뺀다	원본변형⭕️	뺀 후, 빠진 요소	let numbers = [1,2,3,4,5] numbers.shift() numbers // [2,3,4,5]
.indexOf()	특정 요소가 몇번째 인덱스에 있는지 찾는다.		index 값	const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'] beasts.indexOf('bison') // 1
.includes()	특정 요소가 배열에 포함되어 있는지 찾는다.		boolean 배열에 있을 경우 > true 배열에 없을 경우 > false	const pets = ['cat', 'dog', 'bat']; pets.includes('cat') // true //🛑 IE지원 안됨

---

배열의 반복문

• arr.length를 이용한 for문

배열의 가장 끝 index는 항상 배열의 길이보다 1만큼 작다. (index는 0부터 시작, length는 1부터 시작하기 때문)

위의 전제가 있어 아래처럼 for문을 돌리면 배열 내의 모든 index를 순회할 수 있다.

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

 

• forEach 반복문

배열 특수로 사용할 수 있는 반복문 메서드이다. 배열의 모든 요소를 순회한다.

arr.forEach(function(item){
  console.log(item)
})

 

 

• for ...of 반복문

배열 특수로 사용할 수 있는 반복문 메서드이다.  배열의 모든 요소를 순회한다.

for(item of arr){
	console.log(item)
}

 

• ⛔️비추 for ...in 반복문

배열에서 index를 순환하는 데에도 사용 가능하고, 객체의 key 값을 전부 순회하는 데에도 사용가능하다.

//배열에선 index 순회
let arr = ['a','b','c']

for(index in arr){
    console.log(`${index}번째 요소: ${arr[index]}`)
}

//0번째 요소: 'a'
//1번째 요소: 'b'
//2번째 요소: 'c'

//객체에선 key값 순회
let obj = {a:1,b:2,c:3}

for(key in obj){
    console.log(`${key}키의 값 ${obj[key]}`)
    //⛔️ 이때 `${obj.key}` 로는 undefined!!
}

//a키의 값 1
//b키의 값 2
//c키의 값 3

하지만 for in을 배열의 순환에 사용하는 것은 위험할수 있다고 한다.

mdn에서도 배열의 반복에선 forEach나 for..of를 권하고, for...in은 object에 권하고 있다.

stack overflow에서도 예시를 통해서 배열의 for...in이 안좋은 이유를 몸소 보여주고 있다.

for ...in은 키가 숫자가 아닌 프로퍼티도 순회 대상에 포함되는 문제점과, 배열에 사용되는 것 대비 10~100배 정도 느리다고 한다.

---

배열의 복사

사용 메서드	주의사항
arr.slice()	-얕은 복사 -빈 인자	const arr = [1,2,3] const copy = arr.slice() copy // [1,2,3] arr === copy //false
arr.concat()	-얕은 복사 -빈 인자	const arr = [1,2,3] const copy = arr.concat() copy // [1,2,3] arr === copy //false
spread  [...arr]	-얕은복사	const arr = [1,2,3] const copy = [...arr] copy // [1,2,3] arr === copy //false

 

도라에몽 배열!