javascript

00. 자료형 정리

자바스크립트(JavaScript)는 동적 타입 언어이기 때문에 자료형을 정의하지 않습니다.

{
    var num = 23;                   // number
    var str = "23";                 // string
    var bool1 = true;               // boolean : true
    var bool2 = false;              // boolean : false
    var null1 = null;               // null
    var undifind1 = undifind;       // undifind
    var arr = [100, 200];           // Array
    var obj = {a: 100, b: 200};     // Object
    var func = function(){};        // Function
}

01. 변수 : 데이터 저장소

자바스크립트(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);
}

var: 과거에 사용되던 변수 선언 방식으로, 현재는 잘 사용하지 않습니다.

02. 변수 : 데이터 변경

자바스크립트(JavaScript)에서 데이터를 변경하는 방법은 다양합니다.

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

    x = 300;             // 변수 x에 값을 숫자 300으로 변경
    y = 400;             // 변수 y에 값을 숫자 400으로 변경
    z = 'jquery';        // 변수 javascript에 값을 문자 jquery로 변경

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

변수의 값을 변경하려면 기존 변수에 새 값을 할당하면 됩니다.

03. 변수 : 데이터 추가

자바스크립트(JavaScript)의 변수에서 데이터를 추가하는 방법은 여러 가지가 있을 수 있습니다.

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

    x += 100;       // x = x + 100;
    y += 100;       // y = y + 100;
    z += "jquery"   // z = z + "jquery";

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

변수의 값을 추가하려면 연산자를 통해 기존 변수에 새 값을 추가하면 됩니다.

04. 변수 : 지역변수/ 전역변수

변수는 크게 지역변수와 전역변수로 나뉩니다.

{
    let x = 200;                // 전역변수
    function func() {
        let x = 100;
        console.log(x);         // 지역변수
    }
    console.log(x);
}

밖에서 선언되는 변수를 전역, 안에서 선언되는 변수를 지역변수라 합니다.
둘은 같은 이름으로 정의할 수 있지만 다른 값을 가집니다.

05. 변수 : 형변환 (암시적)

자바스크립트(JavaScript)자바스크립트는 동적으로 타입을 변환하는 기능을 제공합니다. 이를 형변환이라고 합니다. .

{
    let x = 100;
    console.log( typeof x);
    console.log( typeof (x+"0"));
    console.log( typeof (x-"0"));
}

암시적 형변환의 예로는, 문자와 숫자의 변환간 "0"을 더해주거나 빼줌으로 확인할 수 있습니다.

06. 변수 : 형변환 (명시적)

자바스크립트(JavaScript)자바스크립트는 동적으로 타입을 변환하는 기능을 제공합니다. 이를 형변환이라고 합니다. .

{
    let num = 42;
    let strNum = String(num);
    console.log(typeof strNum);

    let str = "3.14";
    let numStr = Number(str);
    console.log(typeof numStr);

    let num = 0;
    let boolValue = Boolean(num);
    console.log(typeof boolValue);

    let strNum = "42.5";
    let intNum = parseInt(strNum); // intNum은 42 (소수점 이하는 버려짐)
    let floatNum = parseFloat(strNum); // 소수점까지 반환 
    console.log(typeof intNum);
    console.log(typeof floatNum);

    // 해당 형 변환자는 var 사용시 에러가 뜸 
}

개발자가 의도적으로 값을 특정 타입으로 변환하는 것을 명시적 형변환이라고 합니다.

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

자바스크립트(JavaScript)의 상수는 선언 이후 값을 변경할 수 없습니다.

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

    x = 200;  //TypeEroor: Assignment to constant variable.

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

값을 할당한 이후 상수의 값을 변경을 시도하면 TypeEroor가 발생한다.

08. 배열 : 데이터 저장(여러개) : 표현방식1(배열 선언)

자바스크립트(JavaScript)의 배열을 선언하는데는 여러 가지 방법 있습니다.

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

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

함수 선언 이후 할당하는 방법이 있습니다.

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

자바스크립트(JavaScript)에서 배열을 선언하는데는 여러 가지 방법 있습니다.

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

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

함수의 선언과 동시에 값을 할당하는 방법이 있습니다.

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

