JavaScriptオブジェクトなど（私的メモ）

let a = "hoge";
console.log(a); // hoge
a.toUpperCase();
console.log(a) // hoge
//代入する
a = a.toUpperCase();
console.log(a) // HOGE

let a = {
    prop: 'hoge',
}
console.log(a.prop)//hoge
a.prop = 'hoge2'
console.log(a.prop)//hoge2

let a = 10;
let b = a; // 'a'の値が'b'にコピーされる
b = 20; // 'b'の値を変更しても'a'には影響しない
console.log(a); // 10
console.log(b); // 20

let obj1 = { value: 10 };
let obj2 = obj1; // 'obj1'の参照が'obj2'にコピーされる
obj2.value = 20; // 'obj2'を通じてオブジェクトを変更すると、'obj1'にも影響する
console.log(obj1.value); // 20
console.log(obj2.value); // 20

//配列の複製
let ary = [1, 2];
let newAry = [...ary]; // 'ary'の浅いコピーを作成
let newAry2 = [...ary, 3]; // 'ary'を複製し、新たに3を追加
console.log(ary, newAry2); // [1, 2] [1, 2, 3]

//オブジェクトの複製
let obj = { a: 1 };
let newObj = { ...obj, b: 2 }; // 'obj'の浅いコピーを作成し、新たに'b:2'を追加
console.log(obj, newObj); // {a: 1} {a: 1, b: 2}

const original = {
    level1: {
        level2: {
            level3: 'value'
        }
    }
};

const copy = {
    ...original,
    level1: {
        ...original.level1,
        level2: {
            ...original.level1.level2
        }
    }
};

console.log(copy); // { level1: { level2: { level3: 'value' } } }

// 元のオブジェクトを変更
original.level1.level2.level3 = 'new value';

console.log(original.level1.level2.level3); // 'new value'
console.log(copy.level1.level2.level3); // 'value'

let a = 0;
function fn1(arg) {
    arg = 1;
    console.log(a, arg);
}
fn1(a);
// 結果: 0, 1

const b = {
    prop: 0
};
function fn2(arg) {
    arg.prop = 1;
    console.log(b.prop, arg.prop);
}
fn2(b); // 結果: 1, 1

const a = {
    prop: 0
}
//分割代入
let { prop } = a;
prop = 1;

console.log(a.prop, prop);
//　0 1

const b = {
    prop: 0
};
function fn2({prop}) {
    prop = 1;
    console.log(b.prop);
}
fn2(b); // 結果: 0

const b = {
    prop: 0
};
function fn2(...arg) {
    arg[0].prop = 1; //オブジェクトへの参照を通じてプロパティを変更
    console.log(b.prop, arg[0].prop);
}
fn2(b); // 結果: 1, 1

function myFun(a, ...manyArgs) {
  console.log(a)//1
  console.log(manyArgs)//[2, 3, 4, 5]
}
myFun(1,2,3,4,5)

function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];

console.log(sum(...numbers)); // 結果:6　スプレッド演算子が配列を個別の引数に展開

//クロージャーの典型的な例、外側の関数の引数xを内側の関数が利用しています
function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

func(){
//関数スコープ
}
if(省略){
//ブロックスコープ
}
for(省略){
//ブロックスコープ
}
//関数式
const func = function() {};
//関数宣言
function func() {}

function User(name) {
  // this = {};  (暗黙で書く必要はない)
  // this へプロパティを追加
  this.name = name;
  // return this;  (暗黙で書く必要はない)
}
let user1 = new User("花子")
console.log(user1) //User {name: '花子'}

function User(name) {
  this.name = name;
  return {}
}
let user1 = new User("花子")
console.log(user1) //　{}

function User(name) {
    this.name = name;
    //コンストラクタ内で定義
    // this.func = function() {
    //  console.log( this.name);
    // }
}
User.prototype.func = function() {
    console.log(this.name);
}
const user1 = new User('花子');
user1.func()//花子

const obj = {
 prop : 'hoge'
};

console.log(obj instanceof Object); //true

console.log(obj.hasOwnProperty('prop')) //true

function User(name) {
    this.name = name;
}
User.prototype.func = function() {
    console.log(this.name);
}
//call()
function Admin(name, group) {
    User.call(this, name);
    this.group = group
}
// Object.create()
Admin.prototype = Object.create(User.prototype);
Admin.prototype.func2 = function() {
    console.log(this.group + this.name);
}

let user1 = new User("花子")
let admin1 = new Admin("太郎", "Aグループ")

console.log(user1)//User {name: '花子'}
console.log(admin1)//Admin {name: '太郎', group: 'Aグループ'}
user1.func() //花子
admin1.func() //太郎
admin1.func2() //Aグループ太郎

class User{
    constructor(name) {
        this.name = name;
    }
   func() {
        console.log(this.name);
    }
}
let user1 = new User("花子")

class User{
    constructor(name) {
        this.name = name;
    }
   func() {
        console.log(this.name);
    }
}

class Admin extends User {
    constructor(name, group) {
        super(name);
        this.group =group;
    }
   func2 = function() {
    console.log(this.group + this.name);
　　}
}

let user1 = new User("花子")
let admin1 = new Admin("太郎", "Aグループ")

console.log(user1)//User {name: '花子'}
console.log(admin1)//Admin {name: '太郎', group: 'Aグループ'}
user1.func() //花子
admin1.func() //太郎
admin1.func2() //Aグループ太郎

"use strict"
const obj = {
    prop: 'hoge',
    func: function() {
        console.log(this);
    }
}
obj.func()//結果　hoge

//obj.func()を変数に代入
const test = obj.func
//関数名()で実行
test()//結果undefined

