デバッグ

デバッグは、コードを通過し、問題を見つけ、それらを修正するプロセスです.

コードの問題は一般的に3つの形式になります:プログラムが実行されないようにする構文エラー、コードが予期しない動作をしているランタイムエラー、またはコードが意図したことをしない論理的エラーです.

これらの今後のポストでは、JavaScriptのコンソールを使用してプログラムをデバッグし、それらが起こる前に一般的な問題を防ぐ方法を学びます.

JavaScriptコンソールを使用して変数の値をチェックする

ChromeとFirefoxの両方とも、JavaScriptをデバッグするためのdevtoolsとして知られている優れたJavaScriptコンソールを持っています.

The console.log() この括弧内の出力をコンソールに出力する方法は、最も有用なデバッグツールになります.あなたのコードの戦略的なポイントでそれを置くことはあなたに変数の中間値を示すことができます.それは何を出力する前に何をするべきかのアイデアを持って良い練習です.あなたのコードを通してあなたの計算の状態を見るためにチェックポイントを持つことは問題がどこにあるかを絞り込むのを助けます.

EX :

let a = 5;
let b = 1;
a++
let sumAB = a + b;

console.log(sumAB); the console will display 7
console.log(a); console will display 6

typeofを使用して変数の型を確認します

使えますtypeof 変数のデータ構造、または型をチェックするには.複数のデータ型で作業するときにデバッグに役立ちます.あなたが2つの数字を追加していると思うならば、1つは実際にストリングです、結果は予想外でありえます.型エラーは、計算または関数呼び出しで潜むことができます.JavaScriptオブジェクト表記(JSON)オブジェクトの形式で外部データにアクセスして作業する場合は特に注意してください.

EX :

console.log(typeof "");
console.log(typeof 0);
console.log(typeof []);
console.log(typeof {});

順番に、コンソールはストリングを表示しますstring , number , object , and object .

JavaScriptは6つの原始(不変の)データ型を認識する:Boolean , Null , Undefined , Number , String , and Symbol ( ES 6と新しい)および1つの型を変更可能な項目に設定します.Object . JavaScriptでは、配列は技術的にオブジェクトの型です.

その他

let seven = 7;
let three = "3";
console.log(typeof seven); will display number
console.log(typeof three); will display string

キャッチミススペル変数と関数名

The console.log() and typeof メソッドは中間値とプログラム出力のタイプをチェックする2つの主要な方法です.高速タイパーが委託できる1つの構文レベルの問題は、謙虚なスペルミスです.

変数名や関数名の中で転置、欠落、またはMISを指定した文字は、存在しないオブジェクトを探しているブラウザを持っています.JavaScript変数と関数名は大文字小文字を区別します.

NetworkingCapital計算が機能するように、2つのつづり誤りをコードで修正しましょう.

let receivables = 10;
let payables = 8;
let netWorkingCapital = recievables - payable;

console.log(`Net working capital is: ${netWorkingCapital}`); will display ReferenceError: recievables is not defined

let receivables = 10;
let payables = 8;
let netWorkingCapital = receivables - payables;

console.log(`Net working capital is: ${netWorkingCapital}`); will display Net working capital is: 2

閉じた括弧、ブラケット、ブレース、クォートをキャッチする

もう一つの構文エラーは、すべての開始括弧、括弧、カーリーブレース、および引用が閉じているペアを持つということです.あなたが既存のコードを編集して、一対のタイプのうちの1つでアイテムを挿入しているとき、断片を忘れることは起こりがちです.また、メソッドへの引数としてコールバック関数を追加するなど、他のコードブロックを入れ子にするときに注意してください.

この間違いを避ける1つの方法は、開始文字が入力されるとすぐに、閉じられたマッチを含んでいて、それらの間でカーソルを後ろに動かして、コーディングを続けます.幸いにも、最も現代的なコードエディタは、自動的にペアの後半を生成します.

つのペアエラーをコードで修正しましょう.

let myArray = [1, 2, 3;
let arraySum = myArray.reduce((previous, current =>  previous + current);
console.log(`Sum of array values is: ${arraySum}`);

回答

let myArray = [1, 2, 3];
let arraySum = myArray.reduce((previous, current) => previous + current);
console.log(`Sum of array values is: ${arraySum}`); // will display Sum of array values is: 6

reduce ()メソッドは配列を単一の値に減らします.よくわからない場合は、次のコードを使用します.

const array1 = [1, 2, 3, 4];
console.log(array1.reduce((accumulator, currentValue) => accumulator + currentValue));  // expected output: 10

reduceメソッドに引数を変数または定数として定義することもできます.

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer)); // expected output: 10

シングルとダブルクォートのキャッチ混合使用

JavaScriptの両方のシングルを使用することができます' ) ダブル" ) 引用符で文字列を宣言します.

つの選択肢を持っていると、文字列が収縮したり、引用符で括られているテキストが別のものになったりする.ちょっと早く文字列を閉じないように注意してください.

EX :

const quoteInString = "Randy once said 'I wanna play Rocket League.'";
const incorrectString = 'I've had a perfectly wonderful evening, but this wasn't it.';

最初のものは正しいが、2番目は正しくない.

もちろん、引用符の1つだけのスタイルを使用することは大丈夫です.バックスラッシュを使用して文字列内の引用符をエスケープできます.\ ) エスケープ文字:

const allSameQuotes = 'I\'ve had a perfectly wonderful evening, but this wasn\'t it.';