【転職して痛感…】配列とオブジェクトの大切さ_オブジェクト編

【転職して痛感…】配列とオブジェクトの大切さ_オブジェクト編:

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

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

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

新年1月からWebエンジニアに転職をし、約1週間が経ちました。

任された仕事で使う言語は「Vue.js」と「Node.js」。

どちらもJavaScriptではありますが、ちょっとした癖をもった言語だと思います。

上記の通り、「いかにデータの受け渡しの流れを理解し、データを正確に表示させるか」という点で詰まることが多く、独学では壁に遭遇しなかっただけで、ちゃんと理解しないとですね。

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

オブジェクトとは?

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

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

• 配列: 添え字と値を結びつけるようなデータ構造
• オブジェクト(連想配列): 文字列[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"} 

デモ

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

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

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

デモ

プロパティとメソッド

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

const obj = []; // 例1のnew Object()と同様 
 
obj.x = 9; 
obj.y = 8; 
 
console.log(obj.x); 
console.log(obj.y); 
/*  
9 
8 
*/ 

デモ

例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で出てきた「this.」メソッド内から、プロパティ内のデータにアクセスするために使用します。