javascript

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);
}

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);
}

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

데이터를 저장 후 x,y는 덧셈을 합니다. 문자 z는 문자끼리 더해져 javascriptreact가 됩니다.

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

    x += 300; // x = x + 300
    y += 400; 
    z += "react";
    // let x = "100" + 300; --- 100300 

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

03. 상수 : 데이터 저장(O) + 데이터 변경(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(z);
}

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

지역변수(Local Variables)는 특정 함수나 블록 내에서 선언되어 사용되는 변수를 말합니다. 지역변수는 해당 함수나 블록 내에서만 유효하며, 함수나 블록이 실행을 마치면 소멸됩니다. 따라서 다른 함수나 블록에서는 해당 변수에 접근할 수 없습니다. 전역변수(Global Variables)는 함수나 블록 외부에서 선언되어 사용되는 변수를 말합니다. 전역변수는 프로그램 전체에서 사용 가능하며, 여러 함수나 블록에서 공유하여 사용할 수 있습니다.

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



    function func(){
        let x = 300; //지역 변수
        let y = 400; //지역 변수
        c = 1000;    //전역 변수
        z = "javascript"; //전역 변수(z를 선언한적 없는데 작동 함.),(비추천)

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

    console.log("함수밖 : " + x); 
    console.log("함수밖 : " + y); //200
    console.log("함수밖 : " + z); //javascript
}

01~04까지 정리 : 상수 + 변수 : 데이터 저장 + 데이터 변경 + 데이터 연산

상수를 선언하여 데이터를 선언하고. 상수로 데이터 연산을 시작합니다. 변수 c를 선언하여 데이터를 변경 합니다.

{
    const a = 10000;
    const b = 20000;
    
    console.log(a);     
    console.log(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";
    c = 1000;
    c += 1000;
    console.log(c);    
}

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

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

{
    const x = 100;
    const y = 200;
    const z = "javascript";
    
    x = 300;
    y = 400;
    z = "react";

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

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

배열을 new로 선언하여 배열 인덱스에 저장 후 호출 중입니다.

{
    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]); 
}

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

배열을 new로 선언하여 데이터를 저장하여 호출 중입니다.

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

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

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

배열을 []로 생성하여 배열 인덱스에 데이터를 저장 후 호출 중입니다.

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

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

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

배열을 []로 생성하여 데이터를 저장 후 호출 중입니다.

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

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

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

객체를 new로 생성 후 객체 인덱스 번호에 저장하여 데이터를 호출 중입니다.

{
    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]); 
}
                        

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

객체를 new로 생성 후 명칭을 할당하여 데이터를 저장 및 호출합니다.

{
    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); 
}

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

객체obj를 생성하고. 객체에 이름을 부여하여 데이터를 저장 후 출력을 하고 있습니다.

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

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

객체를 {}로 생성하여 데이터를 저장 후 데이터를 호출 중입니다.

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

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

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

배열 안에 객체를 저장하는 방법입니다.

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

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

03번 정리 - 변수 : 데이터 변경 + 산술 연산자

변수로 데이터를 선언 후 저장시키고. 변수 x에 저장된 값을 더하기 하고. 값을 저장 시킨 뒤 뺼셈을 하여 데이터를 저장했습니다.

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

    x -= 1000;
    x += 1000;

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

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

배열을 생성하여 객체를 할당하고 인덱스 번호로 객체를 호출 중 입니다.

{
   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]);
}

12번 객체 복습 : 데이터 저장(키와 값) : 표현방법1 복습

배열을 생성하여 객체를 할당하고 인덱스 번호로 객체를 호출 중 입니다.

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

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

12번 객체 복습2 : 데이터 저장(키와 값) : 표현방법2 복습

객체obj를 new로 생성하고. 객체에 이름을 부여하여 데이터를 저장 후 호출합니다.

{
    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);
}

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

객체obj를 {} 중괄호 형식으로 생성하고. 객체에 이름을 부여하여 데이터를 저장 후 호출합니다.

{
    const obj = {};

    obj.a = 100;
    obj.b = 200;
    obj.c = "javascript";

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

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

객체obj를 {} 중괄호 형식으로 생성하고. {}안에 데이터를 저장 후 호출합니다.

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

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

12번 객체 복습5 : 데이터 저장(키와 값) : 표현방법5 복습

객체obj를 {} 중괄호 형식으로 생성하고. {}안에 데이터를 저장 후 호출합니다.

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

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

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);
}

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

상수를 선언하고 객체obj에 할당하여 호출 중입니다.

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

    const obj = {a,b,c};

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

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

객체 안에서 함수를 선언하고 함수를 호출 중입니다.

{
    const j = "javascript";

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

    console.log(obj.a);
    console.log(obj.b[0]);
    console.log(obj.b[1]);
    console.log(obj.b[2]);  //undefind
    console.log(obj.c);
    console.log(obj.d); //(X)
    obj.d();
    obj.e();
    obj.f();
}   

++연산자(전치)

++ 연산자는 변수 앞에 붙이거나 뒤에 붙일 수 있습니다. 변수 앞에 붙이면 값을 1 증가시킨 후에 해당 변수의 값을 반환하고, 변수 뒤에 붙이면 해당 변수의 값을 반환한 후에 값을 1 증가시킵니다.

{
    var score = 10;
    ++score; 
    var result = ++score; 
    
    console.log(result, score); 
    
    score++; 
    var result = score++; //result=10, score=11
}   

++연산자(후치)

-- 연산자도 선연산자와 마찬가지로 변수 앞에 붙이거나 뒤에 붙일 수 있습니다. 변수 앞에 붙이면 값을 1 감소시킨 후에 해당 변수의 값을 반환하고, 변수 뒤에 붙이면 해당 변수의 값을 반환한 후에 값을 1 감소시킵니다.

{
    var score = 10; 
    var result = score++; 
    
    console.log(result, score); 
}   

선연산자, 후연산자 예제1

선연산자와 후연산자를 활용한 예제입니다.

{
    let hap, j, k, l;
    j = k = l = 1;
    hap = ++j + k++ + ++l;

    console.log(hap); 
    console.log(j); 
    console.log(k); 
    console.log(l); 
}

선연산자, 후연산자 예제2

선연산자와 후연산자를 활용한 예제입니다.

{
    let sum = 0;

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

선연산자, 후연산자 예제3

선연산자와 후연산자를 활용한 예제입니다.

{
    let a=1, b=2, c=3, result;
    result = ++a + b++ + ++c;
    
    console.log(result); 
    console.log(a); 
    console.log(b); 
    console.log(c); 
}

선연산자, 후연산자 예제4

선연산자와 후연산자를 활용한 예제입니다.

{
    let x=7, y=7, result;

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

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

선연산자, 후연산자 예제5

선연산자와 후연산자를 활용한 예제입니다.

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

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

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

typeof 설명

숫자형, 문자형 데이터를 typeof로 확인하는 예제입니다.

{
    let x = 100, y=200, z;
    const func = function() {};

    document.write(x);
    document.write(typeof(x));
    document.write(y);

    y="200";
    document.write(typeof(y));

    x=500;
    document.write(typeof(x));

    document.write(z);
    document.write(typeof(z));
    document.write(func);
    document.write(typeof(func));
}