자바스크립트(JavaScript)에서 배열을 선언하는데는 여러 가지 방법 있습니다.

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

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

함수 선언은 생략하고, 따로 할당을 하는 방법이 있습니다.

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

자바스크립트(JavaScript)에서 배열을 선언하는데는 여러 가지 방법 있습니다.

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

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

함수 선언을 생략하고 바로 값을 할당하는 방법입니다.

12. 배열 : 데이터 저장(여러개) : 표현방식5 : 2차원 배열

자바스크립트(JavaScript)에서 배열을 선언하는데는 여러 가지 방법 있습니다.

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

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

.

13. 배열 : 데이터 저장(여러개) : 표현방식6 : 배열 구조 분해 할당

자바스크립트(JavaScript)에서 배열의 데이터를 전달할 때 사용됩니다..

{
    const arr = [100, 200, 300];

    const [a, b, c] = arr;
    console.log(a);
    console.log(b);
    console.log(c);           
}

배열의 데이터 전체가 아닌 일부만 필요한 경우,
배열을 변수로 '분해'할 수 있게 해주는 문법입니다.

14. 배열 : 데이터 저장(여러개) : 표현방식6 : 스프레드 연산자

자바스크립트(JavaScript)에서 마침표 3개를 통해 코딩 방식을 개선해주는 연산자입니다.

{
    const arr1 = [200, 300, 400];
    const arr2 = [300, 400, "jquery"];
    const arr3 = [...arr1, 500];

    console.log(arr1);              
    console.log(...arr1);              
    console.log(...arr1, ...arr2);              
    console.log(...arr3);              
}

복잡한 객체 나열을 단순화하거나 객체의 병합
그리고 함수의 인자 처리를 아주 단순하게 처리할 수 있도록 개선해줍니다.

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

자바스크립트(JavaScript)에서 객체를 선언 후 데이터를 할당하는 방식입니다.

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

데이터를 입력할 때 배열 방식도 적용됩니다.

16. 객체 : 데이터 추가 (키와값) : 표현방법2

자바스크립트(JavaScript)에서 객체 선언 후 데이터를 할당하는 방식입니다.

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

객체를 선언하고 데이터를 할당하는 방식입니다.

17. 객체 : 데이터 추가 (키와값) : 표현방법3

자바스크립트(JavaScript)에서 객체를 선언 후 데이터를 할당하는 방식입니다.

{
    const obj = {};

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

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

객체 약식 선언 후 데이터 할당하는 방식입니다.

18. 객체 : 데이터 추가 (키와값) : 표현방법4

자바스크립트(JavaScript)에서 객체를 선언 후 데이터를 할당하는 방식입니다.

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

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

객체 약식 선언 동시 데이터를 할당합니다.

19. 객체 : 데이터 추가 (키와값) : 표현방법5

자바스크립트(JavaScript)에서 객체를 선언 후 데이터를 할당하는 방식입니다.

{
    const obj = [
                {a: 100, b: 200, c: "javascript"}
    ];
    console.log(obj[0].a);

    const obj1 = [
        {a: 100, b: 200, c: "javascript"},
        {a: 300, b: 400, c: "jquery"}
    ];
    console.log(obj1);
    console.log(obj1[0].a);
    console.log(obj1[0].b);
    console.log(obj1[0].c);
    console.log(obj1[1].a);
    console.log(obj1[1].b);
    console.log(obj1[1].c);
}

배열안에서 객체를 선언하는 방식입니다.

20. 객체 : 데이터 추가 (키와값) : 표현방법6

자바스크립트(JavaScript)에서 객체를 선언 후 데이터를 할당하는 방식입니다.

{
    const obj = { 
        a: [100, 200],
        b: [300, 400],
        c:"javascript",
        d:"jQuery"
    }
    
    console.log(obj.a[0]);
    console.log(obj.a[1]);
    console.log(obj.b[0]);
    console.log(obj.b[1]);
    console.log(obj.c);
    console.log(obj.d);
}

객체 안에 배열을 선언하는 방식입니다.

21. 객체 : 데이터 추가 (키와값) : 표현방법7

자바스크립트(JavaScript)에서 객체를 선언 후 데이터를 할당하는 방식입니다.

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

객체 안에 객체를 생성하는 방식입니다.

22. 객체 : 데이터 추가 (키와값) : 표현방법8

자바스크립트(JavaScript)에서 객체를 선언 후 데이터를 할당하는 방식입니다.

{
    const obj = {
        a: 100,
        b: [200, 300],
        c: [x:400, y:500],
        d: "javascript";
        e: function(){
            console.log("javascript");
        }
        f: function(){
            console.log(obj.d);
        }
        g: function(){
            console.log(this.d);
        }
    }
    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);
    obj.e();                
    obj.f();                
    obj.g();                
}

