javascript

01. 변수 : 데이터 불러오기

변수 안에 저장된 데이터를 불러오는 방법입니다.(변수는 값이 변합니다.)

{
    let x = 100, y = 200, z = "javascript";
    
    console.log(x, y, z);    
}

02. 상수 : 데이터 불러오기

상수 안에 저장된 데이터를 불러오는 방법입니다.(상수는 값이 변하지 않습니다.)

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

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

03. 배열 : 데이터 불러오기

배열 안에 저장된 데이터를 불러오는 방법입니다.

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

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

04. 배열 : 데이터 불러오기 : 2차원 배열

1차원 배열 안에 저장되어있는 데이터를 불르고. 1차원 배열 안에 저장된 2차원 배열을 호출 중입니다.

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

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

(복습)typeof로 타입의 유형을 알아내는 것을 추가로 배웠습니다.

주어진 값의 데이터 타입을 반환합니다

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

    document.write(x + "
"); 
    
    //typeof() : 타입 값을 출력해줌.(숫자 = number / 문자열 = String)
    document.write(typeof(x) + "
"); 
    document.write(y + "
");
    y = "200";
    document.write(typeof(y) + "
"); 
    y = Number(y);
    document.write(typeof(y) + "
"); 


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

05. 배열 : 데이터 불러오기 : 갯수 구하기

배열에 데이터를 저장 후 배열의 길이를 출력해서 배열에 접근해서 데이터를 불러내는 중입니다..

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

    console.log(arr.length);    
}

06. 배열 : 데이터 불러오기 : for()문

배열에 데이터를 저장 시키고 for문으로 배열에 저장된 인덱스 번호에 접근해서 하나하나 출력 합니다.

{
    const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
    
    // for(초기값; 조건식; 증감식) { 실행문 }
    for(let i=0; i<9; i++) { 
        console.log(arr[i]); 
    }
}

06-1 (복습). 배열 : 데이터 불러오기 : for()문

배열에 저장된 값을 for문으로 하나하나 가져오는 예제입니다. 하지만 밑에서 length 길이 계산을 이용하여 값을 계산하여 배열문을 출력해봤습니다.

{
    const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
    
    for(let i=0; i<arr.length; i++){
        console.log(arr[i]); 
    }
}

07. 배열 : 데이터 불러오기 : 중첩 for()문

for문을 사용하고. 안에 다시 for문을 사용하는 형태입니다. 1번째 for문은 세로 기준으로 1부터 시작합니다. 2번째 for문은 가로 기준으로 1부터 시작합니다

{
    for( let i=1; i<=5; i++ ){
        console.log("i : " + i); 
        for( let j=0; j<=10; j++ ){
            console.log("j : " + j); 
        }
    }
}

08. 배열 : 데이터 불러오기 : forEach()문

forEach문은 배열에 있는 값들을 하나하나 가져 올수 있습니다. forEach(element, index, array) - element는 값, index는 인덱스 번호, array는 배열입니다. 배열.forEach(function(element, index, array) { 코드 });

{
    let num = [100, 200, 300, 400, 500];

    num.forEach(function(number) {
        document.write(number + "
");
    });
    
    // forEach 화살표
    num.forEach((number) => {
        // document.write(number + "
");
    });

    // document.write("
");

    // forEach 화살표 : 괄호 생략
    num.forEach( number => {
        // document.write(number + "
");
    });

    // forEach 화살표 : 중괄호 생략
    // num.forEach(number => document.write(number + "
"));

    // forEach (값, 인덱스, 배열)
    num.forEach(function(number, index, array){
        // document.write("값 : " + number + ", ");
        // document.write("인덱스 : " + index + ", ");
        // document.write("배열 : " + array + ", ");
        // document.write("
");
    });
}

08-1. 배열 : 데이터 불러오기 : forEach()문 : 화살표 함수

forEach문을 화살표 함수로 만든 것입니다. 내용은 08번의 forEach문과 똑같습니다. forEach문은 배열에 있는 값들을 하나하나 가져 올수 있습니다. forEach(element, index, array) - element는 값, index는 인덱스 번호, array는 배열입니다. 배열.forEach(function(element, index, array) { 코드 });

{
    let num = [100, 200, 300, 400, 500];

    num.forEach((number) => {
         document.write(number + "
");
    });

    // forEach 화살표 : 괄호 생략
    num.forEach( number => {
         document.write(number + "
");
    });

    // forEach 화살표 : 중괄호 생략
    num.forEach(number => document.write(number + "
"));
}

08-2. 배열 : 데이터 불러오기 : forEach()문 : 화살표 함수

forEach문은 배열에 있는 값들을 하나하나 가져 올수 있습니다. forEach(element, index, array) - element는 값, index는 인덱스 번호, array는 배열입니다. 배열.forEach(function(element, index, array) { 코드 });

{
let num = [100, 200, 300, 400, 500];

// forEach (값, 인덱스, 배열)
num.forEach(function(number, index, array){
    document.write("값 : " + number + ", ");
    document.write("인덱스 : " + index + ", ");
    document.write("배열 : " + array + ", ");
    document.write("
");
});
}

09. 배열 : 데이터 불러오기 : for of

for of는 for(let i of 대상) {} 대상의 모든 값들을 let i에 전달을 합니다 그럼 i 하나만으로 대상의 모든 값들을 활용 할 수 있습니다. (for문의 간편화.)

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

for(let i of arr){
    document.write(i + " ");
}
}

10. 배열 : 데이터 불러오기 : for in

for in은 객체에서 주로 사용되는 명령어 입니다. 밑에서는 배열에 사용 중이지만 배열도 객체입니다. 만약 배열에 사용 중이면 인덱스 번호를 가져옵니다.(document.write(i + " ");) 배열의 값을 가져 올려면 (document.write(arr[i] + " ");)을 사용해야 합니다.

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

for(let i in arr){
    document.write(arr[i] + " ");
}

}

11. 배열 : 데이터 불러오기 : map()

map()메서드는 배열 객체의 내장 메서드 중 하나로, 배열의 각 요소에 대해 지정된 콜백 함수를 실행하고 그 결과를 새로운 배열로 반환합니다.

{
const num = [100, 200, 300, 400, 500];

// 배열.map(function(값, 인덱스 번호) {})
num.map(function(element, index, array) {
    console.log("값 : " + element + "  ");
    console.log("인덱스 : " + index + "  ");
    console.log("배열 : " + array + "  ");
});

// forEach
num.forEach(function(element, index, array) {
    console.log("값 : " + element + "  ");
    console.log("인덱스 : " + index + "  ");
    console.log("배열 : " + array + "  ");
});
}

11. 배열 : 데이터 불러오기 : map() - 2번쨰 예제

map()메서드는 배열 객체의 내장 메서드 중 하나로, 배열의 각 요소에 대해 지정된 콜백 함수를 실행하고 그 결과를 새로운 배열로 반환합니다.

{
    const arr = [100, 200, 300, 400, [500, 600]];

    console.log(arr[4][0]); // 500
    console.log(arr[4][1]); // 600
    console.log("갯수 : " + arr.length); // 5개

    //for문 배열 안에 있는 데이터 하나씩 출력
    for(let i=0; i<arr.length; i++){
        console.log(arr[i]); // 100, 200, 300, 400, [500, 600]
    }

    //forEach문 배열 안에 있는 데이터 하나씩 출력
    arr.forEach(function(elem){
         console.log(elem); // 100, 200, 300, 400, [500, 600]
    });

    // forEach문 화살표로 배열 안에 있는 데이터 하나씩 출력.[괄호 생략]
    arr.forEach(el => {
        console.log(el); // 100, 200, 300, 400, [500, 600]
    });
     // forEach문 화살표로 배열 안에 있는 데이터 하나씩 출력.[괄호 + 중괄호 생략]
     arr.forEach(el => console.log(el)); // 100, 200, 300, 400, [500, 600]

    // for of문으로 배열 안에 있는 데이터 옮기기
    for(let i2 of arr){
        console.log(i2);
    }

    // for in문으로 배열 안에 있는 데이터 옮기기
    for(let i3 in arr){
        console.log(arr[i3]); // 배열 값
        console.log(i3); // 인덱스 값
    }

    // map() : 데이터를 복사해서 새로운 메모리 공간에 복사해서 할당 함.
    arr.map(function(el) {
        console.log(el);
    });

    // map() 화살표 함수(function 생략)
    arr.map((el) => {
        console.log(el);
    });
    // map() 화살표 함수(function 생략 + 괄호 생략)
    arr.map(el => {
        console.log(el);
    })
     // map() 화살표 함수(function 생략 + 괄호 생략 + 중괄호 생략)
     arr.map(el => console.log(el));
}

12. 배열 : 데이터 불러오기 : 배열 펼침 연산자(Spread Operator)

펼침 연산자 (Spread Operator)는 자바스크립트에서 배열, 객체, 문자열 등의 요소를 펼쳐서 개별 요소로 분리하는 연산자입니다.

{
    let arr1 = [100, 200, 300, 400, 500];
    let arr2 = [600, 700];

    console.log(arr1); // 배열 형태로 가져옴
    console.log(...arr1); // 배열을 값으로 분리 함.
    console.log(...arr1, ...arr2); // 합침
}

13. 배열 : 데이터 불러오기 : 배열 구조분해 할당

배열 구조 분해 할당(Array destructuring assignment)은 배열의 요소를 개별 변수에 할당하는 중 하나입니다. 이를 통해 배열의 각 요소를 개별 변수로 분리하여 사용할 수 있습니다.

{
    // 리액트에서 많이 사용되는 방식
    let a, b, c;
    [a, b, c] = [100, 200, "javascript"];

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

14. 객체 : 데이터 불러오기 : 기본

데이터를 불러오는 것은 객체지향 프로그래밍에서 중요한 일 중 하나입니다. 객체를 이용하여 데이터를 불러오면 해당 데이터를 객체 내에 저장하고, 이후에 객체에서 다양한 메서드를 사용하여 데이터를 처리할 수 있습니다.

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

15. 객체 : 데이터 불러오기 : Object

옛날에 사용하던 코드로 Object.key, Object.values, Object.entries를 통해서 "객체" 안의 키값을 "배열 형식"으로 가져오는 코드 입니다.

{
    const obj = {
        // a는 "키" / 100은 "값"
        a: 100,
        b: 200,
        c: "javascript"
    };

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

    // 배열 형식으로 "키"값을 구해옴
    console.log(Object.keys(obj));  
    console.log(Object.values(obj)); 
    console.log(Object.entries(obj)); 
}
       

16.객체 : 데이터 불러오기 : 변수

객체의 값을 저장하고 새로운 상수를 만들고. 객체에서 가져온 값을 각 상수에 넣어줄수도 있습니다.

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

    const name1 = obj.a;
    const name2 = obj.b;
    const name3 = obj.c;

    console.log(name1);
    console.log(name2); 
    console.log(name3);
}      

17. 객체 : 데이터 불러오기 : for in

for in문으로 객체안에 저장된 데이터의 키값을 데이터 형태로 출력하는 방법입니다.

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

    // 데이터 형식으로 "키"값을 구해옴
    for(let key in obj){
        console.log(key);
        console.log(obj[key]);
    }
} 

18. 객체 : 데이터 불러오기 : map()

map()은 배열에서 활용 됩니다. 이번에서 배운 내용은 map() 함수 사용 방법입니다. function, 화살표 함수를 이용하는 방법과 괄호나 중괄호를 지우는 방법에 대해 배웠습니다.

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

    // map function() 함수
    obj.map(function(element){
        // console.log(element.a); // 100
        // console.log(element.b); // 300
        // console.log(element.c); // javascript
    });

    // map 화살표 함수
    obj.map((element) => {
        console.log(element.a); // 100
        console.log(element.b); // 300
        console.log(element.c); // javascript
    });

    // map 화살표 함수(괄호 + 중괄호 생략)
    obj.map(element => console.log(element.a));
}

19. 객체 : 데이터 불러오기 : hasOwnProperty()

객체에 상속되지 않은 속성 이름인 경우 true를 반환합니다. 이 메서드는 객체가 특정 프로퍼티를 갖고 있는지 확인할 때 사용됩니다.

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

    // 데이터가 있으면 true / 없으면 false
    console.log(obj.hasOwnProperty("a")); 
    console.log(obj.hasOwnProperty("b")); 
    console.log(obj.hasOwnProperty("c")); 
    console.log(obj.hasOwnProperty("d")); 

    console.log("a" in obj); 
    console.log("b" in obj);
    console.log("c" in obj);
    console.log("d" in obj);
}    

20. 객체 : 데이터 불러오기 : 객체 펼침연산자

객체 펼침 연산자는 "..." 기호로 표시되며, 객체 리터럴 또는 배열 리터럴 내부에서 사용됩니다. 이 연산자를 사용하면 객체 내부의 모든 속성이나 배열 내부의 모든 요소를 하나의 새로운 객체 또는 배열로 펼칠 수 있습니다.

{     
    //펼침 연산자 활용하기1
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    };

    const spread = {...obj, d:"react"};

    console.log(spread); 
    console.log(spread.a); 
    console.log(spread.b); 
    console.log(spread.c); 
    console.log(spread.d); 


    //펼침 연산자 활용하기2
    const obj1 = {
        a: 100,
        b: 200,
    };
    const obj2 = {
        c: "javascript",
        d: "react"
    };

    const spread = {...obj1, ...obj2};

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

21. 객체 : 데이터 불러오기 : 객체 구조분해할당

ES6에서 도입된 문법으로, 객체의 속성 값을 변수에 할당하는 방법입니다. 이를 통해 코드를 간결하게 작성할 수 있으며, 특히 함수의 매개변수로 객체를 전달할 때 유용합니다.

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

    const {a:name1, b:name2, c:name3} = obj
    console.log(name1, name2, name3);

    const {x, y, z} = obj;
    console.log(x, y, z); 
}