オブジェクト

オブジェクトは、他のデータ型のように変数に格納できます.使用するだけです.
形状が{}のオブジェクトをObject Literalと呼びます.

let hello = {};

オブジェクトは無秩序データの集合です.
順番のあるデータは並べられています.
keyはproperty nameとも呼ばれ、valueはproperty valueとも呼ばれる.

キーの役割は、特定の値を持つ変数のようなものです.
このキーを使用して、propertyに格納されている値を知ることができます.
キーの値には、テキスト、数値、関数、およびオブジェクトを含めることができます.

リソースの割り当て

difficult[name] = '값 바꾼다';
console.log(difficult[name]);

difficult.color = '색깔';
console.log(difficult.color);

console.log('생성전: ' + difficult.new);
difficult.new = '새로 추가된 프로퍼티';
console.log('생성후: ' + difficult.new);

オブジェクトには既に鍵が存在します.この値は再割り当てで置き換えられます.
以前にない鍵を使用してアクセスすると、新しいpropertyが追加されます.
まだ持っていない鍵に近づくと、Propertyを追加する準備ができていますが、値はありません.

console.log(difficult.newProperty);

困難なオブジェクトにnewProperty Propertyがないため、未定義と呼ばれます.
次は、ないキーに直接値を入力することでpropertyを追加する方法です.

difficult.realNewProperty = '추가 됐다';

オブジェクトをconstと宣言した場合

const a = 1;
a = 2;

contとして宣言された変数は、値を絶対に変更できません.
次のa = 2;を試してみるとjavascriptエラーが発生します.
ただし、contとして宣言された変数にオブジェクトを再割り当てすると、エラーが発生しますが、そのオブジェクトにPropertyを追加または変更できます.

const mutableObj = {
  name: '객체'
};

mutableObj = {
   name: '수정'
}

変数mutableObjにオブジェクトを再割り当てすることは不可能です.

mutableObj.name = '수정';
mutableObj.type = 'Object 타입';

ただし、Propertyにアクセスしてコンテンツを変更したり、Propertyを追加したりしてもエラーは発生しません.

Method

オブジェクトに格納されている値が関数である場合をメソッドと呼びます.

console.log();

コンソール・ログの例では、オブジェクトの形態が表示されます.
JavaScriptのどこからでもアクセスできるので、グローバルオブジェクトであることがわかります.
コンソールの後、dot(".")でpropertyにアクセスし、logキーの値は関数です.
logはconsoleと呼ばれるオブジェクトメソッドで、オブジェクトでメソッドを定義した後、以下の操作を実行できます.

let methodObj = {
  do: function() {
    console.log('메서드 정의는 이렇게');
  }
}

コールは以下の通りです.

methodObj.do();

ネストされたオブジェクト

ビジネスで使用されるオブジェクトはほとんど重複しています.コンフィギュレーション値は、オブジェクトであってもよいし、コンフィギュレーション値の配列の要素であってもよいし、オブジェクトであってもよい.

let nestedObj = {
	type: {
		year: '2019',
		'comment-type': [{
			name: 'simple'
		}]
	}
}

上のコードからsimpleを出力するには、次の操作を行います.

console.log(nestedObj.type['comment-type'][0].name);

オブジェクトは参照として保存されます。

オブジェクトを変数に保存すると、オブジェクトテキスト自体ではなく参照が格納されます.変数にテキストを保存すると、テキスト自体が保存されます.したがって、同じテキストであれば、互いの値は同じであるためtrueとなる.

const a = '안녕';
const b = '안녕';
console.log(a === b);

しかし、下のオブジェクトは「こんにちは」のように見えます.falseです.

const hiObj = { 
  name: '안녕' 
};
const helloObj = {
  name: '안녕'
};
console.log('객체비교 =>', hiObj === helloObj);

これは、オブジェクトを変数に保存する場合、オブジェクト自体が直接保存されないためです.オブジェクトが存在するメモリのreferenceが格納されているためです.hiObjが持つ真の値はメモリアドレスreferenceです.ただし、hiObjをマウントすると、メモリアドレスではなくメモリに格納されたデータが返されます.
したがってvalueデータは同じですが、hiObjとhelloObjが持つ真の値は異なります.

console.log('객체비교 =>', hiObj === helloObj);
console.log('객체값비교 =>', hiObj.name === helloObj.name);

したがって、オブジェクトを含む変数を比較すると、それらは異なることがわかります.ただし、オブジェクト内部のプロパティ値がテキストである場合は、テキストを比較することで同じかどうかを判断できます.
constとして宣言されたオブジェクトを再度表示します.

const mutableObj = {
  name: '객체'
};

mutableObj = {
   name: '수정'
}

mutableObj.name = '수정 됩니다!';

constとして宣言された変数は絶対に値を変更できないため、mutableObjに新しいオブジェクトを割り当てるとエラーが発生します.新しいメモリアドレス(reference)で変更しようとしているからです.
ただし、mutableObj.nameでPropertyにアクセスして変更できます.オブジェクト内部のプロパティ値を変更するのではなく、mutableObjに格納されている参照を変更できます.

ES6

宣言関数(Arrow function)

前に学んだ表現関数の方法とは全く違います.

//ES5
function() {}

//ES6
() => {}

