【jquery】letの意味と使い方

Question

aAをaxAにするにあたって、letの使い方で３つ質問があります。
よろしくお願い致します。

###質問１
2行目と3行目のkeyは宣言がありませんが、この場合varと同じになってしまっていますか？

const action = 'aA';
 
let key = action.slice( 0, -1 );
	key = key + 'x';
	key = key + action.slice( -1 );

console.log( key );

###質問２
下記のようにセミコロンをカンマにするとエラーになるのはなぜでしょうか？

const action = 'aA';

let key = action.slice( 0, -1 ),
	key = key + 'x',
	key = key + action.slice( -1 );

console.log( key );

###質問３
aAをaxAにするにあたって、より正しい書き方や宣言の仕方があれば教えて頂きたいです。

以上３つとなりますが、どうぞよろしくお願い致します。

Comments

[gentaro]

jQuery全然関係なくないですか

[m.ts10806]

「エラーになる」のでしたらそのエラーを提示してください

Answer 1

1. ２，３行目は１行目で宣言したkeyの値を上書きしているだけ
2. セミコロンは文の終わり。カンマは文法的に間違い
3. 何を持って「正しい」とするのかの基準がわからないので不明

Comments

[marimon]

ありがとうございます。

Answer 2

こんにちは

質問1, 2 については、他の回答者様の回答のとおりですので割愛します。

質問3 について、

より正しい

かどうかは分かりませんが、 keyへの値の代入を一回で済ませ、かつ+ による文字列の連結を避けたいのであれば、テンプレート文字列 を使って、以下のように書けます。

const key = `${action.slice(0, -1)}x${action.slice(-1)}`;

または、 action が２文字の文字列と決まっているのであれば、以下のようにも書けます。

const key = `${action[0]}x${action[1]}`;

なお上記で key は、"axA"が代入された後では変更される必要がないものと想定して、letではなく const を使っています。

• 動作確認用のコード： https://jsfiddle.net/jun68ykt/usn4gjq9/9/

補足ですが、ソースコードのチェックに ESLint を使っていると、+ による文字列の結合をしているコードに対して、ESLintが

suggest using template literals instead of strings concatenation
(文字列の連結の代わりにテンプレートリテラルを使用することをお勧めします。）

と指摘してきます。これはESLintの prefer-templateというルールです。

以上、参考になれば幸いです。

Comments

[marimon]

てんぷれーとりてらる！革新的すぎます。どうもありがとうございます！

[jun68ykt]

どういたしまして。解決されたようでよかったです????

[marimon]

m(*_ _)m

Answer 3

質問１ 2行目と3行目のkeyは宣言がありませんが、この場合varと同じになってしまっていますか？

letの場合、再代入ができますので、（ブロックスコープになる点を除いて）varと同様に使えます。

{
  var i = 1;
  let j = 3;
}

console.log(i); // iにはアクセスできる
console.log(j); // jにはアクセスできない

質問２ 下記のようにセミコロンをカンマにするとエラーになるのはなぜでしょうか？

varの場合は同じ名前の変数を複数回宣言できますが、冗長なだけで意味がないこともあって、letでは禁止されています。

質問３ aAをaxAにするにあたって、より正しい書き方や宣言の仕方があれば教えて頂きたいです。

元のコードがわからないとなんとも言えません。

Comments

[marimon]

ご説明ありがとうございます。宣言がない場合は自動的にvarになるけど、再代入の場合はletのままになるということでしょうか。勉強になりました。