JavaScript #1

👀 朝泳ぎのJavaScript入門

「JavaScript」あなたは誰ですか?

1993年、Marc AndreessenはMosaic Webブラウザを初めて発売した.モザイクはUI要素を追加したブラウザで、パソコンがあまり使えない人でも気軽に使えるようにしています.マーク・アンドリソン大学卒業後、Netscapeという会社を設立し、モザイクブラウザに基づくUI要素がより完璧なWebブラウザNetscape Navigatorを発売しました.当時はHTMLとCSSを使って簡単な形式のウェブページを作成することができたが、Netscape Navigatorは非常に静的なブラウザでHTMLページ間を移動するしかなかった.
動的Webサイトの体験をユーザーに示したいマーク・アンダーソンは、スクリプト言語を追加することにした.彼はScreem Scriptの制作者Brendan Eichと協力して、Skimスクリプトに基づくJavaの特徴を持つScript言語「LiveScript」を開発した.当時、マークとブランデンはJava言語の人気を借りてLiveScriptの人気を得ようとしたが、彼らはLiveScriptの名前をJavaScriptに変えた.これが私たちが今まで使っていたJavaScriptの始まりだった.

Variables(変数)

let_ 🆚 var (feat. hoisting)

「Mutable DataType」-値が変更される可能性があります.
読み取り/書き込み-メモリで読み取り/書き込み可能
varは使用しません!

レベルアップ(ハウスティン):宣言がどこにあっても、宣言を最上位に引き上げます.
通常letを使用して変数を宣言する場合は、まず変数の名前を宣言し、値を割り当てます.ただしvarは、宣言前に値を割り当てることができます.値が割り当てられていない前に出力することもできます(もちろん、この値はundeffineとして出力されます).この現象をvarリフトと呼ぶため,varを使用するとエラーが発生する可能性が高い.

block scopeは無視します.

以前は、上記の柔軟性を使用してプログラムを簡略化していましたが、大規模なサービスでは、上記の理由で予期せぬ値の割り当てなどの予期せぬエラーが発生する可能性があり、varは使用されなくなりました.
変数を宣言するときにletを使用します!

Variable types

primitive, single item: number, string, boolean, null, undefined, symbol
値自体がメモリに格納される

object, box container
値が大きすぎるため、記憶値の参照(reference)はメモリに

記憶される.

Constant(定数)

const

「可変データType」-値は変更できません!
読み取り専用-読み取り専用
Immutable data types: primitive types, frozen objects (i.e. object.freeze())
Mutable data types: all objects by default are mutable in JS
Favor immutable data type always for a few reasons...

security

thread safety

reduce human mistakes

Operator(演算子)

String connection(連結文字列)

console.log('1' + 2); // 12
console.log(`string literals: 1 + 2 = ${1 + 2}`);
	// string literals: 1 + 2 = 3
