[TIL]Javascript変数、モジュール、文字、矢印関数、クラス、forEach()、Map()、reducd()

28107 ワード
JavaScript TIL テキストリンク

let vs Const vs Var


letとConstはES 6以降に新しく出現した変数である.
<役割の違い>
  • let:再定義可能、再宣言不可、Block Scoped
  • const:再定義不可、再宣言不可、Block Scoped
  • var:再定義可能、再宣言可能、機能拡張
    • let a = 3
const b = 4
var c = 2
console.log(a); 3
console.log(b); 4
console.log(c); 2
//let, const 값 변경시
a = 12;
b = 23;
console.log(a); 12
console.log(b); // error
//let, const, var 값 재정의 시
let a = 23;
const b = 123;
var c = 132;
console.log(a); // error
console.log(b); // error
console.log(c); 132
  • const宣言の対象内容は変更可能
    • const arr = [1,2,3]
arr = [2,4,5] // error
arr[0] = 4
arr.push(5)
console.log(arr); [4,2,3,4]

    モジュールインポートエクスポート


    モジュール:ファイルを複数のファイルに分割する場合、各ファイルexport:変数、関数またはクラスを宣言する場合は、先にexportを付けてエクスポート
    //배열 내보내기
export let name = ['Lee','Seunghoon','hoon']

//상수 내보내기
export const City = 'Seoul';


//클래스 내보내기
export class Name{
	constructor(name){
		this.name = name;
	}
}

//함수 내보내기
export function Name(name){
	console.log(name)
}
    宣言からエクスポートを削除して貼り付け
    function sayHi(user) {
  alert(`Hello, ${user}!`);
}

function sayBye(user) {
  alert(`Bye, ${user}!`);
}

export {sayHi, sayBye}; // 두 함수를 내보냄
    import:モジュールのインポート時に「パス」からインポート
    import {sayHi, sayBye} from './say.js';

sayHi('John'); // Hello, John!
sayBye('John'); // Bye, John!
    as:モジュール名の設定import * as 'name':import時にモジュール名のインポートを変更します.
    import {sayHi as hi, sayBye as bye} from './say.js';
hi('John'); // Hello, John!
bye('John'); // Bye, John!
    export as:出口時モジュール名変更
  • export 
    • export {sayHi as hi, sayBye as bye};
  • import 
    • import * as say from './say.js';

say.hi('John'); // Hello, John!
say.bye('John'); // Bye, John!
    export default:エクスポートするオブジェクトが1つしかない場合に使用
  • export 
    • export default function User(name) { // export 옆에 'default'를 추가해보았습니다.
 console.log(name);
}

// or

function User(name) {
	console.log(name);
}

export default User;
  • import 
    • import User from './user.js'; // {User}가 아닌 User로 클래스를 가져왔습니다.

User("John")

    テンプレート文字(backtic)

    ' '・" "文字列表示用
    使用法:「asdf」
    フィーチャー:式を${...}に設定文字列に何らかの方法で挿入できます
    const name = "Lee"
console.log(`my Name is ${name}`); 
// => 'my Name is Lee'
  • 文字列は複数行にわたって表示可能
    • let guestList = `손님:
 * John
 * Pete
 * Mary
`;

console.log(guestList); // 손님 리스트를 여러 줄에 걸쳐 작성함`
// 손님:
// * John
// * Pete
// * Mary

    矢印関数


    ()=>で関数を縮小
    let func = (arg1, arg2, ...argN) => expression;

let func = function(arg1, arg2, ...argN) {
  return expression;
};

    class

  • 宣言法
    • clss Person{
	...
}
let Lee = new Person()
  • 初期値の設定
    コンストラクション関数(コンストラクション関数)を使用してクラスオブジェクトの初期値を設定する
    • class Person {
	constructor(name,age,city){
    	this.name = name;
        this.age = age;
        this.city = city;
    }
}
let Lee = new Person('Lee','20','Seoul');
  • 設定方法
    オブジェクトを設定する動作
    • class Person {
	constructor(name,age,city){
    	this.name = name;
        this.age = age;
        this.city = city;
    }
    changeAge(changeAge){
    	return this.age = changeAge;
    }
}
let Lee = new Person('Lee',20,'Seoul');
Lee.changeAge(21)
console.log(Lee) // name : 'Lee', age : 21, city: 'Seoul'

    forEach()

    forEach():与えられたcallback乙アレイの各要素に対して昇順に1回実行
    戻り順:配列要素、インデックス、配列の順に戻ります(*順序が重要です*)
    let names = ["Lee", "Seung", "Hoon"];

names.forEach((e) => console.log(e)) // "Lee","Seung","Hoon"
    let names = ["Lee","Seung","Hoon"];

names.forEach(function(element,index,array){
	console.log(element,index,array)
    }
    // "Lee", 0, Array = ["Lee","Seung","Hoon"]
    // "Seung", 1, Array = ["Lee","Seung","Hoon"]
    // "Hoon", 2, Array = ["Lee","Seung","Hoon"]

    map()

    map():アレイ内の要素ごとに与えられた関数を呼び出した結果をまとめ、新しいアレイを返す.
    const array1 = [1, 4, 9, 16];

const map1 = array1.map(x => x * 2);

console.log(map1);
// Array [2, 8, 18, 32]

    reduce()

    reduce:アレイ内の各要素に対して与えられたreducer関数を実行し、結果値を返します.
    すべての配列の和を求めるために使用
    戻り順:total、値を選択し、書き込む必要はありません(インデックス、現在の配列を選択)
    const arr = [1, 2, 3, 4, 5];
const result = arr.reduce((누적된 수: acc, 현재 선택 요소: cur) => { return acc += cur; });
console.log(result);  // 15
    SWEA 1873上の戦地
    [Leetcode] Palindrome Number