javascript

{
    var x = 100;    //변수 x에 숫자 100을 저장함
    var y = 200;   //변수 y에 숫자 200을 저장함
    var z = "javascript";   //변수 z에 문자 "javascript"를 저장함

    console.log(x);
    console.log(y);
    console.log(z);
}

{
    let x = 100;
    let y = 200;
    let z = "javascript";

    x = 300;
    y = 200;
    z = "react";

    console.log(x);
    console.log(y);
    console.log(z);
}

{
    let x = 100;
    let y = 200;
    let z = "javascript"

    x += 300;   // x = x + 300
    y += 400;   // y = y + 400
    z += "react"; 

    console.log(x);
    console.log(y);
    console.log(z);
}

{
    let x = 100; // 전역 변수 {}안에 넣어서 블록화 시키면 함수가 먹히지 않는데, 먹히는 변수
    let y = 200; // 전역 변수

    function func(){
        let x = 300; // 지역 변수 함수 안에 넣은 변수 함수 블록 내에서만 사용할 수 있음
        let y = 400; // 지역 변수

        // x = 300; // 전역 변수 위의 변수(let x = 100;)를 변경했기 때문에 전역 변수임 

        z = "javascript"; // 전역 변수 위에 선언을 하지 않아도 (let)생략을 한 변수를 변경했다고 여김

        console.log("함수안"+x);
        console.log("함수안"+y);
        console.log("함수안"+z);
    }
    func();

    console.log("함수밖"+x);
    console.log("함수밖"+y);
    console.log("함수안"+z);
}

{
    const x = 100;
    const y = 200;
    const z = "javascript";

    x = 300;    //Assignment to constant variable.
    y = 400;
    z = "react";

    console.log(x);
    console.log(y);
    console.log(z);
}

{
    const arr = new Array( );
    arr[0] = 100;
    arr[1] = 200;
    arr[2] = "javascript";

    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);
}

{
    const arr = new Array(100, 200, "javascript");
            
    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);
}

{
    const arr = [ ];
    arr[0] = 100;
    arr[1] = 200;
    arr[2] = "javascript";

    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);
}

{
    const arr = [100, 200, "javascript"]

    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);
}

{
    const obj = new Object( );
    obj[0] = 100;
    obj[1] = 200;
    obj[2] = "javascript";

    console.log(obj[0]);
    console.log(obj[1]);
    console.log(obj[2]);
}

{
    const obj = new Object( );
    obj.a = 100;
    obj.b = 200;
    obj.c = "javascript";

    console.log(obj.a);
    console.log(obj.b);
    console.log(obj.c);
}

{
    const obj = { };
    obj.a = 100;
    obj.b = 200;
    obj.c = "javascript";
            
    console.log(obj.a);
    console.log(obj.b);
    console.log(obj.c);
}

{
    const obj = {a:100, b:200, c:"javascript"};

    console.log(obj.a);
    console.log(obj.b);
    console.log(obj.c);
}

객체 정리 {
    const x = 100; 
    const y = 200;
    const z = "javascript";

    위의 내용을 

    const x =100, y = 200, z = "javascript"; 로 간추려서 쓸 수 있습니다.

    let x = 100;
    let y = 200;
    let z = "javascript";

    x -= 1000;  // 100 - 1000 = -900

    x += 1000;  // -900 + 1000 = 100

    위에서부터 순서대로 계산합니다.

    document.write(x);
    console.log(x, y, z);
    alert(z)
    로 쓸 수도 있습니다.
}

배열 정리 {
    const brr = new Array( );
    const crr = new Array(200, "react", false);
    const drr = [ ];
    const err = [300, "arract", true];

    brr[0] = 100;
    brr[1] = "javascript";
    brr[2] = true;
    drr[0] = 100;
    drr[1] = "javascript";
    drr[2] = true;

    console.log(brr[0], brr[1], brr[2]);
    console.log(crr[0], crr[1], crr[2]);
    console.log(drr[0], drr[1], drr[2]);
    console.log(err[0], err[1], err[2]);
}

{
    const obj = {a:100, b:200, c:"javascript"};

    console.log(obj.a);
    console.log(obj.b);
    console.log(obj.c);
}

{
    const obj = [
    {a:100, b:200},     // obj 0
    {c:"javascript"}    // obj 1
    ];

    console.log(obj[0].a);
    console.log(obj[0].b);
    console.log(obj[1].c);
}

