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;
    z = "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;  // x = x + 300
    y += 400;
    z += "react";

    console.log(x);
    console.log(y);
    console.log(z);
}
결과 확인하기 400
600
javascriptreact

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

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

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

해당 함수 안에서만 값을 가지는 변수를 지역 변수라고 하고 전체에 선언된 변수를 전역 변수라고 합니다.

 //04. 변수 : 지역변수 + 전역변수
{
    let x = 100;    // 전역 변수
    let y = 200;    // 전역 변수
    
    function func(){
        let x = 300;    // 지역 변수
        let y = 400;    // 지역 변수

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

    console.log("함수밖"+x);
    console.log("함수밖"+y);
}
{
    let x = 100;    // 전역 변수
    let y = 200;    // 전역 변수

    function func(){
        x = 300;    // 전역 변수  let이 사라지면서 지역번수가 전역변수로 바뀌었다.
        let y = 400;    // 지역 변수
        z = "javascript" // 변수선언을 안해주었음에도 전역변수가 된다.
        console.log("함수안"+x);
        console.log("함수안"+y);
        console.log("함수안"+z);
    }
    func();

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

05. 상수 : 데이터 저장 O, 데이터 변경 X

상수는 데이터 저장은 가능하나 변경은 불가능 합니다.

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

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

부록 - 기본 연산자 정리

기본적인 연산자를 모아보았습니다.

{
    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 이였던 c 가 문자"100"이 되고 
    c = 1000;       //그 후에 다시 1000으로 바뀌고 1000에
    c += 1000;      //1000이 더해져 2000이 되었습니다.                    
    console.log(c);  
}
결과 확인하기 30000
-10000
false
0.5
10000
2000

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
javascript

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

배열은 데이터를 여러개 저장하는 방법 중 하나입니다.
한 줄로 만들고 반복되는 것을 줄인 버전 입니다.

{
    const arr = new Array(100, 200, "javascript")

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

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

배열은 데이터를 여러개 저장하는 방법 중 하나입니다.
new Array 가 빠져서 더욱 짧아진 버전입니다.

{
    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

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

배열은 데이터를 여러개 저장하는 방법 중 하나입니다.
new Array 가 빠진 것을 한 줄로 만들어 가장 짧아진 버전입니다.

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

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

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

객체는 데이터를 여러개 저장하는 방법 중 하나입니다.
각 데이터의 키와 값을 직접 지정할 수 있습니다.

{
    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

객체는 데이터를 여러개 저장하는 방법 중 하나입니다.
각 데이터의 키와 값을 직접 지정할 수 있습니다.
0,1,2라는 기본 키 대신 a,b,c,라는 직접 지정한 키를 주었습니다.

{
    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

객체는 데이터를 여러개 저장하는 방법 중 하나입니다.
각 데이터의 키와 값을 직접 지정할 수 있습니다.
new Object가 빠져서 짧아진 버전입니다.

{
    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

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

객체는 데이터를 여러개 저장하는 방법 중 하나입니다.
각 데이터의 키와 값을 직접 지정할 수 있습니다.
new Object가 빠진 것을 한 줄로 만들어 가장 짧아진 버전입니다.

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

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

08-1. 배열 : 데이터 저장(여러개) : 표현방법 복습

배열은 데이터를 여러개 저장하는 방법 중 하나입니다.

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

    x -=1000;
    x +=1000;

    console.log(x, y, z);
}
결과 확인하기 100
200
javascript

08-2. 배열 : 데이터 저장(여러개) : 표현방법2 복습

배열은 데이터를 여러개 저장하는 방법 중 하나입니다.
한 줄로 만들고 반복되는 것을 줄인 버전 입니다.

{
    const brr = new Array();
    const crr = new Array(200,"react", false);
    const drr = [];
    const err = [300, "arrat", 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]);
}
결과 확인하기 100 javascript true
200 react false
100 javascript true
300 arrat true

09-1. 객체 : 데이터 저장(키&값) : 표현방법1 복습

객체는 데이터를 여러개 저장하는 방법 중 하나입니다.
각 데이터의 키와 값을 직접 지정할 수 있습니다.
객체는 배열의 형식을 가져다 쓸 수 있습니다

{
    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

10-1. 객체 : 데이터 저장(키&값) : 표현방법2 복습

객체는 데이터를 여러개 저장하는 방법 중 하나입니다.
각 데이터의 키와 값을 직접 지정할 수 있습니다.
0,1,2라는 기본 키 대신 a,b,c,라는 직접 지정한 키를 주었습니다.

{
    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

11-1. 객체 : 데이터 저장(키&값) : 표현방법3 복습

객체는 데이터를 여러개 저장하는 방법 중 하나입니다.
각 데이터의 키와 값을 직접 지정할 수 있습니다.
new Object가 빠져서 짧아진 버전입니다.

{
    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-1. 객체 : 데이터 저장(키&값) : 표현방법4 복습

객체는 데이터를 여러개 저장하는 방법 중 하나입니다.
각 데이터의 키와 값을 직접 지정할 수 있습니다.
new Object가 빠진 것을 한 줄로 만들어 가장 짧아진 버전입니다.

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

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

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

객체는 데이터를 여러개 저장하는 방법 중 하나입니다.
각 데이터의 키와 값을 직접 지정할 수 있습니다.
배열 안에 객체를 넣어봤습니다

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

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

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

객체는 데이터를 여러개 저장하는 방법 중 하나입니다.
각 데이터의 키와 값을 직접 지정할 수 있습니다.
객체 안에 배열을 넣어봤습니다

{
    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.x);
    console.log(obj.c.y);
    console.log(obj.d);
}
결과 확인하기 100
200
300
400
500
javascript

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

객체는 데이터를 여러개 저장하는 방법 중 하나입니다.
각 데이터의 키와 값을 직접 지정할 수 있습니다.
변수를 객체 안에 키값으로 설정하여 키값을 생략했습니다.

{
    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. 객체 : 데이터 저장(키&값) : 표현방법8

객체는 데이터를 여러개 저장하는 방법 중 하나입니다.
각 데이터의 키와 값을 직접 지정할 수 있습니다.
함수를 사용해 보았습니다.

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

    console.log(obj.a);
    console.log(obj.b[0]);
    console.log(obj.b[1]);
    console.log(obj.c);
    console.log(obj.d); //이렇게 하면 문자가 써지는 것이 아니라 console로 인식되어 console창에 써짐
    obj.d();
    obj.e();
}
결과 확인하기 100
200
300
javascript가 실행되었습니다
javascript가 실행되었습니다

++전치 증감연산자와 후치 증감연산자/비트연산자

증감연산자에서 기호를 앞에 쓰는 것과 뒤에 쓰는 것은 연산 우선순위에서 차이가 있습니다.
전치증감연산자는 우선순위가 "="보다 높고 후치증감연산자는 낮습니다.

{
    let x = 7 , y = 7, result;
    result = x > y ? ++x : y--;

    console.log(result);
    console.log(x);
    console.log(y);
    //만약 삼항연산자가 아니고 if 문이면 x 는 8 이된다.
}
결과 확인하기

비트 수준에서 논리 연산을 수행하는 연산자입니다. 이러한 연산자는 정수형 데이터를 다루는 데 유용합니다.
기본적인 비트연산자는 AND(&), OR(|), XOR(^), NOT(~)등이 있습니다.

{
    let x = 5;
    let y = 21;

    document.write(x&y);
    document.write(x|y);
    document.write(x^y);
}
결과 확인하기

++식별자,예약자

식별자(identifier)는 변수나 함수의 이름을 작성할 때 사용하는 이름을 의미합니다.
예약자는 언어에서 특별한 의미를 가지는 단어로, 변수 또는 함수 이름으로 사용할 수 없습니다.

식별자 규칙
1. 키워드를 사용하면 안 된다.
2. 숫자로 시작하면 안 된다.
3. 특수 문자는 _와 $만 허용된다.
4. 공백 문자를 포함할 수 없다.

// 예시
// 유효한 식별자
var myVariable;
var my_function_name;
var $myObject;
var _myObject;
var π = 3.14;

// 유효하지 않은 식별자
var 123myVariable; // 숫자로 시작해서는 안됨
var my-variable; // 하이픈(-)을 사용해서는 안됨
var if = 10; // 예약어를 사용해서는 안됨

예약어 목록입니다.
abstract, arguments, 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

++형변환, typeof

형변환은 값의 타입을 다른 타입으로 변환하는 것을 말합니다.
typeof 연산자는 주어진 값의 타입을 문자열로 반환합니다.
자바스크립트에서는 형변환이 자주 일어나며, 그것을 확인하기 위해 typeof를 자주사용합니다.

//암시적 형변환
let num = 10;
let str = "20";
let result = num + str; // "1020"

//명시적 형변환
let str = "123";
let num = Number(str); // 123
let bool = Boolean(str); // true

//typeof
console.log(typeof 123); // "number"
console.log(typeof "hello"); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object"
console.log(typeof []); // "object"
console.log(typeof {}); // "object"
console.log(typeof function() {}); // "function"