javascript

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

변수를 통해 데이터를 불러오는 방법입니다.

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

console.log() 혹은 document.write()를 통해 저장한 변수의 값을 확인할 수 있습니다.

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

상수를 통해 데이터를 불러오는 방법입니다.

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

console.log() 혹은 document.write()를 통해 저장한 상수의 값을 확인할 수 있습니다.

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

배열에서 데이터를 불러오는 기본적인 방법입니다.

{
    const arr = [100, 200, "javascript"];
    console.log(arr[0], arr[1], arr[2]);
}

console.log() 혹은 document.write()를 통해 저장한 배열의 값을 확인할 수 있습니다.

04. 배열 : 데이터 갯수 불러오기

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

{
    const arr = [100, 200, "javascript"];
    console.log(arr.length);
}

배열의 이름(arr).lenght를 통해 배열의 길이(값)을 구할 때 용이합니다.

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

배열 안, 데이터를 불러오는 방법 중 for()문에 대한 예시입니다.

{
    const arr = [100, 200, 300, 400, 500];
    console.log(arr[0], arr[1], arr[2], arr[3], arr[4], arr[5], arr[6], arr[7], arr[9] );

    for(let i=0; i<5; i++){
        console.log(arr[i]);
    }
}

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

forEach()는 for()문을 보다 간략하게 표현할 수 있습니다.

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

    //1
    arr.forEach(function(el){
        console.log(el);
    });
    arr.forEach(function(el, index, array){ 
        console.log(el, index,array);
    })
    //2
    arr.forEach((el)=>{
        console.log(el);
    });
    //3
    arr.forEach(el=>{
        console.log(el);
    });
    //4
    arr.forEach(el=>console.log(el));
}

forEach()문은 콜백 함수입니다. 함수의 형태를 갖기에 간략하게 표현이 가능하며,
element(요소의 값), index(순번), array(배열)의 값을 추가적으로 받을 수 있습니다.

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

for of 반복문은 배열과 같은 iterable 객체에 특히 유용합니다.

{
    const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
    
    for(let element of arr){
        console.log(element);
    }
}

for of 루프는 배열 또는 iterable 객체를 반복할 때 인덱스를 직접 다룰 필요가 없으므로
코드가 더 간결하고 가독성이 좋아집니다.

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

객체를 순회하거나 특정 속성을 조사해야 할 때에만 for...in을 사용하는 것이 좋습니다.

{
    const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
    
    for(let element in arr){
        console.log(element); // index 값 출력
        console.log(arr[element]); // 배열 값 출력 
    }
}

for in은 객체를 다룰 때 주로 사용되며, 배열에는 for of 루프가 더 적합합니다.

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

자바스크립트(JavaScript)의 map()에 관한 설명입니다.

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

    arr.map(function(el){
        console.log(el);
    })
    arr.map(function(el, index){
        console.log(index);
    });

    arr.map(function(el,index,arr){
        console.log(arr);
    })
}

배열의 값을 건드리지 않고, 새로운 배열을 생성해 값을 전달합니다.

10. 배열 : 데이터 불러오기 : filter()

자바스크립트(JavaScript)의 filter()에 관한 설명입니다.

{
    const arr = [100, 200, 320, 400, 500, 600, 700, 800, 900];

    arr.filter(function(el){
        console.log(el);
    })
    arr.filter(function(element, index){
        console.log(index);
    });

    arr.filter(function(el,index,arr){
        console.log(arr);
    })
}

map()과 비슷하지만, 조건을 세우고 그 값에 해당하는 값들을 배열로 만듭니다.

11. 배열 : 데이터 불러오기 : 펼침 연산자

자바스크립트(javascript)의 펼침 연산자에 관한 설명입니다.

{
    const arr = [100, 200, 320, 400, 500, 600, 700, 800, 900];
    const arr2 = [...arr];

    console.log(arr2);
    
}

배열의 값을 쉼표없이 불러옵니다. 배열의 요소를 다른 배열에 병합하거나 복사할 떄 사용합니다.

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

