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

변수에 데이터를 불러 올 수 있습니다.

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

    console.log(x ,y ,z);
}   
결과 확인하기
100 200 "javascript"

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

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

{
    const x = 100, y = 200, z = "javascript";
    
    console.log(x, y, z);
}    
결과확인하기
100 200 "javascript

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

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

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

    console.log(arr[0], arr[1], arr[2]);
}    
결과확인하기
100, 200, "javascript"

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

배열안에 배열을 넣어 저장한 데이터를 불러올수 있습니다.

{
    const arr = [100, 200, ["javascript","react"]];
    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2][0]);       //2번째배열에 0번째배열
    console.log(arr[2][1]);
}    
결과확인하기
100
200
javascript
react

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

"length"를 사용하여 배열안에 있는 것을 불러 온다

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

    console.log(arr,length)      //length 갯수구할때 쓴다.
} 
결과확인하기
[100,200,"javascript"]

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

조건이 성립 될때 까지 불러옵니다

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

    for(let i = 0; i<9; i++){    //i는0부터시작하며 i<9 조건이 맞으면 출력 후 i를 하나를 더하고 다시계산한다
    console.log(arr[i]);
    }
    // i=0; 0<9; console.log(arr[0]); i++  //100
    // i=1; 1<9; console.log(arr[1]); i++  //200
    // i=2; 2<9; console.log(arr[2]); i++  //300
    // i=3; 3<9; console.log(arr[3]); i++  //400
    // i=4; 4<9; console.log(arr[4]); i++  //500
    // i=5; 5<9; console.log(arr[5]); i++  //600
    // i=6; 6<9; console.log(arr[6]); i++  //700
    // i=7; 7<9; console.log(arr[7]); i++  //800
    // i=8; 8<9; console.log(arr[8]); i++  //900
    // i=9; 9<9;"공식이성립안된다" END 
}
결과확인하기
100
200
300
400
500
600
700
800
900

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

배열 안에있는 배열을 조건이 성립할때 까지 불러 옵니다

{
    for( let i=1; i<=10; i++ ){
        console.log("i : " + i);
        for( let j=1; j<=10; j++ ){
            console.log("j : " + j);
        }
    }
}    
결과확인하기
i:1 j:2 j:3 j:4 ... j:10 i:2 j:1 j:2 j:3...j:10...i:10 j:1 j:2...j:10

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

배열에 있는 데이터를 반복 시킬때 사용하는 함수 입니다.

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

    //forEach
    num.forEach(function(el){         //배열에 있는 데이터를 반복 시킬때 사용
        document.write(el);
    });

    //forEach :화살표 함수
    num.forEach((el)=>{
        document.write(el);
    });

    //forEach :화살표 함수 : 괄호 생략
    num.forEach(el=>{
        document.write(el); 
    });

    //forEach :화살표 함수 : 괄호 생략 : 중괄호 생략
    num.forEach(el=> document.write(el));

    // forEach(값, 인덱스, 배열)
    num.forEach(function(element, index, array){
        document.write(element,"<br>");
        document.write(index,"<br>");
        document.write(array,"<br>");
    });
}
결과 확인하기
forEach ~ 화살표 함수
100200300400500,

forEach(값, 인덱스, 배열)
100
0
100,200,300,400,500
200
1
100,200,300,400,500
300
2
100,200,300,400,500
400
3
100,200,300,400,500
500
4
100,200,300,400,500

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

반복 가능한 객체를 순회할 수 있습니다.

{
    const arr = [100, 200, 300, 400, 500];
    
    for(let i of arr){         //배열에서 사용해야합니다.
        document.write(i); 
    }
}
결과 확인하기
100200300400500

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

객체의 속성을 순회 합니다. 객체의 모든 열거 가능한 속성에 대해 반복합니다.

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

    for(let i in arr){           //객체에서 사용해야합니다 하지만 배열도 객체이므로 사용은 가능합다.
        document.write(arr[i]);
    }
}
결과 확인하기
100200300400500

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

