どうしてこの記事を書こうと思ったのか

フロントとサーバーサイドを任されるも、いかにデータの受け渡しの流れを理解し、データを正確に表示させるか

に悩まされる1週間だったので復習がてら記事にしていました。

新年1月からWebエンジニアに転職をし、約1週間が経ちました。
任された仕事で使う言語は「Vue.js」と「Node.js」。
どちらもJavaScriptではありますが、ちょっとした癖をもった言語だと思います。
上記の通り、**「いかにデータの受け渡しの流れを理解し、データを正確に表示させるか」**という点で詰まることが多く、独学では壁に遭遇しなかっただけで、ちゃんと理解しないとですね。

ちなみに配列編もありますのでご覧になってください。

オブジェクトとは?

簡単に言うと「名前と値」の集合です。

配列とオブジェクトの違い

配列: keyと値(Value)を結びつけるようなデータ構造
オブジェクト(連想配列): 文字列[key]と値(Value)を結びつけるデータ構造

オブジェクトの作成方法

オブジェクトには配列同様、「newする方法」と「リテラルで作る方法」の２パターン存在します。

例1:newする方法

// 新しいオブジェクトを作成
const obj = new Object();

// オブジェクトに値を格納
// obj[key] = value;
obj['Google'] = 'Pixel';
obj['Samsung'] = 'GALAXY';
obj['Apple'] = 'iPhone';

console.log(obj);

// {"Google":"Pixel","Samsung":"GALAXY","Apple":"iPhone"}

例1デモ
上記の例で配列との違いを挙げたように、[]内のkeyが文字列になっています。

例2:リテラルで作る方法

// リテラルでオブジェクト作成
const obj = {
	Google: 'Pixel', 
  Samsung: 'GALAXY', 
  Apple: 'iPhone'
 };

console.log(obj);

// {"Google":"Pixel","Samsung":"GALAXY","Apple":"iPhone"}

例2デモ

プロパティとメソッド

例3:ピリオド記法によるプロパティへのアクセス

const obj = []; // 例1のnew Object()と同様

obj.x = 9;
obj.y = 8;

console.log(obj.x);
console.log(obj.y);
/* 
9
8
*/

例3デモ

例4:メソッドを使用したプロパティへのアクセス

const obj = {
	x: 9,
  y: 8,
  
  print: function () {
  	console.log(this.x);
    console.log(this.y);
    console.log(obj);
  }
};

obj.print();

/* 
9
8 
{"x":9,"y":8}
*/

例4デモ

例4で出てきた「this.」はメソッド内から、プロパティ内のデータにアクセスするために使用します。
JavaScriptのthisに関しては【ES6 JavaScript】アロー関数とthisについて初心者エンジニアがまとめてみたで記事にしてみましたので、ご確認ください。