ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [자바스크립트] 배열과 집합 ([], set())
    개발공부/JavaScript 2024. 1. 31. 22:31

    본 글은 배열과 집합을 다룬 내용입니다.

     

    목차

    1. 배열과 집합을 차이점
    2. 성능
    3. 배열
    4. 집합

     

     

    1. 배열과 집합의 차이점

    개발자는 데이터를 효율적으로 다루고 관리하기 위해 다양한 상황에 적절한 자료구조를 선택하고 활용할 수 있어야 한다.

    데이터를 어떻게 관리하는지에 따라 프로그램의 성능이 달라진다. 그래서 우리는 늘 적절한 선택을 해야한다.

     

    데이터 구조의 특징을 잘 기억해야지 적절한 선택을 할 수 있다는 점을 잊지 말고 공부하면 좋겠다!

     

    이제 본론으로 돌아와 배열과 집합의 차이점을 정리하면 아래와 같다.

    집합은 중복을 허용하지 않는 고유 값들의 모임
    배열은 중복을 허용하고, 순서를 갖는 값들의 모임

     

    여기서 기억해야 할 키워는 중복과 순서이다. 

     

    집합은 중복 X, 순서 X

    배열은 중복 O, 순서 O

     

    2. 성능

    사실 성능의 경우 사용하는 상황에 따라 달라지는데, 어떤 상황일 때 어떤 데이터 구조를 사용하면 좋은지 간단하게 정리해봤다.

      배열 집합
    특징 각 요소가 인덱스를 가짐 (순서 O) 각 요소의 중복을 허용하지 않음
    좋은 상황 - 순차적으로 요소에 접근해야 할 때
    - 특정 위치에 빠르게 접근해야 할 때
    - 중복된 값을 제거해야 할 때
    - 데이터 존재 여부만 확인할 경우
    나쁜 상황 - 중간에 데이터 제거가 필요할 때 (모든 요소 이동 필요) - 순서가 필요한 경우

     

    (사실 더 있지만 대표적으로 기억하면 좋은 내용만 정리해봤다.)

     

    3. 배열

    배열은 여러 값을 순서대로 저장하는 자료 구조이며, 요소들은 다양한 데이터 타입을 넣어도 된다.

    let arr = []; // 생성
    
    let arr = [1, "2", false, {name: "hani"}]; // 요소는 다양한 데이터 타입 사용 가능!
    
    console.log(arr[0]); // 요소 접근: 인덱스를 사용해 접근
    
    // 다양한 메소드
    // 1. 마지막에 요소 추가 (push)
    arr.push("3"); // arr = [1, "2", false, {name: "hani"}, "3"];
    
    // 2. 제일 앞에 요소 추가 (unshift)
    arr.unshift(0); // arr = [0, 1, "2", false, {name: "hani"}, "3"];
    
    // 3. 마지막 요소 제거 (pop)
    arr.pop(); // arr = [0, 1, "2", false, {name: "hani"}];
    
    // 4. 제일 앞에 있는 요소 제거 (shift)
    arr.shift(); // arr = [1, "2", false, {name: "hani"}];
    
    // 5. 원하는 범위로 이루어진 새로운 배열 생성 (slice), 원본 배열에 영향 X
    let newArr = arr.slice(1, 3); // newArr = ["2", false];
    
    // 6.특정 위치에 요소 추가 또는 제거 (splice)
    newArr.splice(1, 0, "2"); // 추가,  newArr = ["2", "2", false];
    newArr.splice(1, 1); // 제거, newArr = ["2", "2", false];
    
    // 7. 0번 인덱스부터 원하는 요소의 첫 번째 인덱스 값 찾기 (indexOf)
    console.log(newArr.indexOf("2")); // 0
    
    // 8. 마지막 인덱스부터 원하는 요소의 첫 번째 인덱스 값 찾기 (lastIndexOf)
    console.log(newArr.lastIndexOf("2")); // 1
    
    // 9. 배열 내 원하는 요소 존재하는지 여부 확인하기 (includes)
    console.log(newArr.includes("2")); // true
    console.log(newArr.includes(2)); // false

     

    4. 집합

    집합은 고유한 값들의 모임이며, 중복된 값을 허용하지 않는다. 배열과 동일하게 요소들은 다양한 데이터 타입을 넣어도 된다.

    let setList = new Set(); // 빈 집합 생성
    
    // 초기 값 가지는 집합 생성, 자동으로 중복 제거
    let setList = new Set([1, 2, 2, 3, 3, 4]); // setList = [1, 2, 3, 4]
    
    // 1. 값 추가 (add)
    setList.add(5); // setList = [1, 2, 3, 4, 5]
    setList.add(4); // setList = [1, 2, 3, 4, 5]
    
    // 2. 값 삭제 (delete)
    setList.delete(4); // setList = [1, 2, 3, 5]
    
    // 3. 원하는 값 있는지 확인 (has)
    console.log(setList.has(5)); // true
    console.log(setList.has(4)); // false
    
    // 4. 값 전체 비우기 (clear)
    setList.clear(); // setList = []
    
    // 5. 집합의 개수 구하기 (size)
    console.log(setList.size()); // 0
    console.log(setList.size()); // 만약 setList = [1, 2, 3, 5]이라면, 4
    
    // 6. 교집합: A와 B에서 공통으로 포함된 요소로만 이루어진 새로운 집합 생성
    const intersection = (set1, set2) => {
    	let result = new Set();
          for (let value of set1) {
            if (set2.has(value)) result.add(value);
          }
      	return result;
    };
    
    let setA = new Set([1, 2, 3, 4]);
    let setB = new Set([3, 4, 5, 6]);
    console.log(intersection(setA, setB)); // [3, 4]
    
    // 7. 합집합: A와 B의 모든 요소를 포함하는 새로운 집합 생성
    const union = (set1, set2) => {
    	let result = new Set(set1);
          for (let value of set2) {
            result.add(value);
          }
          return result;
    };
    let setA = new Set([1, 2, 3, 4]);
    let setB = new Set([3, 4, 5, 6]);
    console.log(union(setA, setB)); // [1, 2, 3, 4, 5, 6]
    
    // 8. 차집합: A에서 B의 요소를 제외한 나머지 요소로 이루어진 새로운 집합 생성
    const difference = (set1, set2) => {
    	let result = new Set(set1);
      	for (let value of set2) {
            result.delete(value);
      	}
      	return result;
    };
    let setA = new Set([1, 2, 3, 4]);
    let setB = new Set([3, 4, 5, 6]);
    console.log(difference(setA, setB)); // [1, 2]

     

    마무리

    이번에는 배열과 집합에 대해 알아봤습니다.

     

    저 또한 배열과 집합의 개념 및 메소드에 대해 한번 더 공부할 수 있는 시간이었습니다.

     

    읽어주셔서 감사합니다!

    728x90
Designed by Tistory.