01. 변수 : 데이터 저장

데이터를 저장하는뎅 쓰이는 사회적 약속 이름을 변수라 칭하고 저장가능

{
    var x = 100;    //변수x에 숫자 100을 저장함
    var y = 200;    //변수y에 숫자 200을 저장함
    var z = "javascript";    //변수 z에 javascript을 저장함
    
    console.log(x)
    console.log(y)
    console.log(z)
}
결과 확인하기
100
200
javascript

02. 변수 : 데이터 저장 + 데이터 변경

데이터를 저장하는뎅 쓰이는 사회적 약속 이름을 가진 녀석은 변경이 가능

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

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

    console.log(x)
    console.log(y)
    console.log(z)
}
결과 확인하기
300
200
react

03. 변수 : 데이터 저장 + 데이터 변경 + 데이터 추가

데이터를 저장하는뎅 쓰이는 사회적 약속 이름을 가진 녀석은 메타몽같음

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

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

    console.log(x)
    console.log(y)
    console.log(z)
}
결과 확인하기
300
400
react

변수로 연산이 가능하다.

변수를 이용해서 연산이 가능하고, 연산에는 산술 연산자, 대입 연산자, 비교 연산자, 논리 연산자,비트 연산자, 삼항 연산자가 있음.

04. 상수 : 데이터 저장

데이터를 저장하는뎅 쓰지만 변경불가함

{
    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)
}
결과 확인하기
100
200
javascript

05. 상수 : 지역 변수 + 전역 변수(스코프)

블록 내부 & 외부에서 선언함에 따라 지역 & 전역 변수로 나뉜다 

{
    let x = 100; 
    let y = 200;
    //전역변수

    function func(){
        let x  = 300; 
        let y  = 400;
        //지역변수

        z = "javascript" 
        //전역변수취급 ... 문법상 틀림 
        // let z 를 함수안에 써서 지역으로 만들던 밖에서 써서 전역으로 할지 택1

        console.log(`함수안 x ${x}`);
        console.log(`함수안 y ${y}`);
        console.log(`함수안 z ${z}`);
        
    }
    func();
    
    console.log(`함수밖 x ${x}`);
    console.log(`함수밖 y ${y}`);
    console.log(`함수밖 z ${z}`);
}
결과 확인하기
함수안 x 300
함수안 y 400
함수안 z javascript
함수안 x 100
함수안 y 200
함수안 z javascript

😫기본 연산자 정리

변수 한번 연산해보겠습니다

{
    const a = 10000 ;
    const b = 20000 ;

    연산자
    console.log(a+b);    
    console.log(a-b);   
    console.log(a>b);   //논리연산자
    console.log(a*b);   
    console.log(a/b);   
    console.log(a%b);   //나머지값구하기

    let c = 10;     
    c = "100"       //숫자 10 >> 문자"100"
    c = 1000;       //숫자 1000으로
    c += 1000;      //1000이 더해져 2000이 되었습니다.
    console.log(c); 
}
결과 확인하기
30000
-10000
false
0.5
10000
2000

06. 배열 : 데이터 저장(여러개) : 표현방법1

Array()생성자를 명시하여 직접 저장

{
    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]);
}
결과 확인하기
100
200
javascript

06. 배열 : 데이터 저장(여러개) : 표현방법2

Array()생성자를 명시하여 저장2

{
    const arr = new Array(100, 200, "javascript");
            
    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);
}
결과 확인하기
100
200
javascript

07. 배열 : 데이터 저장(여러개) : 표현방법3

리터럴 표기법으로 배열생성 값 저장

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

    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);
}
결과 확인하기
100
200
javascript

08. 배열 : 데이터 저장(여러개) : 표현방법4

리터럴 표기법으로 배열생성과 값 저장

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

    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);
}
결과 확인하기
100
200
javascript

😫배열엔 키가 있을까?

🙂배열은 생성과 동시에 자동적으로 키값이 0, 1, 2, 3...생성됨
why? 원시 타입을 제외한 모든 데이터 타입(객체, 함수, 배열, 정규표현식 등)은 객체(Object)이므로 

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

    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);
}
결과 확인하기
100
200
javascript
키값을 직접 명시하진 않았으나 디폴트 키로 들어감

10. 객체 : 데이터 저장(키와값) : 표현방법1

Object()생성자를 선언후 숫자 키에 값을 입력

{
    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]);
}
결과 확인하기
100
200
javascript

11. 객체 : 데이터 저장(키와값) : 표현방법2

Object()생성자를 선언후 문자키에 값을 입력

{
    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);
}
결과 확인하기
100
200
javascript

12. 객체 : 데이터 저장(키와값) : 표현방법3

리터럴표기법으로 객체생성후 키값과 각값을 입력

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

    console.log(obj.a);
    console.log(obj.b);
    console.log(obj.c);
}
결과 확인하기
100
200
javascript

12. 객체 : 데이터 저장(키와값) : 표현방법4

리터럴표기법으로 객체생성후 키와 값을 입력

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

    console.log(obj.a);
    console.log(obj.b);
    console.log(obj.c);
}
결과 확인하기
100
200
javascript

13. 객체 : 데이터 저장(키와값) : 표현방법5

리터럴표기법으로 생성한 배열에 객체 키와 값을 입력

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

    console.log(obj[0].a);
    console.log(obj[0].b);
    console.log(obj[1].c);
}
결과 확인하기
100
200
javascript

14. 객체 : 데이터 저장(키와값) : 표현방법6

리터럴표기법으로 객체생성후 키와 값을 입력(배열&객체)

