자바스크립트 용의 문서

---

유의사항 및 자주한 실수 - 오답노트

✅ 구조분해할당을 활용하여 변수를 다룰 때

변수를 한꺼번에 선언하거나 스왑핑할 수 있다. 반드시 ‘대괄호[]’로 묶어서 활용해야 한다.

let [a,b] = [1,2]; // a=1, b=2
[a,b] = [b,a]; // a=2, b=1

✅ 반복문의 비교: forEach와 달리 map은 새로운 배열을 반환한다

forEach와 map은 반환값이 다르다. forEach와 map은 둘다 원본을 변경하지 않는다는 점에서는 공통적이다. 그러나 map은 콜백 함수의 반환값을 모은 새로운 배열을 반환한다. 반면 forEach의 반환값은 항상 undefined다.

• map의 콜백은 (처리할 현재 요소currentValue , 인덱스index, map호출한 배열array)을 인수로 받을 수 있다.
• forEach의 콜백은 (처리할 현재 요소element, 인덱스index, forEach호출한 배열array)을 인수로 받을 수 있다.
• map은 다음과 같이 콜백 자체를 넘겨주거나 return값만 간단하게 작성할 수 있다.

array.map(Number); // Number()함수
array.map((elem) => elem*2); // elem * 2를 반환

✅ 문자열의 대소 비교는 사전순이다

문자열의 대소 비교는 아스키코드값(사전순) 기준이다. 앞글자부터 사전순서를 비교한다.

✅ BigInt()는 값의 범위가 자바스크립트의 최대값인 2^53-1 (9007199254740991 = 16자리…)를 초과할 때 쓴다.

• 헷갈릴 땐 Number객체의 MAX_SAFE_INTEGER 프로퍼티로 확인할 수 있다.
• BigInt는 BigInt끼리만 연산이 가능하다.
• 따라서 BigInt를 3으로 나누고 싶을 땐 다음과 같이 할 수 있다. n을 붙여서 표현한다. BigInt는 나누기 연산 시 소숫점을 버린다.

Bigint(어떤숫자) / 3n; 

✅ slice메서드의 음수 인덱스는 맨마지막을 0번째가 아닌 1번째로 카운트한다.

음수 인덱스를 활용해도 후반부 → 초반부로 순서를 반전하여 활용하진 못한다. 시작점과 끝점을 주면 양수 인덱스와 마찬가지로 끝점은 포함하지 않는다.

