javascript

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";   // 변수 z에 값을 문자 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. 상수 : 데이터 저장 + 데이터 변경(X)

변수를 선언하고 값을 출력하는 간단한 예제이다.

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

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

const 키워드를 사용하여 세개의 변수 x, y, z를 선언하고 console.log로 변수 값을 출력한다.

05. 배열 : 데이터 저장(여러개) : 표현방법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]);
}

const arr = new Array(); 빈 배열을 생성
arr[0], arr[1], arr[2] 각 배열의 요소 값을 각각 할당
console.log를 사용하여 배열의 각 요소를 출력

06. 배열 : 데이터 저장(여러개) : 표현방법2 : 배열 선언과 동시에 초깃값 설정

배열을 생성하고 값을 할당하며, 배열의 각 요소를 출력하는 예제이다.

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

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

}

const arr = new Array(100, 200, "javascript"); 배열을 생성하면서 요소에 값을 할당
console.log 배열의 각 요소를 출력

07. 배열 : 데이터 저장(여러개) : 표현방법3 : 리터럴 방식으로 배열 선언

빈 배열 arr을 생성하고, 배열의 각 요소에 값을 할당한 다음 각 요소를 콘솔에 출력하는 예제이다.

{
const arr=[];

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

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

const arr = []; 빈 배열 arr을 생성한다.
각 요소에 100, 200, "javascript"를 할당한다.
console.log(arr[]); 각 요소에 할당된 값을 출력한다.

08. 배열 : 데이터 저장(여러개) : 표현방법4 : [](리터럴) 방식으로 배열 선언과 동시에 초기값 설정

자바스크립트에서 배열은 여러 개의 값을 순서대로 저장하는 데이터 구조입니다. 배열은 하나의 변수에 여러 값을 저장하거나 관리할 때 사용됩니다. 배열은 [ ] 괄호 내에 값들을 쉼표로 구분하여 나열하여 생성하며, 각 값은 요소(element)라고 합니다.

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

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

const arr2 = [[100,200], [300,400], ["javascript","jquery"]];

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

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

자바스크립트에서 2차 배열은 배열의 요소로 또 다른 배열을 포함하는 배열을 말합니다. 2차 배열은 행과 열의 형태로 데이터를 구조화하거나 표현할 때 사용됩니다. 각 행은 배열의 요소로서 다시 하위 배열을 가지고 있습니다.

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

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

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

자바스크립트에서 배열 구조 분해 할당(Array Destructuring Assignment)은 배열의 값을 추출하여 여러 변수에 할당하는 문법입니다. 이를 통해 배열의 각 요소를 쉽게 변수에 분배하거나 교환할 수 있습니다. 배열 구조 분해 할당은 ES6(ECMAScript 2015)부터 도입되었으며, 코드의 가독성과 유지보수성을 높이는 데 도움이 됩니다.

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

const [a, b, c] = arr;

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

11. 배열 : 데이터 저장(여러개) : 표현방법6 : 배열 펼침연산자

자바스크립트 배열 펼침 연산자(Spread Operator)는 배열이나 문자열 같은 이터러블(iterable) 객체를 펼쳐서 그 내용을 개별적인 요소로 분해하는 기능을 제공합니다. 이를 통해 배열을 복사하거나 다른 배열에 병합하거나 함수의 매개변수로 전달하는 등 다양한 상황에서 유용하게 활용할 수 있습니다. 펼침 연산자는 ES6(ECMAScript 2015)에서 도입되었습니다.

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

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

12. 객체 : 데이터 저장(키과값) : 표현방법1 : 객체 선언 후 배열 방식으로 데이터 입력

자바스크립트 객체(Object)는 여러 속성(key-value 쌍)을 포함하는 데이터 구조입니다. 객체는 관련된 데이터를 하나의 그룹으로 묶거나 구조화하여 표현할 때 사용됩니다. 객체는 중괄호 { }를 사용하여 생성하며, 각 속성은 이름(키)과 값으로 구성됩니다.

{
const obj = new Object();

obj[0] = 100;
obj[1] = 200;
obj[2] = "javascript";

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

13. 객체 : 데이터 저장(키와값) : 표현방법2 : 객체 선언 후 객체 방식으로 데이터 입력

자바스크립트 객체(Object)는 여러 속성(key-value 쌍)을 포함하는 데이터 구조입니다. 객체는 관련된 데이터를 하나의 그룹으로 묶거나 구조화하여 표현할 때 사용됩니다. 객체는 중괄호 { }를 사용하여 생성하며, 각 속성은 이름(키)과 값으로 구성됩니다.

{
const obj = new Object();

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

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

14. 객체 : 데이터 저장(키와값) : 표현방법3 : {}(리터럴) 방식으로 객체 선언

자바스크립트 객체(Object)는 여러 속성(key-value 쌍)을 포함하는 데이터 구조입니다. 객체는 관련된 데이터를 하나의 그룹으로 묶거나 구조화하여 표현할 때 사용됩니다. 객체는 중괄호 { }를 사용하여 생성하며, 각 속성은 이름(키)과 값으로 구성됩니다.

{
const obj = {};

obj.a = 100;
obj.b = 200;
obj.c = "javascript";
// obj[d] = "jquery"; // Uncaught ReferenceError: d is not defined

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

15. 객체 : 데이터 저장(키와값) : 표현방법4 : {}(리터럴) 방식으로 객체 선언과 동시에 초기값 설정

자바스크립트 객체(Object)는 여러 속성(key-value 쌍)을 포함하는 데이터 구조입니다. 객체는 관련된 데이터를 하나의 그룹으로 묶거나 구조화하여 표현할 때 사용됩니다. 객체는 중괄호 { }를 사용하여 생성하며, 각 속성은 이름(키)과 값으로 구성됩니다.

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

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

16. 객체 : 데이터 저장(키과값) : 표현방법5 : 배열안에 객체가 있는 방식

자바스크립트 객체(Object)는 여러 속성(key-value 쌍)을 포함하는 데이터 구조입니다. 객체는 관련된 데이터를 하나의 그룹으로 묶거나 구조화하여 표현할 때 사용됩니다. 객체는 중괄호 { }를 사용하여 생성하며, 각 속성은 이름(키)과 값으로 구성됩니다.

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

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

const obj1 = [
    {a: 100, b: 200, c: "javascript"},
    {a: 300, b: 400, c: "jquery"}
];

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

17. 객체 : 데이터 저장(키과값) : 표현방법6 : 객체안에 배열이 있는 방식

자바스크립트 객체(Object)는 여러 속성(key-value 쌍)을 포함하는 데이터 구조입니다. 객체는 관련된 데이터를 하나의 그룹으로 묶거나 구조화하여 표현할 때 사용됩니다. 객체는 중괄호 { }를 사용하여 생성하며, 각 속성은 이름(키)과 값으로 구성됩니다.

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

18. 객체 : 데이터 저장(키과값) : 표현방법7 : 객체안에 객체가 있는 방식

자바스크립트 객체(Object)는 여러 속성(key-value 쌍)을 포함하는 데이터 구조입니다. 객체는 관련된 데이터를 하나의 그룹으로 묶거나 구조화하여 표현할 때 사용됩니다. 객체는 중괄호 { }를 사용하여 생성하며, 각 속성은 이름(키)과 값으로 구성됩니다.

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

19. 객체 : 데이터 저장(키과값) : 표현방법8 : 객체 + 함수

자바스크립트에서는 객체 안에 함수를 저장할 수 있습니다. 이러한 함수를 객체의 속성(property)으로 저장하여 해당 객체의 메서드(method)로 활용할 수 있습니다. 객체 안에 저장된 함수는 해당 객체의 상태나 데이터에 접근하고 조작할 수 있으며, 객체의 행동을 정의하는 데 사용됩니다.

{
const obj = {
    a: 100,
    b: [200, 300],
    c: {a: 400, b: 500, c: 600},
    d: "javascript",
    e: function(){
        console.log("jquery");
    },
    f: function(){
        console.log(obj.a);
    },
    g: function(){
        console.log(this.a);
    }
}

console.log(obj.a);
console.log(obj.b[0], obj.b[1]);
console.log(obj.c.a, obj.c.b, obj.c.c);
console.log(obj.d);
obj.e();
obj.f();
obj.g();
}

20. 객체 : 데이터 저장(키과값) : 표현방법9 : 객체 구조 분해 할당

자바스크립트에서 객체 구조 분해 할당(Object Destructuring Assignment)은 객체의 속성을 추출하여 여러 변수에 할당하는 문법입니다. 이를 통해 객체의 각 속성을 쉽게 변수에 할당하거나 기본값을 설정할 수 있습니다. 객체 구조 분해 할당은 ES6(ECMAScript 2015)부터 도입되었으며, 코드의 가독성과 유지보수성을 높이는 데 도움이 됩니다.

{
const obj = {
    a: 100,
    b: {x: 200, y: 300},
    c: "javscript",
}

const {a, b: {x, y}, c} = obj

console.log(a);
console.log(x);
console.log(y);
console.log(c);
}

21. 객체 : 데이터 저장(키과값) : 표현방법10 : 객체 펼침연산자

자바스크립트에서 객체 펼침 연산자(Object Spread Operator)는 객체의 속성을 펼쳐서 새로운 객체를 생성하거나 기존 객체에 다른 객체의 속성을 병합하는 기능을 제공합니다. 객체 펼침 연산자는 ES6(ECMAScript 2015)부터 도입되었습니다.

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

console.log(obj1);
console.log(obj2);
console.log(obj2.a);
console.log(obj2.b);
console.log(obj2.c);
console.log(obj2.d);
console.log(obj3);
}

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

JSON 데이터와 JavaScript 객체 간의 상호 변환

// json 데이트를 객체로 변환
    const jsonString = '{"name" : "webs", "age" : "30"}';
    const jsonObj = JSON.parse(jsonString);    // json 객체파일로 변환
    console.log(jsonObj.name);

    // webs 

    // 객체를 json 데이터로 변환
    const person = {name : "webs", age : 30};
    const jsonPerson = JSON.stringify(person);
    console.log(jsonPerson);

    //{"name" : "webs", "age" : "30"}

변수 : 지역변수 + 전역변수

지역 변수와 전역 변수는 서로 다른 범위에서 작동하며, 함수 내에서 선언한 지역 변수는 해당 함수 내에서만 영향을 미치며, 함수 외부의 전역 변수와는 독립적으로 동작합니다.

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

console.log("함수밖1:" + x, y, z);

function func(){
    let x = 300;             //지역변수
    y += 400;                //전역변수 y의 값에 400을 추가
    let z = "jquery";        //전역변수 z의 값에 문자열 "jquery"를 추가

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

console.log("함수밖2:" + x, y, z);
}

연산자 : 산술연산자

{
let x=4;
let y=20;

console.log(x+y);
console.log(x-y);
console.log(x*y);
console.log(x/y);
console.log(x%y);
}

연산자 : 문자 결합 연산자

{
let x="외로운";
let y="둘리는";
let z="귀여운";
let a="아기공룡";

console.log(x+y+z+a);

}

연산자 : 대입 연산자

대입 연산자는 변수에 값을 할당하거나 연산 결과를 변수에 저장할 때 사용됩니다.

{
let x=18;
let y=2;

console.log(x+=y); //x=x+y
console.log(x-=y); //x=x-y
console.log(x*=y); //x=x*y
console.log(x/=y); //x=x/y
console.log(x%=y); //x=x%y
}

연산자 : 증감 연산자

증가 및 감소 연산자(++ 및 --)를 사용하여 변수 값을 변경

{
let num1 = 10;  
let num2 = 20;  

num1--;              // num1을 1 감소
console.log(num1);   // 감소된 num1 출력

num1++;              // num1을 1 증가
console.log(num1);   // 증가된 num1 출력

result=num2++;       // 후위 증가: num2의 현재 값(20)을 result에 할당, 그 후 num2를 1 증가
console.log(result);

result=++num2;        // 선위 증가: num2를 1 증가한 후의 값(22)을 result에 할당
console.log(result);
}

연산자 : 비교 연산자

증가 및 감소 연산자(++ 및 --)를 사용하여 변수 값을 변경

{
let a = 10;
let b = 20;
let c = 10;
let f = "20";

console.log(a=b);
console.log(b==f);  // b와 f의 값이 같은지 비교
console.log(a!=b);  //a와 b의 값이 다른지 비교
console.log(b===f); // b와 f의 값과 타입이 같은지 비교
}

연산자 : 논리 연산자

증가 및 감소 연산자(++ 및 --)를 사용하여 변수 값을 변경

{
let a = true;
let b = false;

let And = a&&b;
let Or = a||b;
let NotA = !a;
let NotB = !b;

console.log(And);
console.log(Or);
console.log(NotA);
console.log(NotB);
}

자료형

자바스크립트는 동적 타입 언어로서, 변수의 자료형을 선언하지 않아도 됩니다. 변수의 자료형은 변수에 할당된 값에 따라 자동으로 결정됩니다.

{
const func1 = 100; // 숫자
const func2 = "100"; // 문자열
const func3 = true; // 불리언
const func4 = false; // 불리언
const func5 = null; // null
const func6 = undefined; // undefined
const func7 = [100, 200, "javascript"]; // 배열
const func8 = {100, 200, "javascript"}; // 객체
const func9 = function (){} // 함수
}