배열의 모든요소에 대해서 주어진 함수를 호출하여, 각 요소를 함수의 반환값으로 대체한 새로운 배열을 생성합니다. 이때, 원본 배열은 변경되지 않습니다.

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

    num.map(function(el, i, a){
        console.log(el);
        console.log(i); 
        console.log(a);
    });
}
결과 확인하기
100
0
100,200,300,400,500
200
1
100,200,300,400,500
300
2
100,200,300,400,500
400
3
100,200,300,400,500
500
4
100,200,300,400,500

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

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

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

    console.log(arr1,);
    console.log(...arr1,);
    console.log(...arr1, ...arr2);
}
결과 확인하기
[100, 200, 300, 400, 500]
100 200 300 400 500
100 200 300 400 500 600 700

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

배열의 요소를 개별 변수에 할당하는 방법중 하나입니다.이를 통해 배열 각요소를 개별 변수로 분리하여 사용할 수 있습니다.

{
    let a,b,c;
    [a, b, c] = [100, 200, "javascript"];

    console.log(a);
    console.log(b);
    console.log(c);
}
결과 확인하기
100
200
jvaascript

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

기본적인 객체 불러오기 입니다.

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    console.log(obj.a);
    console.log(obj.b);
    console.log(obj.c);
}
결과 확인하기
100
200
javascript

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

Object를 통해 키나 값을 불러옵니다.

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    console.log(Object.keys(obj));  //abc를불러올때 key
    console.log(Object.values(obj));  //값
    console.log(Object.entries(obj)); //항목 [Array(2), Array(2), Array(2)],  'a',100,'b',200,'c',javascript
}
결과 확인하기
['a','b','c']
[100, 200, 'javascript']
['a', 100]['b', 200]['c', 'javascript']

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)
}
결과 확인하기
100
200
javascript

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

객체의 속성을 순회 합니다. 객체의 모든 열거 가능한 속성에 대해 반복합니다.

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript",
    }
    for(let key in obj){
        console.log(key); //키 abc를 불러온다
        console.log(obj[key]);  // 값을 불러온다
    }
}
결과 확인하기
a
100
b
200
c
jvaascript

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

배열의 모든요소에 대해서 주어진 함수를 호출하여, 각 요소를 함수의 반환값으로 대체한 새로운 배열을 생성합니다. 이때, 원본 배열은 변경되지 않습니다.

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

    obj.map(function(el) {
        console.log(el.a);
        console.log(el.b);
        console.log(el.c);
    });
}
결과 확인하기
100
300
javascript

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

객체가 특정 속성을 직접 소유하고 있는지를 나타내는 메서드입니다. 이 메서드는 객체 자체에 정의된 속성만을 검사하며, 상속된 속성은 검사하지 않습니다.

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

    console.log("a" in obj);
    console.log("b" in obj);
    console.log("c" in obj);
    console.log("d" in obj);
}
결과 확인하기
ture
ture
ture
false

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

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

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

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

    console.log(spread.a);
    console.log(spread.b);
    console.log(spread.c);
    console.log(spread.d);
}
{
    const obj1 = {
        a: 100,
        b: 200,
    }
    const obj2 = {
        c: "jvaascript",
        d: "react"
    }
    const spread = {...obj1, ...obj2}

    console.log(spread.a);
    console.log(spread.b);
    console.log(spread.c);
    console.log(spread.d);
}
결과 확인하기
100
200
javascript
100
200
javascript
react
100
200
javascript
react

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

배열이나 객체의 값을 새로운 변수에 할당하는 방법입니다. 이를 통해 변수에 배열이나 객체의 일부 또는 전체를 쉽게 할당할 수 있습니다.

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

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

    console.log(name1);
    console.log(name2);
    console.log(name3);
}
결과 확인하기
100
200
javascript
100
200
javascript