자바스크립트 데이터 불러오기

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]);
    console.log(arr[2][1]);
}

정답

100
200
javascript
react

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

여러 개로 배열된 데이터를 불러오는 값의 갯수를 구하는 방법입니다.

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

    console.log(arr.length)
}

정답

3

 

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

형식 : for(초기값; 조건식; 증감식;){실행문}
조건식이 true가 나올 때 까지만 값이 나옵니다.
for (시작하는 값, i가 9보다 작을때까지 트루가 나와야 값이 나옴, ++는 i가 1씩증가)

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

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

 

정답

100
200
300
400
500
600
700
800
900

for( )문 연산

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=8; 8<9; console.log(arr[9]) i++ //900
i=9; 9<9; END //9는 9보다 작지 않으므로 8까지 구해집니다.

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

반복문 안에 반복문이 중첩 되어있는 형태입니다.

{
    for(let i=1; i<=10; i++){
        document.write(i);
        for(let j=1; j<=10; j++){
            document.write(j);
        }
    }
}

정답

 i:1 ~ i:10 j:1 ~ j:10

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

배열에서 사용할 수 있는 자바스크립트 함수 중 하나로입니다.
배열의 각 요소에 대해 콜백 함수(함수 안에 불러오는 함수)를 실행합니다.

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

    document.write(num[0]);
    document.write(num[1]);
    document.write(num[2]);
    document.write(num[3]);
    document.write(num[4]);
    
    //for
    for(let i=0; i<num.length; i++){
        document.write(num[i]);
    }

    //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);
        document.write(index);
        document.write(array);
    })
}

정답

전부 다
100
200
300
400
500

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

배열에서 쓰는 반복문 입니다.

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

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

정답

100
200
300
400
500

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

객체 때문에 만들어졌습니다.
객체는 배열의 성질이 있어서 for in문으로 배열도 불러올 수 있습니다.

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

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

정답

100
200
300
400
500

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

배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과를 새로운 배열로 반환합니다.
원본 배열을 변경하지 않으며, 반환되는 새로운 배열의 길이는 원본 배열과 같습니다.

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

    num.forEach(function(el, i,a){
        document.write(el);
        document.write(i);
        document.write(a);
    });

    num.map(function(el, i, a){
        document.write(el);
        document.write(i);
        document.write(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
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. 배열 : 데이터 불러오기 : 배열 펼침 연산자

배열, 객체, 문자열등의 요소를 펼처서 개별 요소로 분리하는 연산자입니다.

{
    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
100200300400500
100200300400500600700

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

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

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

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

정답

100
200
javascript

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

객체는 키(key)와값(value)을 저장할 수 있는 구조입니다.

 {
    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

객체의 속성 키(key), 값(value), 키-값 쌍(entry)을 각각 배열로 변환합니다.

 

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

정답

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

for in문을 사용해서 객체의 모든 속성을 순회하면서 속성 이름과 값을 출력합니다.

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

    for(let key in obj){
        console.log(key);
        console.log(obj[key]);//속성값 불러옴
    } 
}

정답

a
100

b
200

c
javascript

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

map() 메소드를 사용해서 배열의 요소를 순회하면서 각 요소의 이름과 값을 출력합니다.

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

    obj.map((el) =< {
        console.log(el.a);        //여기서 el은 obj를 뜻함
        console.log(el.b);        
        console.log(el.c);        
    });
}

 

정답

100
300
javascript

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

hasOwnProperty() 메소드는 객체가 특정 속성을 직접 가지고 있는지 확인하는 메소드입니다.
이 메소드는 인수로 속성 이름을 받아서, 해당 속성이 객체에 직접 정의되어 있는지 여부를 불리언 값으로 반환합니다.

{
    {
        const obj = {
            a : 100,
            b : 200,
            c : "javascript",
        }
        console,log(obj.hasOwnProperty("a")); //true
        console,log(obj.hasOwnProperty("b")); //true
        console,log(obj.hasOwnProperty("c")); //true
        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);
    }
}

정답

true
true
true
false
true
true
true
false

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

객체 펼침 연산자(spread operator)는 ... 기호를 사용하여 객체의 속성을 전개하는 연산자입니다.
이 연산자를 사용하면 객체의 속성을 새로운 객체에 복사하거나, 함수 호출에서 인수로 전달할 수 있습니다.

{
    {
        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 obj = {
            a : 100,
            b : 200,
    }
    const obj2 ={ 
        c : "javascript",
        d: "react"
    }
    const spread = {...obj, ...obj2}

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

정답

100
200
javascript
react
100
200
javascript
react

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

객체의 속성을 변수에 할당하는 방법 중 하나입니다.
이 기능은 ES6부터 도입되었습니다.
객체 구조 분해 할당을 사용하면, 객체의 속성 값을 변수에 바로 할당할 수 있습니다.

     {
    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