let test = ['a','b', 'c', 'd', 'e'];
console.log(test.slice(-2); // ['d', 'e']
console.log(test.slice(-3,-1); // ['c', 'd']

✅ sort함수는 콜백이 없을 시, 기본적으로 ‘사전순’으로 정렬한다.

✅ forEach는 문자열에는 사용할 수 없고, 배열에 써야 한다. (스프레드 문법으로 펼쳐서 쓰면 된다) 활용할 수 없는 메서드를 쓰면 ‘~ is not a function’이라는 에러 문구가 뜬다.

✅ splice는 원본을 변경하지만, concat은 새로운 배열을 반환한다.

---

디버깅팁

🔥 문자열에서 숫자 꺼낼 때 “여러자릿수”인 숫자 케이스를 반드시. 아주아주 유의해서 고려해야한다. 이것때문에 문자열의 다른 파트 슬라이싱까지 영향을 미친다.

🚀 풀이 로직을 활용하기 전에 가장 먼저 ‘입력값’을 제대로 받았는지부터 확인하자. (rl.close() 두 번 쓴 것은 아닌지도 확인)

• solution함수를 작성하기 전에, 인수로 내가 의도한 입력값이 들어왔는지 출력해서 확인부터 하자. 이후에 로직을 작성한다.
• 입력값의 “형태”도 반드시 체크하자. 입력은 기본적으로 문자열이다.
  • 숫자로 다뤄야하는데 문자로 다룬 것은 아닌지?
  • 입력 범위가 BigInt로 처리해야하는데 Number로 한 것은 아닌지?
  • 다차원 배열인데 일부만 잘려서 들어온 것은 아닌지?

🚀 배열을 활용했다면 인덱스와 N번째 N번 등을 혼동했는지 확인해보자. 1씩 차이가 나기 때문에 정확히 접근하지 못했을 수 있다.

🚀 (+) NxN 형식이거나, 행렬 형식일 때 row행과 column열 접근 인덱스 헷갈리지 않게 유의하자.

🚀 indexOf, replace()와 같은 메서드는 “처음”부터 주어진 요소를 찾고 찾을 경우 끝내버리기 때문에. 여러 번 등장하거나, 여러 번 처리하는 경우엔 오류를 내기 쉽다.

→ replaceAll() 등을 쓰면 더욱 안전하다.

🚀 반복문을 순회할 때는, 순회 대상을 반복문 몸체에서 변경한 것은 아닌지 확인해보자.

아래의 메서드들은 원본을 변경할 수 있다.

• push() 마지막에 추가
• pop() 마지막을 제거
• unshift() 맨앞에 제거
• shift() 맨앞을 제거
• fill() fill(value, 시작점, 끝점_포함x) 배열의 특정 부분을 특정 값으로 채움
• splice()
• reverse() 배열 순서 반전 - 원본도 변경하고 반전된 값도 반환한다.
• sort()

🚀 중첩 반복문을 활용할 때, 특정 로직이 적절한 반복문 층위에 있는지 확인하자. 가장 외부 반복문에서 돌아야하는 것인지, 반복문 밖에 있어야 하는 것인지 가장 안쪽의 반복문에서 ‘증가시켜줘야하는 것인지’ 로직뿐만 아니라, 변수의 위치도 유의해야 한다.

→ 특히 count를 어디서 증가시킬지 잘 설계해야 한다. → 특히 다음 반복을 위한 업데이트도 해주었는지 잘 반영되었는지 콘솔로 찍어보자.

🚀 toFixed는 반올림한다. ‘버림’이 필요할 때는 parseInt() 또는 Math.trunc() 활용하자.

🚀 Math.max() 또는 Math.min()을 쓸 때는, 배열 요소를 스프레드 구문으로 ‘펼쳐서’ 넘겨줘야 한다.

🚀 로직이 이상한 건 조건 분기 방식, 짝을 이루고 있는 if-elseif-else문이 의도대로 설계되었는지 확인해보자.

🚀 빈 배열과 빈 객체는 true값으로 평가된다. 빈 문자열은 false값이다. 조건문에 활용할 때 유의하자.

🚀 배열을 추가, 삭제하여 수정했으면 원래 가리키고자 하는 값이 다른 인덱스에 있게 된다. 접근할 때 고려해야 한다.

🚀 미스테리일 때는 오탈자도 확인하자. 특히 스펠링이 어려운 변수명은 처음부터 쓰지 않는 것이 좋다.

🚀 메서드 우측에 ()소괄호 제대로 붙여서 호출했는지 확인하자. 생각보다 놓칠 때가 꽤 있다.

🚀 ’배열’을 출력하는 것과 vs 공백 기준 문자열 출력하는 출력 형식도 구분해서 정확하게 출력하자.

🚀 +덧셈, -뺄셈에 소괄호 안해서 *곱셈 연산부터 실행시킨 것은 아닌지 확인하자.

🚀 while 종료 조건 제대로 정의하지 않았거나, while조건문을 반대로 작성하지 않았는지 체크해보자. while조건문은 while 몸체를 동작시키고 싶을 때의 조건이다. “~를 만족하는 동안”임을 기억하자.

---

꿀팁 및 핵심 스킬

🍯 sort함수의 마법은 ‘다중 조건’을 활용할 때다. 하나의 조건으로 정렬할 때 동등한 요소가 있으면, 다중조건으로 두번째 조건을 통해 다시 정렬할 수 있다.

console.log(realAns.sort((a,b)=>b[1]-a[1]||a[0]-b[0])[0][0])

🍯 진법 변환은 toString(변환하고 싶은 진법 N)을 통해 쉽게 할 수 있다.

🍯 소수 판별 시 제곱근까지만 확인해도 된다. 이 로직이 가장 빠르다.

for (let num of newNum.split('0')) {
        num = Number(num);
        let flag = 0;
        
        if(!isNaN(num) && num>1) {
            for (let i=2; i<=parseInt(Math.sqrt(num)); i++) {
                if(num % i == 0) {
                    flag += 1;
                    break;
                }
            }
            
            if(flag==0) {
                console.log(num)
                answer += 1;
            }
        }
    }

🍯 포함여부를 확인할 때는 중첩 반복문을 활용하기보다 includes를 활용하자

🍯 숫자인지 확인할 때 isNaN()이 유용하다.

🍯 특정값이 특수문자가 아니라 a-z , A-Z 알파벳인지 확인할 때는 정규표현식이 유용하다.

var pattern1 = /[0-9]/; //숫자
var pattern2 = /[a-zA-Z]/; //영어
var pattern3 = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/; //한글
var pattern4 = /[~!@#\\#$%<>^&*]/; //특수문자

var testStr = "테스트test";

//숫자 체크하고 싶을 때
if (pattern1.test(testStr)) {
	alert("숫자가 포함됩니다."); //false
}

//영어 체크하고 싶을 때
if(pattern2.test(testStr)){
	alert("영어가 포함됩니다."); //true
}

//한글 체크하고 싶을 때
if(pattern3.test(testStr)){
	alert("한글이 포함됩니다."); //true
}

//한글, 영어 둘다 포함해서 체크하고 싶을 때
if(pattern3.test(testStr) && pattern2.test(testStr)){
  alert("한글 영어 모두 포함됩니다."); // true
}

🍯 배열요소를 오른쪽으로 밀 때, pop과 unshift를 함께 사용하면 편하다.

arr.unshift(arr.pop()); // 오른쪽으로 한 칸씩 이동

🍯 filter는 배열이 특정 값으로만 이루어져있는지 확인할 때 유용하다. 가령 숫자야구에서 모두 strike인지 확인할 때

if(result.filter((oneBall) => oneBall=='Strike').length == 4) { break; }

🍯 2차원 배열은 다음과 같이 초기화할 수 있다.

const  arr = Array.from(new Array(columns), () => new Array(rows).fill(0));

🍯 상하좌우의 ‘좌표’를 다룰 때는 아예 방향에 대한 인덱스 증감값을 정의해서 활용하자.

let moves = [[-1,0], [1,0], [0,-1], [0,1]]; //상하좌우
bombNum[현재 x좌표 + move[0]][현재 y좌표 move[1]] 

방향 인식은 객체로 정의해서 활용해도 좋다.

let command = {
		U: [-1, 0],
		L: [0, -1],
		D: [1, 0],
		R: [0, 1]
	}
	
let [nextX, nextY] = [x + command[direction][0], y + command[direction][1]];

🍯 시간초과는 map이나 객체로 해결해보자.

🍯 중복 체크 시 set이 유용하다.

---