자바스크립트(javascript)의 배열 구조 분해 할당에 관한 설명입니다.

{
    const arr = [100, 200, 320, 400, 500, 600, 700, 800, 900];

    const [a,b,c,d,e,f,g,h,i] = arr;
    console.log(a);
    console.log(b);
    console.log(c);
    console.log(d);
    console.log(e);
    console.log(f);
    console.log(g);
    console.log(h);
    console.log(i);
}

배열 또는 객체에서 값을 추출하여 변수에 할당하는 방법을 제공합니다. 이를 통해 코드를 더 간결하게 작성하고 변수를 쉽게 초기화할 수 있습니다.

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

자바스크립트(javascript)의 객체를 불러오는 방법에 관한 설명입니다.

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

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

객체의 값을 불러올 때는 객체의 키값을 입력해 불러옵니다.

14. 객체 : 데이터 불러오기 : Object.keys()

자바스크립트(javascript)의 객체를 불러오는 방법에 관한 설명입니다.

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

    console.log(Object.keys(obj)); //  key값을 배열로 만들어서 처리해줌 
}

Object.keys(객체명)을 통해 객체의 키값을 배열로 불러올 수 있습니다.

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

자바스크립트(javascript)의 객체를 불러오는 방법에 관한 설명입니다.

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript",
    }
    console.log(Object.values(obj)); //  values 값을 배열로 만들어서 처리해줌 
}

Object.values(객체명)을 통해 객체의 요소값을 배열로 불러올 수 있습니다.

16. 객체 : 데이터 불러오기 : Object.entries()

.

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

    console.log(Object.entries(obj)); // 
}

17. 객체 : 데이터 불러오기 : Object.assign()

.

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript",
    }
    const obj2 = {
        e: 300,
        f: 400,
        g: "jqery",
    }

    const obj3 = Object.assign(obj, obj2); // 두 객체를 합쳐서 배열로 반환함 
    console.log(obj3);

}

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

.

{
    const obj = {
        a: 100,
        b: 200,
        c: "jabascript"
    }
    console.log(obj.hasOwnProperty("a")); // true 키 값만 확인함 
    console.log(obj.hasOwnProperty("b"));
    console.log(obj.hasOwnProperty("c"));
    console.log(obj.hasOwnProperty("d")); // false
    console.log(obj.hasOwnProperty(100)); // false

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

19. 배열 : 데이터 불러오기 : filter()

.

{
    const obj = {
        a: 100,
        b: 200,
        c: "jabascript"
    }
    for (let el in obj) {
        console.log(el + " : " + obj[el]);

    }
}

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

.

{
    const obj = {
        a: 100,
        b: 200,
        c: "jabascript"
    }
    const obj2 = {
        d: 100,
        e: 200,
        f: "jabascript"
    };
    const obj3 = { ...obj, ...obj2 };
    const obj4 = { ...obj, ...obj2, g: "jQuery" };
    console.log(obj);
    console.log(obj2);
    console.log(obj3); // assign과 똑같음
    console.log(obj4); // assign과 똑같음
}

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

.

{
    const obj = {
        a: 100, b: 200, c: 300, d: 400
    }
    const { a, b, c, d } = obj;
    console.log(a);
    console.log(b);
    console.log(d);
    console.log(c);

    const { a: x, b: y } = obj;
    console.log(x, y);
    const { u, e, f, g = "jquery" } = obj;
    console.log(u, e, f, g);

    const obj3 = { x: 100, y: { a: 100, b: 200 }, z: "javascript" };
    const { x1, y1: { a1, b1 }, z1 } = obj3;
    console.log(x1);
    console.log(a1);
    console.log(b1);
    console.log(z1);
}

배열 또는 객체에서 값을 추출하여 변수에 할당하는 방법을 제공합니다. 이를 통해 코드를 더 간결하게 작성하고 변수를 쉽게 초기화할 수 있습니다.