2022.01.18 + 추가 공부

오늘은 온라인 강의가 널널하기도 하고 JS 기초가 좀 부족한 것 같아서 유튜브로 추가로 공부한 내용을 정리하려고 한다!

드림코딩 엘리님 채널의 JS 강의보고 공부했다!!

• Block scope: block 안에서 선언된 변수는 block 밖에서는 사용 불가

• Global scope: 어디서나 사용 가능!

• mutable type: let
  -> r/w (read/write)

• immutable type: const
  -> r (read only)

'use strict';

//2. variable

let globalname = "global name"; 
{
let name = "ellie";
console.log(name);
name = "hello";
console.log(name); 
}

console.log(globalname);

//var 이제 사용 안함 
// var hoisting (move declaration from bottom to top)
//has no block scope (block을 무시함)
age = 4;
var age;

//3. constant
//favor immutable data type always for a few reasons: 
//- security
// thread safery
// reduce human mistakes 
const daysInWeek = 7;
const maxNumber = 5;

//4. Variable types  
//primitive, single item: number, string, boolean, null, undefined, symbol 
//object, box container 
// function, first-class function(function도 datatype)

// 숫자 type은 number 하나! 
const count = 17; //integer
const size = 17.1; //decimal number 
console.log(`value: ${count}, type: ${typeof count}`); //value: 17, type: number
console.log(`value: ${size}, type: ${typeof size}`); //value: 17.1, type: number

//number - special numeric values 
const infinity = 1 / 0;
const negativeInfinity = -1 / 0; 
const nAn = 'not a number' / 2;
console.log(infinity); // Infinity
console.log(negativeInfinity); //-Infinity
console.log(nAn); //NaN

//bigInt (fairly new, don't use it yet) 크롬 가능  
const bigInt = 12345678912345678912345123455666777678n; // over (-2^53 ~2^53)
console.log(`value: ${bigInt}, type: ${typeof bigInt}`);
Number.MAX_SAFE_INTEGER;

//string 
// 1개도 단어도 다 string 
const world = 'world';
const greeting = 'hello' + world;
console.log(`value: ${greeting}, type: ${typeof greeting}`); //value: helloworld, type: string
const hellolee = `hi ${world}!`; //template literal (string)

//boolean
//false : 0, null, undefind, NaN, '' 
//true: any other value
const canRead = true;
const test = 3 < 1; //false 
console.log(`value: ${canRead}, type: ${typeof canRead}`); //value: true, type: boolean
console.log(`value: ${test}, type: ${typeof test}`); //value: false, type: boolean

//null 
let nothing = null; 
console.log(`value: ${null}, type: ${typeof null}`); //value: null, type: object

//undefined
let x;
console.log(`value: ${x}, type: ${typeof x}`); //value: undefined, type: undefined

//object, 객체 real-life object, data structure
const ellie = {name: 'ellie', age: 20};
ellie.age = 21; 

//symbol, create unique identifiers for objects, 고유한 식별자 필요하거나 우선순위를 주고 싶을 때 
const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
console.log(symbol1 === symbol2);
const gSymbol1 = Symbol.for('id');
const gSymbol2 = Symbol.for('id');
console.log(gSymbol1 === gSymbol2); //true
console.log(`value: ${symbol1.description}, type: ${typeof symbol1}`); //symbol은 .description이 있어야 출력 가능 

// 5. Dynamic typing: dynamically typed language 
// 선언할 때 type을 선언하지 않아도 됨 
// type이 바뀔수도 있다

//1. String concatenation(연속)
console.log('my' + ' cat');
console.log('1' + 2);
//` 와 $ 이용하면 쓴대로 작성됨 
console.log(`string literals: 
''''

1 + 2 = ${1 + 2}`);
// \n은 줄바꿈 \t은 tab
console.log("ellie's \n\tbook")  

//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
//subtract도 동일 

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

// 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 

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

//|| (or), find the first truthy value
console.log(`or: ${value1 || value2 || check()}`);
//-> 무조건 간단한 게 앞으로 가야 시간 절약! 무거운 함수는 뒤로 

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

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

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

//! (not)
console.log(!value1);

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

// == loose equality, with type conversion 
console.log(stringFive == numberFive);
console.log(stringFive != numberFive);

// === strict equality, no type conversion 
console.log(stringFive === numberFive);
console.log(stringFive !== numberFive);

//object equality by reference
const ellie1 = {name: 'ellie'};
const ellie2 = {name: 'ellie'};
const ellie3 = ellie1; 
console.log(ellie1 == ellie2); //f
console.log(ellie1 === ellie2); //f
console.log(ellie3 === ellie2); //t

//8. Conditional operators: if 
//if else if, else 

const name_ ='ellie';
if (name_ ==='ellie') {
    console.log('Welcome, Ellie!');
} else if (name_ ==='coder') {
    console.log('You are amaazing coder');
}else {
    console.log('unkwnon');
}

//9. Ternary operator : ? 
//condition ? value1 : value2;
console.log(name_ === 'ellie' ? 'yes' : 'no');

//10. Switch statement 
//use for murtiple 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.lof('I love you');
        break;
    default:
        console.log('same all!');
        break; 
}

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

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

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

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

//nested loops 
//가능은 하나 많이 안쓰는 게 좋다! 
for (let i = 0; i < 10; i++) {
    for (let j = 0; j < 10; j++) {
        console.log(`i: ${i}, j:${j}`);
    }
}