JavaScript初心者が戸惑ったこと・イディオムまとめ

2021.03.04
IT
JavaScript

この記事では、JavaScriptの入門書を読み終わった私が、実際に使われているJavaScriptを見て、「何これ？」と思ったことを備忘録的にまとめています。

各言語のイディオムは知っておくと便利ですよね

1. 文頭(function hoge(){}());
2. jQuery: $.get(“hoge.json”).done(function (data) {});
3. hash.substring(１)
- 3.1. 説明
- 3.2. 参考サイト
4. map関数＋アロー演算子

文頭(function hoge(){}());

説明

文頭にいきなり「（」が出てくるこれは、グローバルスコープを汚さないためにあるようです。（JavaScriptは関数の中に書かない変数宣言はグローバル変数となってしまうため。）

大規模開発では必須そうです。

C++でいう名前空間のようなものと聞いて納得（2021年4月18日追記）

例

(function scopeWrapper($) {
   var word = "hello, js";
    console.log(word);
}(jQuery));

(function scopeWrapper($) {

var word = "hello, js";

console.log(word);

}(jQuery));

参考サイト

http://nmi.jp/archives/488

jQuery: $.get(“hoge.json”).done(function (data) {});

説明

jQueryについて詳しくないというのもありますが、、。

hoge.jsonにアクセスして、その取得したデータ（hoge.json)をdataに代入しています。

例

$.get('data/conversations.json').done(function (data) {
    data.forEach(function (convo) {

    });
 });

$.get('data/conversations.json').done(function (data) {

data.forEach(function (convo) {

});

参考サイト

【jQuery入門】get()の使い方とデータを取得する方法！

hash.substring(１)

説明

ハッシュフラグメント（＃）の値を取得するものです。

サーバーを介さないでデータのやり取りをするときに使います。

参考サイト

https://maku77.github.io/js/web/detect-fragment-change.html

map関数＋アロー演算子

説明

Jsonのパースとかに使うのですが、アロー演算子が理解できていないため戸惑いました。

例

// arrow function 
const price = [100, 200, 300];
var tax_price = price.map(value => value * 1.1 ); 
// = price.map((value) => value * 1.1 ); 
console.log("From Arrow function: " + tax_price);

// result is same as arrow function 
var tax_price = price.map(function(value){ return value * 1.1 });
console.log("From Normal function: " + tax_price);