자바스크립트 기초(ES5+)_Array(배열)과 APIs

[  Array 배열 ]

 

1. 자료구조

• 자료구조 : 비슷한 구조의 데이터들을 모아놓는 것이다.
• 자료구조와 Object의 차이점 :

-  object가 토끼와 당근일 경우 , 토끼와 당근들은 각각의 특징들이 있다. (property=귀 두개, 주황색, method=먹는다, 뛴다), object는 서로 연관된 특징과 행동들을 묶어놓는 것이다.

• 비슷한 타입의 object들을 묶어놓는 것을 자료구조라고 한다.(토끼들끼리, 당근들끼리 바구니에 담음) > 다른 언어에서는 동일한 type의 object만 담을 수 있다. but js는 유연한 언어(dynamic typed language)기 때문에 한 바구니 안에 다양한 type의 데이터를 담을 수 있다.(가능하긴 하지만 프로그래밍에 좋지 않다.)
• 자료구조와 알고리즘의 효율성 중요하다.

object(토끼와 당근들)와 자료구조(바구니)

 

 

2. Array(배열)

• 칸칸이 모여있는 자료구조이며, 박스마다 인덱스가 지정되어 있다.
• 인덱스로 접근이 가능하다, 0부터 시작, 삽입과 삭제가 쉽다.
• 한 배열 안에는 동일한 타입의 데이터를 삽입한다.

배열과 인덱스, 삽입 삭제

• API : (Application Programming Interface) :  컴퓨터나 컴퓨터 프로그램 사이의 연결이다. 일종의 소프트웨어 인터페이스이며 다른 종류의 소프트웨어에 서비스를 제공한다.

 

1) Declaration(배열의 선언)

// 두가지 방법
const arr1 = new Array();
const arr2 = [1, 2];

 

2) Index position(인덱스로 접근하기)

const fruits = ["🍎", "🍑"];
console.log(fruits);
console.log(fruits.length);
console.log(fruits[0]); // 인덱스 번호로 접근이 가능하다.
console.log(fruits[1]);
console.log(fruits[fruits.length - 1]); // 마지막 배열에 접근하는 방법(보통 이렇게 많이 쓴다.)

 

3) Looping over an array(배열 안에 있는 모든 요소 출력하기)

// 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);
}

// 3. forEach - 더 간단
// forEach()는 callback함수를 가져온다.
// forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void;
// value와 index와 array를 가져와서 ? T : F ;

// value와 index와 array모두 가져올 수 있음
fruits.forEach(function (fruit, index, array) {
  console.log(fruit, index, array);
});

// 무명함수는 arrow함수 사용가능 > 간단
fruits.forEach((fruit) => console.log(fruit));

 

4) 배열에 Addtion, deletion, copy (추가, 삭제, 복사)

/ push : 아이템을 추가하여 배열의 끝에 놓기
// 1. 배열 뒤에 추가, 삭제하기

    // push : 아이템을 추가하여 배열의 끝에 놓기
    fruits.push("🍒", "🍓");
    console.log(fruits);

    // pop :배열의 맨 끝부터 아이템 지우기, 지울 아이템을 return한다.> 활용도 가능
    fruits.pop(); // 맨 끝 아이템부터 지워진다.
    fruits.pop();
    console.log(fruits);

// 2. 배열 앞에 추가, 삭제하기

    // unshift : 앞에서부터 아이템 넣기
    fruits.unshift("🍒", "🍓");
    console.log(fruits);
    
    // shift : 앞에서부터 아이템 뺴기
    fruits.shift();
    fruits.shift();
    console.log(fruits);

// 중요***shift와 unshift는 pop과 push보다 훨씬 느리다.
// 기존값에 추가 vs 기존값을 뒤로 옮기고 추가, 지우고 앞으로 옮김)
// push와 pop 쓰는 것을 추천(뒤에서 접근하는 것이 빠르다.)

	// splice : 지정된 장소에서 지우기 , 변수에 할당 시 삭제된 값을 return한다.

    fruits.push("🍍", "🥝", "🍈");
    console.log(fruits);
    fruits.splice(1, 1); // spice(지우기 시작할 인덱스, 지울 인덱스 갯수)
    console.log(fruits);
	// 여러개 지우고 해당 위치에 추가하기
    fruits.splice(1, 2, "🍐", "🍋"); // splice로 지운 후, 그 자리에 추가할 수 있다.
    console.log(fruits); 
    
    // splice > 변수에 할당하면 삭제된 값을 return
    const color = ["red", "orange", "yellow", "green"];
	const newColor = color.splice(1, 2);
	console.log(color); // 원 배열값이 변함 > red, green
	console.log(newColor); // 삭제한 값이 return됨 > orange, yellow


// 4. concat > 두 가지의 배열을 묶어서 새로운 배열을 반환한다.

    const fruits2 = ["🍌", "🍇"];
    const newFruits = fruits.concat(fruits2);;
    console.log(newFruits);
    
// 5. 배열 복사하기
	let shallowCopySpread = [...fruits]
	// ["딸기", "망고"]
    // 얕은 복사 : 배열의 최상위 요소가 원시 값일 경우 복사하지만, 
    // 중첩 배열이나 객체 요소일 경우에는 원본 배열의 요소를 참조한다.
    // 배열과 객체 요소 또한 동일한 형태로 복사하는 방법은
    // JSON.stringify() 로 배열을 JSON문자로 변환한 후, JSON.parse()로 다시 배열을 구성하는 것
    let deepCopy = JSON.parse(JSON.stringify(newColor));
	console.log(deepCopy); // orange, yello

• **shift와 unshift는 pop과 push보다 훨씬 느리다.

- push와 pop은 기존값 뒤에 추가 vs shift와 unshift는 기존값을 뒤로 옮기고 앞을 비우고 추가, 앞을지우고 앞으로 옮김 반복 > 특히 배열의 length가 더 길 수록 시간이 더 오래걸린다.

 

5) Searching(검색 API) : 배열 안에 몇 번째 인덱스에 있는지 알고 싶을 때 사용한다. > 프로젝트에서 유용

// indexOf > find index > 번호 출력
console.log(fruits);
console.log(fruits.indexOf("🍎")); // 몇번째 인덱스에 있는지 확인 가능
console.log(fruits.indexOf("🍋"));
console.log(fruits.indexOf("🍕")); // 없는 값 출력하면 -1로 출력

// includes : 배열에 해당인덱스가 있는지 T,F로 확인
console.log(fruits.includes("🍎")); // 배열에 있는지 없는지 T,F 로 return
console.log(fruits.includes("🍋"));
console.log(fruits.includes("🍒"));

// lastIndexOf > 값이 중복일 경우, 제일 마지막 값을 출력
fruits.push("🍎");
console.log(fruits);
console.log(fruits.indexOf("🍎")); // 제일 첫번째로 만나는 값을 출력
console.log(fruits.lastIndexOf("🍎")); // 제일 마지막로 값을 출력

 

 

 

*본 포스팅은 드림코딩 유튜브강의를 정리한 내용입니다.