객체 안에 함수를 넣는 방식입니다.

23. 객체 : 데이터 추가 (키와값) : 표현방법9

객체 구조 분해 할당은 객체의 데이터를 전달할 때 사용됩니다.

{   
    const abc2 = {
    a: 100, 
    b: {x: 200, y: 300},
    c: "javascript",
    }
    const {a, b:{x, y}, c} = abc2;

    console.log(a);
    console.log(x);
    console.log(y);
    console.log(c);
    // 구조 분해 할당에서 새로이 할당하는 변수는 전역변수로 인식된다,
    // 따라서 같은 script안에서 같은 이름의 변수로 정의할 수 없다.
}

객체의 데이터 전체가 아닌 일부만 필요한 경우,
객체의 데이터를 변수로 '분해'할 수 있게 해주는 문법입니다.

24. 객체 : 데이터 추가 (키와값) : 표현방법10

자바스크립트(JavaScript)에서 펼침연산자는 마침표 3개를 통해 코딩 방식을 개선해주는 연산자입니다.

{
    const obj1 = {a: 100, b: 200, c: "javascript"};
    const obj2 = {...obj1, d: "java"};
    const obj3 = {...obj1, ...obj2};

    console.log(obj3);
}

복잡한 객체 나열을 단순화하거나 객체의 병합
그리고 함수의 인자 처리를 아주 단순하게 처리할 수 있도록 개선해줍니다.

25. 산술 연산자

자바스크립트(JavaScript)는 다양한 종류의 연산자를 제공하여 변수와 값들을 조작하고 계산할 수 있게 해줍니다.

{
    let a = 10;
    let b = 5;

    console.log(a+b);
    console.log(a-b);
    console.log(a*b);
    console.log(a/b);
    console.log(a%b);
}

산술 연산자, +(더하기), -(빼기), *(곱하기), /(나누기), %(나머지)가 있습니다.

26. 문자 결합 연산자

자바스크립트(JavaScript)는 다양한 종류의 연산자를 제공하여 변수와 값들을 조작하고 계산할 수 있게 해줍니다.

{
    var t1 = "javascript";
    var t2 = "jquery";
    var t3 = 97979;
    
    var result = t1 + t2 + t3;
    console.log(result);
}

더하기 연산자를 통해 문자를 결합합니다.

27. 대입 연산자

자바스크립트(JavaScript)는 다양한 종류의 연산자를 제공하여 변수와 값들을 조작하고 계산할 수 있게 해줍니다.

{
    let num = 10;
    let num2 = 3;

    num += num2;
    console.log(num);
    num -= num2;
    console.log(num);
    num *= num2;
    console.log(num);
    num /= num2;
    console.log(num);
    num %= num2;
    console.log(num); 
}

연산된 데이터를 변수에 저장할 때 사용합니다.
복합 대입 연산자(+=, -=, *=, /=, %=)는 산술 연산자와 대입 연산자가 복합적으로 적용된 것을 말합니다.

28. 증감 연산자

증감 연산자에는 숫자형 데이터를 1씩 증가시키는 증가 연산자(++)와 반대로 1씩 감소시키는 감소 연산자(--)가 있습니다.

{
    let num = 10;
    num++;
    console.log(num)
    num--;
    console.log(num)
}

숫자형 변수에 ++을 사용해 값을 1씩 증가시키거나, --를 사용해 값을 1씩 감소시킬 수 있습니다.

29. 비교 연산자

자바스크립트(JavaScript)는 다양한 종류의 연산자를 제공하여 변수와 값들을 조작하고 계산할 수 있게 해줍니다.

