🦊
Javascript ”Syntax and Basic Constructs”
🌈変数
let(変数宣言)
let fruit
fruit = 'apple'
const(定数宣言)
varは再宣言が可能なのでもう一回宣言するのができます。
値が変わったりする問題があるのでconstをおすすめします。
const onClickModal = () => {
....
}
| var | let | const | |
|---|---|---|---|
| 再宣言 | O | X | X |
| 再代入 | O | O | X |
| スコープ | function | {} | {} |
| Hoisting | O |
🌈演算子(operator)
算術演算子(+, - , *, /)
var area = 2 * 5; // 10
文字列連結演算子
var str = 'My name is ' + 'sunny'; // "My name is sunny"
代入演算子
var color = 'red'; // "red"
関係演算子
var foo = 3 > 5; // false
- === : 値がtypeまで完全に一致しているか確認
- == : typeは確認しない
- number 1, string "1"を同じ値で認識
- 0, flaseも同じ値で認識
- null, undefinedも同じ値で認識
- !== : 値が一致しないのか確認
論理演算子
var bar = (5 > 3) && (2 < 4); // true
- ! : NOT
- && : AND
- || : OR
- 演算順序 : NOT > AND > OR
typeof 演算子
var type = typeof 'Hi'; // "string"
🌈if文
条件がtrueの場合if文内を実行します。
if (条件式) {
条件式が成り立った場合処理を実行
}
if文はブロックで区分されているため、const を二重に定義しても構わないです。
const a = 1
if (true) {
const a = 2
console.log('if文内の a 値は ' + a)
}
console.log('if文外の a 値は ' + a)
1）else：今までの条件に当てはまらない場合に使用
if (条件式) {
条件式が成り立った場合処理を実行
}else{
条件式が成り立たなければ処理を実行
}
2）else if：複数条件の分岐に使用
if (条件式1) {
条件式1が成り立った場合処理を実行
}else if(条件式2){
条件式2が成り立った場合処理を実行
}
switch/case文
特定値が何かによって違う作業がしたい場合利用します。
ただし、case値から始めて最後まで順次実行するため、各ケースの内容の最後にbreakを書かなくてはなりません。
defaultは、該当するcase値がない場合に実行するコードです
switch (device) {
case 'iphone':
console.log('iphone!');
break;
case 'ipad':
console.log('ipad!');
break;
case 'galaxy note':
console.log('Galaxy Note!');
break;
default:
console.log('I dont know');
}
🌈関数
特定のコードを 1 つのコマンドで実行できるようにする機能です。
関数を作る時functionをキーワードでを使い、どんな値を受け取ってくれるかきめてくれます。
これをパラメータ(媒介変数、因子)といいます。
また関数内部でreturnのキーワードを使い、結果物を指定できます。
returnは追加で関数を終了する機能を持っているので関数の最後の終了視点で使います。
矢印関数(arrow function)
アロー関数(arrow function)はJavaScriptの関数を作る方法のひとつです。
const add = (a, b) => {
return a + b;
};
console.log(add(1, 2)); //3
またはコードブロック内で簡単に一行で1つのリターンをする場合、次のように略して書くこともできます。
const add = (a, b) => a + b;
🌈オブジェクト(object)
オブジェクトは、変数または定数を使用する場合、1つの名前にさまざまな種類の値を入れることができます。
const fruit = {
// key : 欲しい値
name: 'apple',
num: 2
};
console.log(fruit.name); // apple
console.log(fruit.num); // 2
🌞参考サイト
Discussion