window.prop = 'グローバル';
const obj = {
    prop: 'obj',
    func: function() {
        console.log(this.prop);
    }
}
function fn(ref) {
    ref();
}
fn(obj.func);//グローバル

const func = {
    func1: function(){
        console.log(this);
        const func2 = function(){
            console.log(this);
        }()
    }
}
func.func1()//{func1: ƒ} Window

window.prop = 'グローバル';
const obj = {
    prop: 'obj',
    func: function() {
        console.log(this.prop);
    }
}
const test1 = obj.func
test1() //グローバル
//bindでオブジェクトを固定
const test2 = obj.func.bind(obj);
test2()  //obj

//fn1関数の引数にbindした新たな関数を渡す
function fn1(ref) {
    ref();
}
fn1(test2);//obj

//fn2関数の引数を強制
function fn2(arg) {
    console.log(arg);
}
const test3 = fn2.bind(null, 'aaa');
test3()//aaa

function greet(message) {
    console.log(`${message}, my name is ${this.name}`);
}
const person1 = { name: 'Alice' };
const person2 = { name: 'Bob' };
// callメソッドを使用して、person1オブジェクトをgreet関数の実行コンテキストにバインド
greet.call(person1, 'Hello'); // 出力: Hello, my name is Alice
// callメソッドを使用して、person2オブジェクトをgreet関数の実行コンテキストにバインド
greet.call(person2, 'Hi'); // 出力: Hi, my name is Bob


function introduce(message, city) {
    console.log(`${message}, my name is ${this.name} and I live in ${city}`);
}
const person1 = { name: 'Alice' };
// applyメソッドを使用して、person1オブジェクトをintroduce関数の実行コンテキストにバインド
// 引数は配列として渡される
introduce.apply(person1, ['Hello', 'New York']); // 出力: Hello, my name is Alice and I live in New York

window.prop = 'グローバル';
const obj = {
    prop: 'obj',
    method : function() {
        const a = () => console.log(this.prop);
        a();
    }
}
obj.method(); //obj

//アロー関数が使えない状況では、thisをあらかじめ（_this）に代入してthisの参照先を安全に保持
window.prop = 'グローバル';
const obj = {
    prop: 'obj',
    method : function() {
        const _this = this;
        const a = function(){console.log( _this.prop)}
        a();
    }
}
obj.method(); //obj

const obj = {
  prop: 'こんにちは',
  greet: () => {
    console.log(this.prop);
  }
};

obj.greet(); // undefined

const obj = {
  prop: 'こんにちは',
  greet: function() {
    console.log(this.prop);
  }
};

obj.greet(); // "こんにちは"

const obj = {};

Object.defineProperty(obj, 'prop', {
       value: 0,
       configurable: true,
       enumerable: false,
       writable: true
});

console.log(obj.prop); //0

const descriptor = Object.getOwnPropertyDescriptor(obj, 'prop');

console.log(descriptor);
//{value: 0, writable: true, enumerable: false, configurable: true}

//definePropertyを使った場合
let user = {
  name: "太郎",
};
Object.defineProperty(user, "newName", {
  get: function () {
    return user.name;
  },
  set: function (value) {
    this. name = value;
  },
});

//オブジェクトに書いた場合
// let user = {
//   name: "太郎",
//   get newName() {
//     return this.name;
//   },
//   set newName(value) {
//     this.name = value;
//   },
// };

user.name = "花子";

console.log(user.newName);//花子
console.log(user.name)//花子
console.log(user)//{name: '花子'}

const obj = {
	prop1: 'v1',
	prop2: 'v2',
	prop3: 'v3',
}

for(let key in obj) {
	// if(obj.hasOwnProperty(key)) {
		console.log(key, obj[key]);
	// }
}
//prop1 v1
//prop2 v2
//prop3 v3

const arry = ['v1', 'v2', 'v3'];

for(let v of arry) {
	console.log(v)
}
//v1
//v2
//v3

for (let [key, value] of Object.entries(someObject)) {
  console.log(key, value);
}

//new Map() 新しいmapを作ります
const map = new Map();
const key1 = {};
// map.set(key, value)キーで、値を格納します.
map.set(key1, 'value1');
// map.get(key)指定されたキーの値を返却
console.log(map.get(key1));//value1
//map.has(key) – キーが存在する場合にtrue
console.log(map.has(key1)); //true
//map.delete(key) – キーで値を削除します.
//map.clear() – mapをクリアします.
//map.size – 要素の数

let myMap = new Map()
myMap.set('key1', 'v1')
myMap.set('key2', 'v2')
myMap.set('key3', 'v3')
myMap.entries()

//上はこれと同じ
// let myMap = new Map([
//   ['key1', 'v1'],
//   ['key2', 'v2'],
//   ['key3', 'v3']
// ]);

// キーの反復
for (let key of myMap.keys()) {
  console.log(key); // key1 key2 key3
}
//値の反復
for (let v of myMap.values()){
console.log(v);//v1 v2 v3
}
//[key, value]の反復
for (let entry of myMap){
   console.log(entry);// ['key1', 'v1'] ['key2', 'v2']['key3', 'v3']
}
//forEach
myMap.forEach( (value, key)=>console.log(`${key} ${value}`));
//key1 v1, key2 v2 ,key3 v3

const mySet = new Set()
mySet.add(1)
mySet.add(5)
mySet.add(5)
console.log(mySet)// Set [ 1, 5 ]
console.log(mySet.has(1)) //true
console.log(mySet.size)//2

for (let item of mySet){
 console.log(item) // 1 5
}

// Setオブジェクトを  Array.fromでArrayに変換
const arry = Array.from(mySet);
console.log(arry); //[1, 5]