새싹 프론트엔드

[새싹 프론트엔드] 11/2 (배열)

sognociel 2022. 11. 2. 12:44

배열

  • 데이터 값을 하나의 목록으로 생성
  • 여러 개의 원소들을 연속적으로 저장하고, 전체를 하나의 단위로 다루는 데이터 구조
  • 모든 데이터 값을 저장할 수 있다. (숫자, 문자, 배열, 불리언...)
var 배열이름 = ["원소1", "원소2", "원소3" ...]

 

 

배열 원소 접근 방법

  • 원하는 원소 색인(index)에 대괄호를 사용
  • 배열의 첫 번쨰 원소는 0번, 두 번째 원소는 1번 ...
  • 배열 안 배열 접근 방법은 배열[배열이 있는 인덱스][배열 안 배열의 원소 인덱스]
    ex.) 배열 = [1, 2, ["여기", "는", "배열", "안", "배열"], 3, 4, 5]
    "안"에 접근하려면 배열[2][3] 으로 접근할 수 있다.

 

 

배열 원소 설정 및 변경

  • 원소 변경 | 인덱스로 바꿀 원소를 지정 후, 새로운 원소의 값을 할당한다. ex.) fruits[0] = "스트로베리"
  • 원소 추가 | 빈 배열을 생성 후 배열[인덱스]="원소"; 로 추가할 수 있다. 원래 있던 배열에도 새로운 원소 추가 가능.
var fruits = ["딸기", "사과", "바나나"];

// 원소 변경
fruits[0] = "스트로베리"

// 원소 추가
fruits[3] = "키위";

// document.write(fruits); 의 결과는 스트로베리,사과,바나나,키위

 

cf.) 원소는 꼭 인덱스0번부터 채우지 않아도 된다.

 

 

배열 다루기 | 배열은 프로퍼티와 메서드로 다룬다.

  • 프로퍼티 | 배열에 대한 정보
  • 메서드 | 배열을 변경하거나 새로운 배열을 반환
    cf.) 메서드 호출이란?
    컴퓨터 언어로 어떤 동작을 실행하는 행위. 일종의 함수.

 

 

.length | 배열 길이 반환

 

.push("추가할 원소"); | 배열 끝에 새로운 원소 추가. 추가 후 배열의 길이를 반환한다.

.unshift("추가할 원소"); | 배열 처음에 새로운 원소 추가. 추가 후 배열의 길이를 반환한다.

 

.pop(); | 배열 마지막 원소 제거. 제거된 원소를 값으로 반환하기 때문에 마지막 요소를 변수에 담을 수도 있다.

.shift(); | 배열 첫 번째 원소 제거. 제거된 원소를 값으로 반환하기 때문에 마지막 요소를 변수에 담을 수도 있다.

 

배열.slice(시작 지점 인덱스, 마지막 지점 인덱스+1) | 배열 자르기

배열.splice(시작 지점 인덱스, 시작 부분에서 삭제할 요소의 개수, 삭제한 위치에 추가할 요소) | 배열에 요소를 추가하거나 삭제

 

첫번째배열.concat(두번째배열); | 두 개의 배열을 결합해서 하나의 배열로 만든다. 두 배열이 결합되었다고 해서, 원본 배열이 변하지는 않으므로 결합한 배열을 사용하고 싶다면 따로 변수에 담아야 한다.

두 개 이상의 배열을 결합할 때는 첫번째배열.concat(추가배열1, 추가배열2, ...) 와 같이 결합하려는 배열을 차례대로 넣어주면 된다.

 

배열.join("구분자") | 배열 안 모든 원소를 구분자로 구분해 넣은 문자열 반환. 구분자를 넣지 않으면 기본적으로 , 로 반환한다.

 

배열.includes(확인할 값) | 전달받은 인자와 일치하는 값이 배열에 존재하는지 확인 후 true/false를 반환

 

배열.sort() | 배열 정렬. 다만 문자를 기준으로 정렬을 하기 때문에 [0, 1, 3, 20] 을 정렬하면 [0, 1, 20, 3] 으로 정렬이 된다. 따라서 아래와 같이 비교 함수를 만들어 정렬할 수 있다. 숫자가 아닌 문자는 비교 함수 필요x

let numbers = [0, 1, 3, 2, 10, 30, 20];

const compare = (a, b) => {
  // 크다. 내림차순 정렬을 하고 싶다면 -1로
  if (a > b) {
    return 1;
  }
  // 작다. 내림차순 정렬을 하고 싶다면 1로
  if (a < b) {
    return -1;
  }
  //같다
  return 0;
};

numbers.sort(compare);

console.log(numbers);

 

배열.reverse() | 배열의 배치 순서를 역순으로

 

배열.forEach((element) => console.log(element)); | 배열 안 요소들을 순서대로 출력하는 것. 아래 for문을 돌린 것과 같은 결과를 낸다

let arr = [1, 2, 3, 4];
for (let i=0; i<arr.length; i++) {
  console.log(arr[i]);
}

 

배열.map(element) => { return element * 2 (다른 연산도 가능) } | 원본 배열을 순회하면서 사용자가 입력한 연산을 해 그 값을 반환한다.

 

배열.indexOf("원소"); | 특정 원소가 배열의 몇 번째 인덱스에 있는지. 배열에 없는 요소를 넣으면 -1 을 반환한다.

 

 

배열 안에 객체가 들어있을 때 사용할 수 있는 함수들

 

배열.findIndex((element) => element["키값"] === "인덱스를 찾을 요소 값")); | 배열 안에 객체가 있는 경우, 값으로 인덱스 찾기

const arr = [
  { color: "red" },
  { color: "black" },
  { color: "blue" },
  { color: "green" },
];

console.log(arr.findIndex((element) => element["color"] === "red"));
<< 0

 

배열.find((element) => element["키값"] === "찾고 싶은 값")); | findIndex와 달리 요소를 반환

 

배열.filter((element) => element["키값"] === "찾고 싶은 값")); | 배열 필터링. 특정한 요소를 만족하는 요소들을 배열에 담아서 반환

 

 

스택과 큐

 

 

 

◈ 수학과 관련된 함수들 (몇가지만)

Math.random() | 0과 1 사이의 숫자 하나를 무작위로 선택해서 반환하며 1 미만의 숫자만 반환한다. 더 큰 숫자를 원한다면 Math.random()이 반환한 값에 곱셈

 

Math.floor() | 소수점 이하의 숫자를 버리고 정수를 생성

 

Math.floor(Math.random()*length) // 로 응용할 수 있다.
var answer = [
  "좋은 생각이에요.",
  "네, 꼭 해보세요.",
  "별로 좋은 생각 같지 않아요.",
  "오늘은 안 해도 되지 않을까요?",
  "컴퓨터는 하지 말라고 하네요.",
];

var todayAnswer = answer[Math.floor(Math.random() * answer.length)];

document.write(`<h1>숙제를 해야 할까요?</h1>`);
document.write(`<h2>${todayAnswer}</h2>`);

 

 

 

'새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 3주차 블로그 포스팅'

저작자표시 (새창열림)