Javascript PS 꿀팁 저장소

JavaScript PS 문제들을 풀며 알게된 꿀팁들을 공유합니다 😎

 

꿀팁

1. 2차원 배열 순회방법

for ... of 문을 사용하면 2차원 배열을 쌈뽕하게 순회가능하다.

const arr = [[1,2],[3,4],[5,6]];
//❌ No! 
const arr = [[1,2],[3,4],[5,6]];
for (let i = 0; i < arr.length; i++){
  const [left,right] = arr[i];

//⭕ Yes! 
for (let [left,right] of arr){
  // logic...
}

 

2. 값 바꾸기

구조분해할당을 이용하면 깔끔하게 바꿀 수 있음.

let str1 = "One";
let str2 = "Two";
let str3 = "Three";
console.log(str1, str2, str3); // One Two Three

// ⭐ 구조분해할당!
[str1, str2, str3] = [str2, str3, str1];

console.log(str1, str2, str3); // Two Three One

약팁

1. 변수 선언 한줄에 하기

여러 변수를 선언하다 보면 가독성이 좋지 못하게 변수들을 선언하는 경우가 발생한다.

이럴때, 구조분해할당으로 이쁘게 선언가능하다.

// 여러 변수 선언
// ❌ 여러줄에 선언해서 못생긴 코드 탄생
let left = 0;
let right = arr.length -1;
let i = 0;
let j = 0;
// ⭕ 구조분해할다응로 한줄로 선언하기
let [left, right, i, j] = [0, arr.length-1, 0, 0];

주의

1. Array 객체는 -1 Index 접근이 불가능하다.

const arr = [1, 2, 3];
console.log(arr[-1]); // ❌ Error!

console.log(arr[arr.length - 1]); // ⭕ Correct~

 

2. sort 함수 문자열 취급 주의

문자열에 대한 2가지 Sorting 방법이 존재한다.

1. 기본 함수 
   ASCII Code 기준으로 문자열을 sorting한다. (ASCII : A < a)
2.  localeCompare 함수
   사전 순으로 sorting한다. (사전 순 : a < A)

그래서, 사전 순으로 정렬된 것을 ASCII Code 정렬 순으로 바꾸려면 복잡한 로직 필요 :(

 

3. forEach 구문의 `return`은 forEach 내부 콜백함수의 종료를 의미한다.

먼저, forEach와 관련된 간단한 문제를 보겠습니다.[문제 설명] : 배열 arr중에 첫번째 2의 index를 출력하는 간단한 문제[예상 결과] : 2 [실제 결과] : 3

const forEachTest = () => {
  const arr = [1, 2, 3];

  let answer;
  arr.forEach((element, index) => {
    if (element === 2) {
      answer = index;
      return;
    }
    answer = 3;
  });
  console.log(answer);
};

console.log(forEachTest());

왜 3이 콘솔에 찍힐까요❓ ❓ forEach 함수를 클릭해보면 다음과 같은 함수임을 알수 있습니다.

/**
* Performs the specified action for each element in an array.
* @param callbackfn  A function that accepts up to three arguments. forEach calls the callbackfn function one time for each element in the array.
* @param thisArg  An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
*/
forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void;

 

forEach 구문은 callbackfn을 받고, 이를 실행해주는 함수입니다.

화살표 함수임을 인지한 상태로 바라보면, `return` 구문은 해당 시점의  callbackFn을 종료하는 구문에 불과합니다.

 

따라서, 올바른 return 시점에서의 `answer = 3`은 실행되지 않지만, forEach 구문 역시 종료되지 않아서 `index == 2` 일때 answer = 3이 실행되는 것입니다.

 

따라서, forEach구문을 사용하려면 1️⃣`boolean` 값으로 진행여부를 판단하거나, 2️⃣`map` `for(let i = 0...`을 사용하시는게 좋겠습니다.

 

 

풀면서 생기는대로 추가하겠습니다 😁