[JavaScript] 배열

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. 

---

배열

순서가 있는 값이다.

let number = [73,65,12,90,42];

자바스크립트에서는 73,65,12,70,42의 element를 갖는 number라는 이름의 배열을 다음과 같이 만든다.

 

배열의 순서는 index라 부르는데, index는 0부터 시작하는 특징이 있다.

number배열에서 '73'element는 0번째 위치에 있으니, index는 0이라고 할수 있다.

 

배열에 대괄호와 숫자를 넣으면 배열에서 해당 순서 번째의 값이 나온다.

• number[0]; // 73
• number[1]; //65
• number[2]; //12
• number[3]; //90
• number[4]; //42

number 배열에 3번 인덱스에는 90 element가 있습니다.

다음 element를 90이 아닌 30으로 바꾸려고 할때 다음과 같이 작성하면 됩니다.

number[3] = 30;

 

배열의 길이를 확인할때는 length를 사용합니다.

number.length; //5

 

배열의 끝에 새로운 값을 추가하고 싶은 경우 push를 사용합니다.

number.push(5) //[73, 65, 12, 90, 42, 5]

 

배열 가장 끝 값을 삭제하고 싶은 경우 pop을 사용합니다.

number.pop()	//[73, 65, 12, 90, 42]

 

배열의 가장 앞에 새로운 값으 추가 하고 싶은 경우 unshift를 사용합니다

number.unshift(1)	//[1, 73, 65, 12, 90, 42]

 

배열의 가장 앞에 값을 삭제하고 싶으면 shift를 사용합니다.

number.shift()	//[73, 65, 12, 90, 42]

 

새로 알게된 내용

배열과 typeof

typeof(number); 		//object
typeof([1,2,3]);		//object
typeof({name : 'Lee'});		//object

typeof를 사용하면 배열도 객체도 object로 출력이 된다.

해당 값이 배열인지 확인하기 위해서는 Array.isArray('value');로 사용하면 됩니다.

Array.isArray(number);			//true
Array.isArray([1,2,3,4]);		//true
Array.isArray([]);			//true

Array.isArray({name : 'lee'});		//false

 

console에서 이쁘게 배열 출력

console.table

 

쉬운 반복문

let arr = [0,1,2,3,4];

다음 배열이 있는 경우 처음부터 끝까지 반복하는 반복문을 다음과 같이 사용했다.

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

 

for/of를 사용하면 더욱 간결하게 사용할 수 있습니다.

for/of는 

for(변수 of 객체){

	객체의 모든 element 개수만큼 반복적으로 실행하는 반복문

}

 

for(let i of arr){
	console.log(i);
}

여기서 i는 arr[해당순서]가 출력 되서 위에서 짰던 코드랑 같은 결과를 보여줍니다.

 

원본 배열을 변경하는지 변경하지 않는지

원본 배열을 변경하는 함수

• Array.shift()
• Array.unshift()
• Array.pop()
• Array.push()
• Array.slice()

원본 배열을 변경하지 않는 함수

• Array.concat() 
• Array.slice()
• Array.join()

 

concat

배열을 합친다

let arr1 = [1,2,3];
let arr2 = [4,5,6];
console.log(arr1.concat(arr2)); //[1, 2, 3, 4, 5, 6], 원본 배열에 영향을 주지 않습니다.

 

slice

배열의 일부분에 해당하는 새로운 배열을 반환한다.

 

slice(start, end)꼴이다.

 

start

• 복사할 처음에 대한 인덱스이다.
• 초기값은 0이다.
• 음수도 가능하다.

end

• 복사할 마지막 인덱스 이다.
• 초기값은 arr.length이다
• 음수도 가능하다.
• end를 제외한 그전 요소까지 이다

let arr = [1,2,3,4,5];

let newArr1 = arr.slice();	//[1, 2, 3, 4, 5]
let newArr2 = arr.slice(0,1);	//[1]
let newArr3 = arr.slice(0,2);	//[1, 2]
let newArr4 = arr.slice(2,3);	//[3]
let newArr5 = arr.slice(-2);	//[4, 5]
let newArr6 = arr.slice(-4,-2);	//[2, 3]

 

splice

모양이 비슷해서 slice와 헷갈린다.

splice는 배열의 기존 요소를 삭제 똔느 교체하거나 새 요소를 추가한다.

 

splice(star,deleteCount,element1,element2 ,,,)

 

start

• 배열의 변경을 시작할 인덱스
• 음수의 경우 배열의 끝에서 부터 요소를 세어갑니다 . 가장 끝 요소는 -1, ㅣlength - n번째 요소는 -n
• 값의 절대값이 배열의 길이보다 큰 경우 0으로 설정한다,

deleteCount

• 배열에서 제거할 요소의 수이다 
• 생략하거나, length - star값보다 크면 start이후 전부를 지운다
• 0이라면 어떤 요소도 지우지 않는다.

element1,element2, ...,

• 배열에 추가할 요소
• 지정하지 않으면 삭제만 한다.

let arr = [1,2,3,4,5,6,7,8]	//arr = [1,2,3,4,5,6,7,8]
arr.splice ()			//arr = [1,2,3,4,5,6,7,8]
arr.splice (5)			//arr = [1,2,3,4,5]
arr.splice (4,1)		//arr = [1,2,3,4]
arr.splice (3,1,4,5,6,7,8)	//arr = [1,2,3,4,5,6,7,8]

join

jojn은 배열의 모든 요소를 연결해 하나의 문자열을 만듭니다.

arr.join()으로 괄호 안에 아무것도 넣지 않고 조인하면 ','도 포함된 상태로 join이 됩니다.

arr.join("")처럼 작은 따옴표나 큰 따옴표 사이에 아무값도 넣지 않으면 ','도 생략된 상태로 join이 됩니다.

 

let word = ['Hello','World','!!!!'];
console.log(word.join()); 	//Hello,World,!!!!
console.log(word.join(""));	//HelloWorld!!!!
console.log(word.join("___"));	//Hello___World___!!!!

 

---

다음에 공부할 것 

reduce

function addToFrontOfNew(arr, el) {
  // TODO: 여기에 코드를 작성합니다.
  let result = [...arr];
  result.unshift(el);
  return result;
}