console.log('shawn's book'); // 안 나옴
console.log('shawn\'s book'); // shawn's book
	// 중간에 \(backSlash)를 넣어줘야 한다.

改行:n
tab:\t

数値(数値演算子)

// 2. Numeric operators
console.log(1 + 1); // add
console.log(1 - 1); // substract
console.log(1 / 1); // divide
console.log(1 * 1); // multiply
console.log(5 % 2); // remainder
console.log(2 ** 3); // exponentiation

増分および減量(増分演算子)

// 3. Increment and decrement operators
let counter = 2;

const preIncrement = ++counter;
// counter = counter + 1;
// preIncrement = counter;
console.log(`preIncrement: ${preIncrement}, counter: ${counter}`);
// preIncrement: 3, counter: 3

const postIncrement = counter++;
// postIncrement = counter;
// counter = counter + 1;
console.log(`postIncrement: ${postIncrement}, counter: ${counter}`);
// postIncrement: 3, counter: 4

const preDecrement = --counter;
console.log(`preDecrement: ${preDecrement}, counter: ${counter}`);
// preDecrement: 3, counter: 3

const postDecrement = counter--;
console.log(`postDecrement: ${postDecrement}, counter: ${counter}`);
// postDecrement: 3, counter: 2

割当て(割当て演算子)

// 4. Assignment operators
let x = 3;
let y = 6;
x += y; // x = x + y;
x -= y;
x *= y;
x /= y;

Comparison(比較演算子)

// 5. Comparison operators
console.log(10 < 6); // less than
console.log(10 <= 6); // less than or equal
console.log(10 > 6); // greater than
console.log(10 >= 6); // greater than or equal

ろんりえんざんし

|(or)演算子は、valueまたは式の1つであってもtrueを返します.|演算子は、trueに最初に直面したときに停止し、trueを返します.したがって、比較的簡単な値を前にしてから、できるだけ下のcheck()などの演算量が大きく重い関数や式(expression)を最後にすることをお勧めします.(&(and)演算子もそうです!)

// 6. Logical operators: || (or), && (and), ! (not)
const value1 = true;
const value2 = 4 < 2;

// || (or), finds the first truthy value
console.log(`or: ${value1 || value2 || check()}`);

// && (and), finds the first falsy value
console.log(`and: ${value1 && value2 && check()}`);

function check() {
  for (let i = 0; i < 10; i++) {
    //wasting time
    console.log('😱');
  }
  return true;
}

// ! (not) // 값을 반대로 바꿔준다.
console.log(!value1); // false

&&簡単なnull checkを行うときにもよく使います.

// often used to compress long if-statement
// nullableObject && nullableObject.something
if (nullableObject != null) {
	nullableObject.something;
}

Equality(ピア演算子)

// 7. Equality
const stringFive = '5';
const numberFive = 5;

// == loose equality, with type conversion
// 타입은 무시하고 안의 값만을 비교
console.log(stringFive == numberFive); // true
console.log(stringFive != numberFive); // false

// === strict equality, no type conversion
// 타입까지 엄격하게 비교
console.log(stringFive === numberFive); // false
console.log(stringFive !== numberFive); // true

// object equality by reference
// object는 값이 저장된 주소(reference)를 저장
const ellie1 = { name: 'ellie' };
const ellie2 = { name: 'ellie' };
const ellie3 = ellie1;
console.log(ellie1 == ellie2); // false
console.log(ellie1 === ellie2); // false
console.log(ellie1 === ellie3); // true

// equality - puzzler
console.log(0 == false); // true
console.log(0 === false); // false
console.log('' == false); // true
console.log('' === false); // false
console.log(null == undefined); // true
console.log(null === undefined); // false

条件演算子じょうけんえんざんし:if文ifぶん

// 8. Conditional operators: if
// if, else if, else
const name = 'df';
if (name === 'ellie') {
  console.log('Welcome, Ellie!');
} else if (name === 'coder') {
  console.log('You are amazing coder');
} else {
  console.log('unknown');
}
// unknown

Ternary演算子(3つの演算子)

? 左の式がtrueの場合、左の値が出力され、そうでない場合は右の値が出力されます.形式が長くなると可読性が落ちるので、簡単な形式の文だけを使うのがおすすめです.

// 9. Ternary operator: ?
// condition ? value1 : value2;
console.log(name === 'ellie' ? 'yes' : 'no');
// 위에서 이름이 df로 되어있기 때문에 no가 출력

Switch文（スイッチ文）

if/else if/elseが繰り返される場合は、switch文を使用することを考慮したほうがいいです.

// 10. Switch statement
// use for multiple if checks
// use for enum-like value check
// use for multiple type checks in TS
const browser = 'IE';
switch (browser) {
  case 'IE':
    console.log('go away!');
    break;
  case 'Chrome':
  case 'Firefox':
    console.log('love you!');
    break;
  default:
    console.log('same all!');
    break;
}

Loops(繰り返し文)

while

// while loop, while the condition is truthy,
// body code is executed.
let i = 3;
while (i > 0) {
  console.log(`while: ${i}`);
  i--;
}

do while

// do while loop, body code is executed first,
// then check the condition.
do {
  console.log(`do while: ${i}`);
  i--;
} while (i > 0);

for

// for loop, for(begin; condition; step)
for (i = 3; i > 0; i--) {
  console.log(`for: ${i}`);
}

for (let i = 3; i > 0; i = i - 2) {
  // inline variable declaration
  console.log(`inline variable for: ${i}`);
}

nested loops

// nested loops
for (let i = 0; i < 10; i++) {
  for (let j = 0; j < 10; j++) {
    console.log(`i: ${i}, j:${j}`);
  }
}

quiz

// break, continue
// Q1. iterate from 0 to 10 and print only even numbers (use continue)
for (let i = 0; i < 11; i++) {
  if (i % 2 !== 0) {
    continue;
  }
  console.log(`q1. ${i}`);
}

for (let i = 0; i < 11; i++) {
  if (i % 2 === 0) {
    console.log(`q1. ${i}`);
  }
}

// Q2. iterate from 0 to 10 and print numbers until reaching 8 (use break)
for (let i = 0; i < 11; i++) {
  if (i > 8) {
    break;
  }
  console.log(`q2. ${i}`);
}