Javascript CheatSheet

헷갈리는 함수 정리하기 (push, pop, unshift, shift, splice, slice)

📍 push()

배열의 맨 끝에 값을 추가 (하나 이상의 요소 추가 가능)
반환: 배열의 새로운 길이,
원본 배열을 바꾼다

📍 pop()

배열의 맨 끝 값(마지막 요소)을 제거
반환: 그(제거된) 요소 반환 , 빈 배열의 경우 undefined를 반환

let colors = ['pink', 'sky'];

colors.push('purple'); // 3     , 배열은 'pink', 'sky', 'purple'

colors.pop(); // 'purple'

📍 unshift()

배열의 맨 앞에 값을 추가
반환: 추가된 배열의 길이
원본 배열을 바꾼다

📍 shift()

배열의 맨 앞의 값(첫 번째 요소)을 제거 => (pop())과 반대
반환: 그(제거된) 요소를 반환, 빈 배열인 경우 pop()과 마찬가지로 undefined가 반환
원본 배열을 바꾼다

let colors = ['red', 'blue'];

colors.unshift('black'); // 3    , 배열은 'black', 'red', 'blue'가 된다.

colors.shift(); // 'black'

📍 splice()

배열의 기존 요소 삭제 또는 교체, 새요소 추가하여 배열의 내용 변경
원본 배열 변경, 이 과정에서 삭제된 요소가 있으면 삭제된 요소 반환

📍 slice()

배열의 요소를 추출
반환 : 추출하고자 하는 배열의 start index, end index값을 넘겨 받아서 해당 길이만큼 새로운 배열을 반환.
모두 생략한 경우, 배열 똑같이 복제, end index만 생략하면 start 부터 마지막 index까지의 요소 추출
원본 배열에 영향을 주지 않음

let arr = ["1","2","3","4", "5", "6", "7", "8"];

// 파라미터가 없음 => 원본배열 변화없음, 삭제된 요소 없음.
let arr2 = arr.splice();
console.log(arr); // ["1", "2", "3", "4", "5", "6", "7", "8"]
console.log(arr2); // []


// startIndex만 3으로 지정 => 4번째 요소부터 마지막요소까지 모두삭제, 삭제된 요소 return
let arr3 = arr.splice(3);
console.log(arr); // ["1", "2", "3"]
console.log(arr3); // ["4", "5", "6", "7", "8"]


// startIndex 3, deleteCount 2 => 4번째 요소부터 2개의 요소삭제, 삭제된 요소 return
let arr4 = arr.splice(3, 2);
console.log(arr); // ["1", "2", "3", "6", "7", "8"]
console.log(arr4); // ["4", "5"]

// startIndex 2, deleteCount 2 => 2번째 요소부터 2개의 요소삭제, 2번째 index부터 "가", "나" 순서대로 추가, 삭제된 요소 return
let arr7 = arr.splice(2, 2, "가","나");
console.log(arr); // ["1", "2", "가", "나", "5", "6", "7", "8"]
console.log(arr7); // ["3", "4"]


// startIndex -4, deleteCount 2 => arr.length-4 즉, 뒤에서 4번째부터 2개의 요소삭제, 삭제된 요소 return
let arr8 = arr.splice(-4, 2);
console.log(arr); // ["1", "2", "3", "4", "7", "8"]
console.log(arr8); // ["5", "6"]

BFS : 너비 우선 탐색

1-1. 필요한 자료구조

• 큐 ( FIFO )
  • 1. 일반 배열을 큐처럼 이용
  • 2. 삽입 : push
  • 3. 삭제 : shift

  1-2. 풀이흐름

  • 0. 전제) 깊이 찾기 보다 넓게 찾는다 -> 최단 경로찾기와 유사
  • 1. 시작 노드를 큐에 넣고 방문했다고 처리한다.
  • 2. 큐에서 노드를 꺼내고, 꺼낸 노드의 인접 노드중 방문하지 않은 노드를 모두 큐에 삽입 하여 방문 처리
  • 3. 2 과정을 큐가 비어 수행할 수 없을 때까지 반복

1-3. 구현방식

댓글에 첨부

DFS : 깊이 우선 탐색

2-1. 필요한 자료구조

• 재귀함수
  • 1. 방문하지 않은 노드의 경우 해당 노드를 기점으로 재귀적으로 호출

2-2. 풀이흐름

• 0. 전제) 깊은 부분 우선적으로 탐색, 재귀함수를 스택처럼 활용
• 1. 탐색 시작 노드를 스택 (재귀함수)에 삽입하고 처리
• 2. 현재 노드와 연결된 다른 노드를 재귀적으로 방문하며 방문하지 않은 경우 함수를 다시 호출한다.

2-3. 구현 방식

댓글에 첨부

DFS / BFS 사용할 떄

3-1. 둘다 사용 가능한 때

- 모든 정점을 탐색하는 것이 중요하면 둘다 사용 가능
- 검색 대상 그래프가 정말 크면 DFS가 유리, 검색 시작 지점으로부터 원하는 지점이 가깝다면 BFS가 유리

3-2. BFS가 유용할 때

- 최단 거리  -> 가까운곳부터 찾기 때문에 탐색 시 먼저 찾게 되는 것, 곧 최단 거리라는 뜻
- 큐에 각 노드의 정보를 기록해야하기 때문에 더 많은 메모리 소모 -> target number가 root node로부터 가깝다고 느낄 때 사용
- 실제 개발시 맵 최단거리 안내, 페이스북 친구추천 알고리즘 등에서 사용

3-3. DFS가 유용할 떄

    - 경로의 특징을 저장해둬야 하는 문제 -> 각각 경로마다 특징을 저장해둬야 하는 경우 (경로에 같은 숫자가 있으면 안된다거나 등등) BFS는 사용하지 못한다.
    - 덜 메모리가 소모되지만, 속도는 더 느리다
    - 실제 개발에서 미로 게임 같은 곳에서 경로 존재 유무를 판별할 때 사용가능

해시

값이 특정 분류로 나뉘는 거 같다면? 해시 맵을 사용해보기

해시란? 해시 함수에서 얻어지는 값은 임의의 길이의 데이터를 고정된 길이의 데이터로 매핑하는 함수이다.

const animal = {};
animal['dog'] = 'doggy;
animal['cat'] = 'kitty';

위 코드는 string 자료형의 key에 해당하는 공간을 string 자료형의 value로 집어 넣은 것이다.
키,값 형태로 데이터를 저장 -> object나 map으로 구현 가능

---

forEach

배열의 각 요소에 대해 지정된 콜백함수를 순차적으로 실행