1. 변수 : 데이터 저장

변수는 데이터를 저장소입니다.

{
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

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

변수는 데이터를 저장 할수도 있지만 변경도 가능하다.

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

    x = 300;
    y = 200;
    z = "react";
}  
출력법
console.log(x);
console.log(y);
console.log(z);
결과 확인하기

300
200
react

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

변수는 데이터를 저장하고, 변경하고, 추가할 수 있습니다.

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

    x += 300; // x = x + 300; 
    y += 400;
    z += "react";
}
결과 확인하기
console.log(y);
console.log(z);
console.log(x);

400
600
javascriptreact

연산자 : 변수로 연산이 가능하다.

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

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

지역 변수는 정의된 함수 내에서만 사용할 수 있는 변수이며 전역변수는 함수 밖과 안, 어디서나 자유롭게 접근할 수 있는 변수입니다.

{
    let x = 100;    //변수 x값에 100저장, 전역 변수
    let y = 200;    //변수 y값에 200저장, 전역 변수
    
    function func(){
        let x = 300;    //지역변수 변수가 중복 되기 때문에 에러가 나야하지만 나지 않는다. 지역 변수
        let y = 400;    //지역변수 변수가 중복 되기 때문에 에러가 나야하지만 나지 않는다. 지역 변수

        x = 300;        // let이 없을 때는 전역 변수. 전역 변수가 100에서 300으로 바뀌었다. 변수에는 데이터 변경기능이 있기 때문에.
        z = "javascript" // 상단에 선언 하지도 않았고 함수 내부에도 없음에도 전역 변수로 출력된다. 자바스크립트내에서 판단. 원래는 틀린 문법.

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

    console.log("함수밖"+x);
    console.log("함수밖"+y);
    console.log("함수밖"+z);
}
결과 확인하기

05. 상수 : 데이터 저장 + 데이터 변경(x)

상수는 데이터 저장은 가능하나 변경은 불가능합니다. 상수(const)는 이미 선언한 상수에 대해 중복 선언이 불가능하며 상수의 값을 재지정할 수도 없습니다.

{
    const x = 100;
    const y = 200;
    const z = "javascript";
    
    x = 300; 
    y = 400;
    z = "react";
}               
결과 확인하기
console.log(X);
console.log(y);
console.log(x);

//Assignment to constant variable.
//Assignment to constant variable.
//Assignment to constant variable.

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

여러개의 데이터를 하나의 변수에 저장하기 위한 배열이다.

{
    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
javascriptreact

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

ex)const arr = new Array (값,값,값)으로 표현하는 방식

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

100
200
javascriptreact

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

ex)const arr = [];를 작성 후 밑에 값을 차례로 나열하는 방식으로 약식이다.

{
    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
javascriptreact

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

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

100
200
javascriptreact

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

여러개의 데이터를 하나의 변수에 저장하고 ( const obj = new 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
javascriptreact

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

ex ) obj.키 = 값

{
    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
javascriptreact

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

const obj = {}; 약식으로 표현한 뒤 다음 줄에 키와 값을 나열한다.

{
    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
javascriptreact

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

const obj = {키:값, 키:값, 키:값) / * 객체의 기본형은 ' 객체명 : {키:값}이다.

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

100
200
javascriptreact

14. 객체 : 데이터 저장 (키와 값)

변배열안에 객체가 있는 방식이다. 배열을 먼저 작성 첫번째 줄이 0 두번째 줄이 1이므로 clg에서 0 0 1로 작성. 출력 : console.log(obj[배열],객체);

{
    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

15. 객체 : 데이터 저장 (키와 값)

객체 안에 배열이 있는 방법이다.
출력방식
console.log(obj.객체);
console.log(obj.객체[배열];
console.log(obj.객체.객체

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

16. 객체 : 데이터 저장 (키와 값)

객체 안에 키값에 변수를 저장시킨 것이다. / a 대신에 변수를 넣어준 것이지만 키값이 생략된 것

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

    const obj = {a, b, c};

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

17. 객체 : 데이터 저장 (키와 값)

변수 안에 함수(function)가 들어갈 수 있다. 객체 안에는 실행문이 들어갈 수 있다. / 실행문에는 console.log를 적지않는다.
const obj = {키: function(){console.log(값);}; / 출력 : obj.키();

{
    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 + "가 실행되었습니다.");
        }
    }

    console.log(obj.a);
    console.log(obj.b[0]);
    console.log(obj.b[1]);
    console.log(obj.b[2]);
    console.log(obj.c);
    console.log(obj.d);
    obj.d();
    obj.e();
    obj.f();
}
결과 확인하기
100
200
300
indefined
javascript
X
javascipt가 실행되었습니다.
javascipt가 실행되었습니다.
javascipt가 실행되었습니다.

++ 식별자, 예약자

식별자는 변수, 함수, 클래스 등의 이름을 지정할 때 사용하는 단어나 구를 말합니다.( 이름이 주어진 독립체 )
자바스크립트 언어 자체에서 사용되는 키워드로, 변수 이름이나 함수 이름으로 사용할 수 없습니다.

{
식별자 규칙
1. 식별자는 반드시 문자로 시작해야 합니다.
2. 식별자는 문자, 숫자, 밑줄(_) 혹은 달러 기호($)로 구성됩니다.
3. 식별자는 예약어(reserved word)를 사용해서는 안 됩니다.
4. 식별자는 대소문자를 구분합니다.

에약자 
abstract, arguments, await, boolean, break, byte, case, catch, char, class, 
const, continue, debugger, default, delete, do, double, else, enum, eval, export, 
extends, false, final, finally, float, for, function, goto, if, implements, import, 
in, instanceof, int, interface, let, long, native, new, null, package, private, 
protected, public, return, short, static, super, switch, 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++;       
// 우선단위적용으로 인해 result가 먼저 연산되고 score++가 연산된다. 

console.log(result, score);
}
결과 확인하기
10, 11

++ 비트 연산자

비트 연산자는 비트(bit) 단위로 논리 연산을 할 때 사용하는 연산자입니다

참고 : https://popidea77.tistory.com/36

비트 연산자 종류
& (AND연산자) : 대응되는 비트가 모두 1이면 1을 반환하며 나머지는 0이 됩니다.
| (OR연산자) : 대응되는 비트 중에서 하나라도 1이면 1을 반환하며 나머지는 0이 됩니다.
~ (NOT연산자) : 비트를 1이면 0으로, 0이면 1로 반전시킵니다.
^ (XOR연산자) : 대응되는 비트가 서로 다르면 1을 반환하며 같으면 0이 됩니다.
<< : 지정한 수만큼 비트들을 전부 왼쪽으로 이동시킴.
>> : 부호를 유지하면서 지정한 수만큼 비트를 전부 오른쪽으로 이동시킴.

++ 형변화, typeof( )

++ 연산자는 피연산자의 값을 1 증가시키는 증가 연산자입니다.
typeof 연산자는 피연산자의 데이터 타입을 문자열로 반환합니다.



결과 확인하기
++. 연산자
{
    const a = 20000;
    const b = 40000;

    console.log(a + b)
    console.log(a - b)
    console.log(a > b)
    console.log(a * b)
    console.log(a / b)
    console.log(a % b)
}
결과 확인하기

60000
-20000
false
800000000
0.5
20000