無名関数の基本表現です.
ES 6ではfunctionというキーワードを抜き、括弧だけが残っています.
次に=>(矢印)が追加されます.
名前付き関数を作成する場合は、次のようになります.

//ES5
function getName() {}

//ES6
const getName = () => {}

呼ぶときは両方同じです.

getName()

ES 6は、getNameという変数に関数を格納します.
実際、関数は変数に格納できる方法です.
したがって、ES 5の場合も同様に変数に格納することができる.

//ES5
//Function Declaration
function getName() {}

//ES5
//Function Expression
const getName = function() {}

因子を受け入れる方法

//ES5
const getName = function(name) {}

//ES6
const getName = (name) => {}
const getName = name => {}

因子が1つしかない場合は、括弧を省略できます.
2つの因子の場合は省略できます.

//ES5
const getName = function(name, age) {}

//ES6
const getName = (name, age) => {}

返される関数が表示されると、

//ES5
function hi(text) {
  text += '하세요';
  return text;
}

//ES6
const hi = text => { 
  text += '하세요';
  return text 
};

関数に明確な実行内容がなく、戻るだけであればreturnキーワードとカッコを省略できます.

//ES5
function getName(name) {
  return name;
}

//ES6
const hi = name => { return name };
const hi = name => name;

カッコとreturn文を省略する場合は、矢印の右側に戻る値のみを書きます.
他のコードは使用できません.

//ES5
function getFullName(first, family) {
  return first + family;
}

//ES6
const hi = (first, family) => { return first + family };
const hi = (first, family) => first + family;

template literals, string method

template literals

ES 6に追加された構文のうち、便利なのはtemplate literalです.
stringを作成するときに引用符を使用しますが、

const name = '김개발';

今はbacktickでも巻線できます.

const name = `김개발`;

そしてbacktickで包み、変数を加えて表現することができます.

const name = '김개발';
const hi = `안녕하세요. 저는 ${name} 입니다.`;

変数を使用するには、変数を${}でラップする必要があります.
伝統的に、

const hi = '안녕하세요. 저는 ' + name + ' 입니다.';

上記の通りですが.
企業処理(開行、断行)はどうすればいいですか?
次は文法の間違いの例です.

let detail = '자세히 
보아야
이쁘다';
console.log(detail);

引用符で囲まれた文字列は、開行処理を行わないと文法エラーになります.
引用符で囲まれたstringで行を開くには、元のようにしなければなりません.

let detail = '자세히\n'+'보아야\n'+'이쁘다';
console.log(detail);

ただし、template literalでは、入力したstringに従って書き換えられます.

let detail = `자세히 
보아야
이쁘다

내코드..`;
console.log(detail);

string method

ES 6には、いくつかの有用なstringメソッドが追加されています.
この間stringで特定のstringを検索するためにindexOfを用いたが,以下の3つの方法がある.

startsWith

endsWith

includes

const email = '[email protected]';

console.log(email.startsWith('ye'));
console.log(email.endsWith('com'));
console.log(email.includes('@gmail'));

また、特定の文字列を繰り返す場合はrepeat関数を使用します.

'#'.repeat(3);

arrow function

array methods

arrow関数で最もよく使われる代数は,コールバック関数として用いられる場合である.
コールバック関数とは,パラメータとして伝達される関数である.
arrow関数をよく使用する方法はarrayを繰り返し文として使用するmap,foreachメソッドである.

Array.map()

Array.forEach()

Array.map()

mapメソッドは配列を繰り返し、コールバック関数で返される値で各(各)要素を変更します.
mapメソッドの戻り値は,修正後の値で再生成される配列である.

const arr = [1, 2, 3];
const squares = arr.map(x => x * x);

2行目ではmap関数に渡される関数をそのままパラメータとして以下に示す.

const squares = arr.map(function (x) { 
  return x * x;
});

Arrayタイプのデータに対して1つ以上の要素を繰り返します.
反復のたびに実行する関数がparameterに渡されます.
次に、このコールバック関数でarrayの要素をパラメータ(x)として受信する.
これらの要素を変更する場合は、論理を実装して戻ります.
インデックス内の要素は、返される値に変換されます.

Array.forEach()

foreachはforの代わりに使用される重複文です.
mapとの大きな違いはforeach関数自体が何も返さないことです.
foreach関数から脱出したい場合はreturnを使用します.
要素が変更された新しい配列がmapを返した場合、foreachは何も返しません.
したがってforeachに渡されるcallback関数も返されない.
forEachはfor文ではなく繰り返しの方法です.

let startWithNames = [];
let names = ['a', 'ab', 'cbb', 'ada'];

names.forEach(el => {   
  if (el.startsWith('a')) {     
    startWithNames.push(el);   
  } 
});

let hasC = false;
let arr = ['a', 'b', 'c', 'd'];

arr.forEach(el => {
  if (el === 'c') {
    hasC = true;
    return;
  }
});

foreachも関数で、途中で重複文から脱出したい場合は返すことができます.
foreachが現在のindexを知りたい場合は、2番目のパラメータとして取得できます.

let idxOfC = -1;
let arr = ['a', 'b', 'c', 'd'];

arr.forEach((el, idx) => {
  if (el === 'c') {
    idxOfC = idx;
    return;
  }
});