[JavaScript]JavaScript以前は馴染みのなかった文法📑

1.可変/不変変数（var、let、const）

-varは再定義および再宣言できます.
-letは可変変数として再定義できますが、再宣言はできません.
-constは不変の変数であり、再宣言および再定義はできません.
*再宣言:同じ名前の変数を再作成
*再定義:指定した変数に値を置換しようとします
*스코프(scope):識別子(ex.変数名、関数名、クラス名など)の有効範囲

varの問題
①変数宣言が柔軟なため、予期せぬ値を返すことができます.
②コードが長くなると、どこで使うか把握しにくくなります.
③関数レベルスキャンのため、関数外部で宣言された変数はすべてグローバル変数である.
④変数宣言前に変数を参照し、常に未定義を返します.
したがって、varはあまり使いにくいので、letとconstキーワードを使うことをお勧めします.

//변수 선언
var x = 2;
// 재정의
x = 4;
// 재선언
var x = 4;

2.モジュールのエクスポートとインポート(export/import)

モジュールをエクスポートする方法はnamedexportとdefault exportです.

// named export 기본 형식
export { 모듈명1, 모듈명2 };
import { 모듈명1, 모듈명2 } from 'js 파일 경로';

// default export 기본 형식
export default 모듈명;
import 모듈명 from 'js 파일 경로';

-named exportは、1つのファイルから複数のファイルをエクスポートするために使用することができる.export名と同じ名前でインポートし、カッコで囲んでインポートする必要があります.asを使用するか、ファイル内のクラスまたは変数を同時にインポートするには、* asを使用します.

// named export는 중괄호 포함 import 
import { named1, named2 } from './example.js';

// named export에서 as를 사용하여 다른 이름으로 import
import { named1 as myExport, named2 } from './example.js';

// 한 파일에 있는 모든 클래스나 변수를 * as를 사용하여 한 번에 import
import * as Hello from './example.js';

-default export変数やクラスなどは、1つのファイルからのみエクスポートできます.また、importではカッコで囲まずに任意の名前でインポートできます.

// default export 는 중괄호 없이 import 
import default1 from './example.js';

3.テンプレート

テンプレート文字はES 6から新しく導入された文字列記号で、引用符ではなくbacktic(`)を使用して文字列を生成します.引用符とは異なりbackticには改行が反映されます.また、文字列間に変数や演算を挿入すると、${}間に式が挿入されます.

var jsp = "자바스크립트";

// 기존 코드
console.log("이건 " + jsp + "입니다.");

// 템플릿 리터럴 방식
console.log(`이건 ${jsp}입니다.`);

// 출력 결과 -> 이건 자바스크립트입니다.

4.矢印関数（矢印関数）

矢印関数は、関数式を記述するより簡単で簡潔な構文です.

// 기본 함수 형식
let sum = function(a, b) {
  return a + b;
};

// 화살표 함수 형식
let sum = (a, b) => a + b;

引数が1つしかない場合は、引数を含む括弧を省略できます.

パラメータが1つもない場合は、カッコをクリアするだけです.ただし、この場合は括弧は省略できません.

本明細書に1行しかない場合は、括弧を省略することができる.

カッコは、本文が複数行で構成されていることを示し、カッコを使用する場合は欠落した値を返さなければなりません.

5. forEach() / map()

foreach()とmap()はループ文で、配列中の要素を1対1でペアリングします.
-forEach():配列要素ごとに与えられた関数(コールバック)を1回実行します.배열.forEach((요소, 인덱스, 배열) => { return 요소 });-map():アレイ内の各要素に対して所定の関数(コールバック)を呼び出した結果を収集し、新しいアレイに戻る배열.map((요소, 인덱스, 배열) => { return 요소 });ただしforEach()とmap()の役割は同じですが、戻り値の違いがあります.
forEach()は既存のアレイを変更し、map()は結果値として新しいアレイを返します.

var arr = [1,2,3,4,5];
// forEach()
var newArr = arr.forEach(function(e, i) {
  return e;
});
// return -> undefined

// map()
var newArr = arr.map(function(v, i, arr) {
  return v + 1;
});
// return -> 2, 3, 4, 5, 6

6. reduce()

reduce():配列内の各要素を巡回し、callback関数の実行値を積算して結果値を返します.배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값);

result = sum.reduce((prev, curr, i) => {
  console.log(prev, curr, i);
  return prev + curr;
}, 0);
// 0 1 0
// 1 2 1
// 3 3 2
result; // 6

*初期値を入力しないと、初期値は0番目のインデックスの値になります.
*reduce()初期値を配列に設定し、値を配列にプッシュするとmapと同じになります.
参考資料
🐰 Ellis SWエンジニア第2期JavaScriptII課
1.var、let、constの違い / var、let、constの違い
2.default exportとnamedexportの違い
3.テンプレート文字:backtic(`)、ドル(${})の使い方
4.矢印関数基本
5.forEach()とmap()の比較と分析
6.reduce()使用