- Use the JavaScript Console to Check the Value of a Variable console.log() 는 가장 유용한 디버그 도구다. 변수 등이 중간에 값이 어떻게 변하는지 보여준다. 무엇이 잘못되었는지 금방 찾을 수 있게 해준다. 적극적으로 활용하자. 또한 firefox 와 chrome 은 강력한 개발자 툴을 제공한다. 가능하면 웹은 이들로 쓰자.
- Understanding the Differences between the freeCodeCamp and Browser Console console.log() 이후 console.clear() 를 사용하면 console 을 깨끗이 지워준다.
- Use typeof to Check the Type of a Variable 테이터 형식을 확인하는 일은 오류를 막는데 중요하다. 예를 들어서 계산을 할 때 number 와 string 을 혼용하면 error 를 만나게 된다. 특히 외부 JSON 파일을 불러올 때 주의해야 한다. 자바스크립트는 총 7가지의 바꿀 없는 데이터 타입과 한 가지의 바꿀 수 있는 데이터 타입이 있다. 바꿀 수 없는 데이터 타입은 number, BigInt, string, boolean, undefiend, null, symbol 이다. 바꿀 수 있는 데이터 타입은 object 다. array 도 object 에 포함된다. 데이터 타입을 확인하려면 다음과 같이 한다.
let a = 7; let b = "3"; let sumAB = a + b; console.log(typeof a); console.log(typeof b); //console.log(typeof a, typeof b); 된다. - Catch Misspelled Variable and Function Names 자바스크립트는 대소문자를 구분한다. 그래서 변수명을 사용할 때 잘못된 스펠링을 사용하여 프로그래밍이 제대로 안 돌아가는 경우가 있다. 맞춤법 오류를 항상 주의하자. 구문 오류가 발생할 가능성은 항상 높다.
- Catch Unclosed Parentheses, Brackets, Braces and Quotes 구문 오류로 흔히 나타나는 다른 유형은 괄호다. 중괄호 대괄호 소괄호를 시작하고 끝을 내지 않는 경우가 자주 발생한다. 이런 유형의 오류를 피하는 한 가지 좋은 방법은 괄호를 시작할 때 끝 괄호를 미리 입력하고 시작 하는 것이다. 다행히 최근의 IDE 는 괄호를 입력하면 자동으로 끝 괄호를 입력해 준다.
- Catch Mixed Usage of Single and Double Quotes 따옴표 사용을 잘못하여 구문 오류가 나는 경우도 적지 않다. 자바스크립트는 작은 따옴표와 쌍 따옴표를 모두 허용하기 때문에 둘을 모두 사용하는 것도 좋다.
let a = "나는 오늘 '앞으로 100년' 을 읽었다."; let b = "나는 어제 "\이산수학\" 을 공부했다."; let c = "I've had a perfectly wonderful evening, but this wasn't it." //원칙을 세워서 잘 지키는게 좋겠다. 밖에는 쌍따옴표를 쓰고 안은 작은 따옴표를 사용하자. - Catch Use of Assignment Operator Instead of Equality Operator 변수에 값을 배정하는 기호는 ‘=’ 인데, 우리가 평소에 사용하는 용도와 다르다. true, false 를 계산하는 기호는 ‘==’, ‘===’ 이다. if, else if, else 등을 사용할 때 실수하기 쉽다.
- **Catch Missing Open and Closing Parenthesis After a Function Call** 함수를 불러올 때 발생할 수 있는 오류로 끝에 ()를 빼먹는 경우가 있다. 특히 argument 가 없을 때 그러한 실수가 발생할 수 있다. 주의하자.
- Catch Arguments Passed in the Wrong Order When Calling a Function 함수를 불러올 때 인수를 넣는 순서가 있다면 틀리지 않게 주의해야 한다.
function sub(arg1, arg2){ return arg1-arg2 }; console.log(sub(5, 3)); //arg1 과 arg2 에 들어갈 인수를 정확히 순서에 맞게 입력해야 한다. 순서를 틀리는 경우 구문 오류ㅜ가 아니라 //syntax 에러가 날 가능성이 있다. - Catch Off By One Errors When Using Indexing 배열이나 오브젝트에서 값을 읽어오는 등 작업을 할 때 index 를 써야 한다. 자바스크립트는 배열의 시작이 0이다. 대부분의 컴퓨터 언어도 동일하다. 또는 끝 값을 잘못 잡아서 오류가 날 수도 있다. 예를 들어 아래의 예제는 첫 시작과 끝 값이 모두 틀렸다. 시작은 0이어야 하고 끝은 < 로 표시해야 한다.
function countToFive() { let firstFive = "12345"; let len = firstFive.length; // Only change code below this line for (let i = 1; i <= len; i++) { // Only change code above this line console.log(firstFive[i]); } } countToFive(); - Use Caution When Reinitializing Variables Inside a Loop 함수를 만들 때 함수 내부에서 어떤 변수를 초기화 해야 할 때가 있다. 까다로운 문제. 아래 예제에서 변수 row 를 여러차례 초기화 하고 있다. 초기화 하는 까닭은 [[0,0], [0,0], [0,0]] 과 유사한 모습으로 정의하기 위해서다. 만약 초기화가 없다면 [0,0,0,0,0,0] 과 같이 데이터 구조가 짜인다.
function zeroArray(m, n) { // Creates a 2-D array with m rows and n columns of zeroes let newArray = []; for (let i = 0; i < m; i++) { // Adds the m-th row into newArray let row = []; for (let j = 0; j < n; j++) { // Pushes n zeroes into the current row to create the columns row.push(0); } // Pushes the current row, which now has n zeroes in it, to the array newArray.push(row); } return newArray; } let matrix = zeroArray(3, 2); console.log(matrix); - Prevent Infinite Loops with a Valid Terminal Condition 무한 루프는 반드시 피해야 할 두려운 오류에 해당한다. 프로그래머의 작업은 반복문이 사용될 때 반드시 터미널 루프를 제대로 작성해야 한다. 잘못작성된 터미널 루프는 웹을 못쓰게 한다.
개발자 공부중