{
    const obj = {
        a: 100,
        b: [200, 300],
        c: {x:400, y:500},
        d: "javascript"
    }

    console.log(obj.a);
    console.log(obj.b[0], obj.b[1]);
    console.log(obj.c.x);
    console.log(obj.c.y);
    console.log(obj.d);
}
결과 확인하기
100
200 300
400
500
javascript

15. 객체 : 데이터 저장(키와값) : 표현방법7

생성한 상수를 리터럴표기법으로 객체에 키와 값을 입력

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

    const obj = {a, b, c};

    console.log(a, b , c);
    console.log(obj.a, obj.b , obj.c);
}
결과 확인하기
100 200 javascript
100 200 javascript

16. 객체 : 데이터 저장(키와값) : 표현방법8

리터럴표기법으로 객체생성후 키와 값을 입력(함수추가)

{
    const j = "javascript";
    const obj = {
        a: 100,
        b: [200,300],
        c: "javascript",
        d: function(){
            console.log("javascript가 실행됨!");
        },
        e: function(){
            console.log(j+"가 실행됨!!(변수+문자열)");
        },
        f: function(){
            console.log(this.c + "실행됨!!( this + 문자열)");
        }
    }

    console.log(obj.a);
    console.log(obj.b[0]);  
    console.log(obj.b[1]);  
    console.log(obj.b[2]);  //undefined
    console.log(obj.c);
    
    obj.d();
    obj.e();
    obj.f();
}
결과 확인하기
100
200
300
undefined
javascript
javascript가 실행됨!!(변수+문자열)
javascript가 실행됨!!실행됨!!( this + 문자열)

😫연산자 (전치, 후치)

연산전에 실행될지 연산후에 실행되는지 알아보자 !

{
    let x=7, y=7, result, result1;
    
    x = --x;
    result1 = --y;
    
    y = 7;
    //y값 초기화

    result =  y--;


    console.log(`result ${result} result1 ${result1}  x ${x}  y ${y}`);
    //                                7                   6             6           6
}
결과 확인하기
7 6 6 6

연산자의 우선순위는

변수 앞에 있을경우(--y) 해당 line의 값을 연산 전 --처리를 해준다

변수 뒤에 있을경우(y++) 해당 line의 값을 연산 후 ++처리를 해준다

😫형변환, typeof

변수 타입에 따라 반환하는 값이 다른 typeof와 형변환함수를 알아보자 

{
    Number("10");   // 숫자 10
    String(true);   // 문자열 "true"
    Boolean(0);     // 불리언 false
    Object(3);      // new Number(3)와 동일한 결과로 숫자 3
    
    typeof('')      // 해당''안에 들어간 타입을 리턴함
    
    parseInt("10"); // 문자10을 숫자10으로 변환
    Number(true);  // 숫자 1
    Number(false); // 숫자 0

    String(Date());        // Tue Mar 07 2023 18:46:49 GMT+0900 (한국 표준시)
    Date().toString();     // Tue Mar 07 2023 18:46:49 GMT+0900 (한국 표준시)
    let date = new Date(); // Date 객체 생성
    date.getFullYear();    // 2023 연도반환
    date.getMonth();       // 3 월 반환
    date.getDate();        // 7 기준일 (1~31)까지 반환
    date.getDay();         // 0~6 요일 반환 (0 일요일, 1 월요일..)
}

😫식별자, 예약자

자바스크립트에서 변수로 사용이 불가능한 것들이 있음 그것들을 알아보자

{
    //식별자는 변수(variable), 함수(function), 클래스(class) 등과 같이 이름이 주어진 독립체들을 의미한다.
    
    //식별자는 반드시 문자, 언더스코어(underscore, _), 달러 표시(dollar sign, $)으로 시작해야한다.
    valid const a = 'hello'; const _a = 'hello'; const $a = 'hello';
    
    //식별자의 이름은 숫자로 시작할 수 없다.
    const 1a = 'hello';
    
    //식별자는 대소문자를 구분한다.
    const y = 'hi'; const Y = 5; 
    console.log(y); // hi 
    console.log(Y); // 5
    
    예약어는 식별자의 이름이 될 수 없다.
    invalid const new = 5; // Error! new is a keyword

    //예약어(keyword)는 프로그래밍 언어에서 문법의 일종으로 미리 지정된 단어들이다.
    * await            * break            * case            * catch
    * const            * continue        * debugger        * default
    * delete        * do            * else            * enum
    * export        * extends        * false            * finally
    * for            * function        * if            * implements
    * in            * instanceof        * interface        * let
    * new            * null            * package        * private
    * protected        * public        * return        * super    
    * switch        * static        * this            * throw
    * try            * true            * typeof        * var
    * void            * while            * witch            * yeild    
}

😫연산자? no bit연산자

변수를 2진법으로 연산하는 부호를 알아보자 !

비트 연산자 설명
& 대응되는 비트가 모두 1이면 1을 반환함. (비트 AND 연산)
| 대응되는 비트 중에서 하나라도 1이면 1을 반환함. (비트 OR 연산)
^ 대응되는 비트가 서로 다르면 1을 반환함. (비트 XOR 연산)
~ 비트를 1이면 0으로, 0이면 1로 반전시킴. (비트 NOT 연산)
<< 지정한 수만큼 비트를 전부 왼쪽으로 이동시킴. (left shift 연산)
>> 부호를 유지하면서 지정한 수만큼 비트를 전부 오른쪽으로 이동시킴. (right shift 연산)
>>> 지정한 수만큼 비트를 전부 오른쪽으로 이동시키며, 새로운 비트는 전부 0이 됨.