{
    const obj = {
    a: 100,
    b: [200, 300],
    c: {x: 400, y: 500},
    d: "javascript"
    }
        
    console.log(obj.a);  // 객체 a
    console.log(obj.b[0]);  // 객체 b의 배열 0
    console.log(obj.b[1]);  // 객체 b의 배열 1
    console.log(obj.c.x);  // 객체 c의 x 값
    console.log(obj.c.y);  // 객체 c의 y 값
    console.log(d);
}

{
    const a = 100;
    const b = 200;
    const c = "javascript";

    const obj = {a, b, c};

    console.log(a);
    console.log(b);
    console.log(c);
}

{
    const obj = {
    a: 100,
    b: [200, 300],
    c: "javascript",
    d: function( ){
        console.log("javascript가 실행되었습니다.");
        }
    e: function( ){
        console.log("obj.c + 가 실행되었습니다.");
        }
    }
    f: function( ){
        console.log(this.c + "가 실행되었습니다.");
        }
    }

    console.log(obj.a);
    console.log(obj.b[0]);
    console.log(obj.b[1]);
    console.log(obj.b[2]); // obj[2]는 없기 때문에 undefined 라고 나온다.
    console.log(obj.c);
    console.log(obj.d); 
    obj.d( ); // 실행문 쓰는 방법
    obj.e( );
    obj.f( );
}

{
    식별자는 개발자가 자바스크립트의 변수, 함수, 속성 등을 구별하려고 이름 붙인 특정 단어를 의미합니다.
    예를 들어 var name = promt("이름을 입력하세요."); 에서 처럼 프롬프트 창에 입력받은 사용자 이름을 name이라는 변수에 저장하는데, 
    여기에서 바로 name이 식별자입니다.
    식별자의 첫 글자는 반드시 영문자나 언더스코어(_), 또는 달러 기호($)로 시작해야 합니다.
    그 다음에는 영문자나 언더스코어, 달러 기호, 숫자를 작성할 수 있습니다. 
    두 단어 이상이 모여 하나의 식별자를 만들 경우 첫 번 째 단어는 소문자로 시작하고 
    두 번 째 단어는 대문자로 시작하는 것이 일반적입니다.
}
{
    예약어는 식별자로 사용할 수 없습니다. javaScript에서는 변수, 레이블, 또는 함수 이름으로 예약어를 사용할 수 없습니다.
    예약어는 키워드라고도 하는데, 식별자로 사용할 수 없도록 자바스크립트에서 미리 정해 놓은 단어를 가리킵니다.
    예를 들어 var는 변수를 선언할 때 쓰는 예약어이며 식별자 이름으로는 사용할 수 없습니다.
    기본 예약어로는, [abstract, arguments, boolean, break, byte, casr, catch, char, class, const, continue, debugger, default, delete, do,  
    double, else, enum, evel, export, extends, false, final, finally, float, import, inm instanceof, int, interface, let, long,  native, new, null, 
    package, private, protected, public, return, short, static, super, synchronized, this, throw, throws,  transient, true, try, typeof, var, void, volatile, 
    while, with, yield]가 있습니다.
}