{
    let a = 10;
    let b = 5;
    let c = 15;

    let result;
    result = a> b;
    console.log(result);
    result = a < b;
    console.log(result);
    result = a<=b;
    console.log(result);
    result = b==a;
    console.log(result);
    result = a != b;
    console.log(result);
    result = b===a;
    console.log(result);
}

두 데이터를 '크다, 작다, 같다'와 같이 비교할 때 사용하는 연산자입니다.

30. 논리 연산자

자바스크립트(JavaScript)는 다양한 종류의 연산자를 제공하여 변수와 값들을 조작하고 계산할 수 있게 해줍니다.

 {
    let a = 10;
    let b = 5;
    let c = 15;

    let result;

    result = a > b || c < b;
    console.log(result);
    result = a > b && c < b;
    console.log(result);
}

논리 연산자에는 ||(or), &&(and), !(not)이 있으며 true, false로 값을 반환합니다.

31. 연산자 우선순위

자바스크립트(JavaScript)는 다양한 종류의 연산자를 제공하여 변수와 값들을 조작하고 계산할 수 있게 해줍니다.

{
    1. 단항 연산자 (--, ++, !)
    2. 산술 연산자(*, /, %, +, -)
    3. 비교 연산자 (>, >=, <, <= ==, ===, !==, !=)
    4. 논리 연산자 (&&, ||)
    5. 대입 연산자(=, +=, -=, *=, /=, %=)
}

일반적인 산수를 연산할 때처럼 연산자에도 우선순위가 있습니다.

32. 삼항 조건 연산자

자바스크립트(JavaScript)는 다양한 종류의 연산자를 제공하여 변수와 값들을 조작하고 계산할 수 있게 해줍니다.

{
    let a = 10;
    let b = 5;
    let result = a> b ? "javascript" : "hi";
    conosle.log(result);
}

삼항 조건 연산자는 연산한 결과 조건식의 만족 여부에 따라 실행하는 코드를 다르게 실행하고자 할 때 사용합니다.

33. 비트 연산자

자바스크립트(JavaScript)에는 비트 연산을 수행하는 다양한 비트 연산자가 있습니다.

{
    let result1 = 5 & 3; 

    // 이진수 0101 & 0011 => 0001 
    // 두 개의 비트가 모두 1인 경우에만 결과 비트가 1이 된다.
    
    let result2 = 5 | 3; 

    // 이진수 0101 | 0011 => 0111 
    // 두 개의 비트 중 하나 이상이 1인 경우 결과 비트가 1, 둘 다 0인 경우 0이 된다. 

    let result3 = 5 ^ 3; 
    // 이진수 0101 ^ 0011 => 0110
    // 두 개의 비트가 서로 다를 경우에만 결과 비트가 1이 되고, 같은 경우 0이 된다. 

    let result4 = ~5; 
    // 이진수 ~0101 => 1010
    // 비트를 반전시킨다. 1은 0으로, 0은 1로 변환한다.
    
    let result5 = 5 << 1; 
    // 이진수 0101 << 1 => 1010
    // 숫자의 비트를 왼쪽으로 지정된 수 만큼 이동시킵니다.
    // 오른쪽에 새로운 비트가 추가되며, 왼쪽에 있는 비트는 사라집니다.

    let result6 = 5 >> 1; 
    // 이진수 0101 >> 1 => 0010
    // 숫자의 비트를 오른쪽으로 지정된 수 만큼 이동시킵니다. 
    // 왼족에 새로운 비트가 추가되거나, 오른쪽에서 비트가 사라집니다. 

    console.log(result1);
    console.log(result2);
    console.log(result3);
    console.log(result4);
    console.log(result5);
    console.log(result6);
}

이 연산자들은 숫자의 이진 표현을 사용하여 비트 수준에서 작업을 수행합니다.

34. 파일 : 데이터 교환 (JSON)

{
    const jsonString = '{"name": "webs", "age": "30"}';
    const jsonObjsect = JSON.parse(jsonStirng);
    console.log(jsonObjsect.name);

    const person = {name: "webs", age: 30};
    const jsonPerson = JSON.stringfy(person);
    console.log(jsonPerson);
}

.