{
    전치, 후치 연산자의 연산 과정
{    
    var score = 10;
    // ++score; // 전치 11
    // score++; // 후치 12
    // var result = ++score; // 11
    var result = score++; // 11

    console.log(result, score); // score++; 일 경우 result값은 먼저 나오기 때문에 10이고 score은 1이 더해진 11이다.
                                // ++score; 일 경우 result값과 score값 모두 11이다.
}
{
    let hap, j, k, l;
    j = k = l = 1;
    hap = ++j + k++  + ++l;

    console.log(hap); // 2 + 1 + 2 = 5
    console.log(j); // 2
    console.log(k); // 후치일 경우 우선 순위가 밀려서 계산할 때 안됨, k의 값을 구할 땐 k의 값인 2가 나옴
    console.log(l); // 2

    let sum = 0;

    for(let i=0; i<10; i++){
        sum += i
    }

    for(let i=10; i>0; i--){
        sum += i
    }
}
{
    let a = 1, b = 2, c = 3, result;
    result =  ++a + b++ + ++c;

    console.log(result); // 8
    console.log(a); // 2
    console.log(b); // 3
    console.log(c); // 4

    let x = 7, y = 7, result;

    result = x > y ? ++x : y--; 

    console.log(result); // 7 result에서 y--는 실행되지 않아서(우선 순위 밀림) 그대로 7값이 나옴
    console.log(x); // 7
    console.log(y); // 6 다른 우선 순위가 없으므로 --가 실행되어 7보다 1 작은 값인 6이 나옴

    let a, b, c, result;
    a = 20, b = 30, c = 30;

    result = a < b ? b++ : --c;

    console.log(result); // 30
    console.log(a); // 20
    console.log(b + c); // 31 + 30 = 61 --c는 실행되지 않음
    console.log(c); // 30
}
    비트연산자  

    비트 연산자는 피연산자를 10진수, 16진수, 8진수 숫자로 취급하지 않고, 대신 32개 비트의 집합으로 취급합니다. 
    예를 들어, 10진수 9는 2진수 1001로 나타냅니다. 비트 연산자는 이러한 이진법 표현에 대해 연산을 수행하지만, 
    반환할 땐 JavaScript 표준 숫자로 반환합니다.
    
    1: AND( & ) 연산
    
    AND 연산은 두 개의 숫자(값이)를 각 비트마다 AND 연산합니다. 
    AND 연산은 곱연산으로 두 비트가 모두 1일 경우에만 1를 반환하며, 
    두 비트 중 하나라도 0이라면 0를 반환합니다.

    2: OR( | ) 연산

    OR 연산은 두 개의 숫자를 각 비트마다 OR 연산합니다. 
    OR 연산은 합연산으로 두 비트 중  하나라도 1일 경우에는 1를 반환하며, 
    두 비트가 모두 0인 경우에만 0를 반환합니다.

    3: XOR( ^ ) 연산 - Exclusive OR

    두 비트의 값이 같은 경우 0를 반환하며, 두 비트값이 다른 경우에는 1를 반환합니다.
    참고로 두 값을 더한 뒤 mod(%) 2를 했을때의 값과 동일합니다.
}

{
    1. 형변환의 종류 : 

    String() //문자형으로 변환
    Number() //숫자형으로 변환
    Boolean() //참, 거짓형으로 변환

    2. 형변환이 필요한 이유 :
    문자열 + 문자열을 하면 문자열이 연결되어 결과값이 나타납니다.
    숫자 + 숫자를 하면 더하기 연산이 됩니다.
    그런데 문자열 + 숫자를 하면 의도치 않은 결과값이 나타날 수 있습니다.

    3. 형변환방법

    3-1. String()으로 형변환하는 방법 :
    console.log(
        String(3),
        String(true),
        String(false),
        String(null),
        String(undefined),
    );
    결과로는 3 true false null undefined 가 나옵니다.

    3-2. Number()로 형변환하는 방법 : 
    console.log(
        Number("3"),
        Number(true),
        Number(null),
        Number(undefined),
    );
    결과로는 3 1 0 0 NaN 이 나옵니다.

    3-3. Boolean()로 형변환하는 방법 : 
    Boolean 형변환 같은 경우 false가 되는 경우만 알아두면 됩니다.
    false가 되는 경우는 아래와 같으며 나머지는 true를 반환합니다.
    [0 "" null undefined NaN]
    console.log(
        Boolean(0),
        Boolean(''),
        Boolean(null),
        Boolean(undefined),
        Boolean(NaN),
    );
    
    typeof

    자바스크립트 typeof 연산자는 자바스크립트 자료형의 데이터 타입을 검사할 수 있습니다.    
    typeof 변수명 의 형태로 작성합니다. typeof 뒤에 한 칸을 띄우고 변수명을 입력하면, 들어있는 변수값의 자료형을 알 수 있습니다.

    자바스크립트 문자열 typeof 검사
    typeof 문자열 검사는 결과값이 string으로 나옵니다.
    따옴표 사이에 있는 숫자도 문자이기 때문에 string으로 결과값이 나옵니다.

    숫자형 typeof 검사
    typeof 숫자형 검사는 결과값이 number로 나옵니다. 양수, 음수, 소수 모두 숫자 데이터입니다.
    자바스크립트는 정수형, 실수형을 구분하지 않으므로 모두 number로 출력됩니다.

    논리형 typeof 검사
    typeof 논리형 검사 결과는 boolean으로 데이터 타입이 분류됩니다.

    Undefined형 typeof 검사
    typeof 검사시 Undefined형의 자료형 검사는 결과값이 undefined으로 나옵니다.

    Null형 typeof 검사
    null형 데이터는 object 객체로 분류됩니다. 따라서 typeof에서도 자료형은 객체형으로 출력됩니다.
    물론 변수값을 출력하면 null로 출력됩니다.
}