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

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자

728x90

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

정답

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

배열 안에 있는 데이터의 갯수를 구하는 방법입니다.

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

    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);
    console.log(arr[3]);
    console.log(arr[4]);
    console.log(arr[5]);
    console.log(arr[6]);
    console.log(arr[7]);
    console.log(arr[8]);

    // for(초기값; 조건식; 증감식)
    // 실행문
    // 1)초기값을 넣었을 때 2)조건에 맞아 true이면 3)for식에 넣어 답이 나오고 4)증감식에 대입하여 다시 계산

    for(let i = 0; i<4; i++){
        console.log(arr[i]);
    }
    //위와 아래의 두 식은 같은 값이 나온다.
    for(let i = 0; i<3; i++){
        console.log(arr[i]);
    }
    for문은 식이 false일 때 까지 계산한다. 
    for(초기값; 조건식; 증감식)
    1) 초기값을 넣었을 때     2) 조건에 맞아 true이면  3) for식에 넣어 답이 나오고       4) 증감식에 대입하여 다시 계산
    1) i=0;                  2) 0<9;                      3) console.log(arr[0]); =< 100          4) i++  =< 0+1 = 1
    1) i=1;                  2) 1<9;                      3) console.log(arr[1]); =< 200          4) i++  =< 1+1 = 2
    1) i=2;                  2) 2<9;                      3) console.log(arr[2]); =< 300          4) i++  =< 2+1 = 3
    1) i=3;                  2) 3<9;                      3) console.log(arr[3]); =< 400          4) i++  =< 3+1 = 4
    1) i=4;                  2) 4<9;                      3) console.log(arr[4]); =< 500          4) i++  =< 4+1 = 5
    1) i=5;                  2) 5<9;                      3) console.log(arr[5]); =< 600          4) i++  =< 5+1 = 6
    1) i=6;                  2) 6<9;                      3) console.log(arr[6]); =< 700          4) i++  =< 6+1 = 7
    1) i=7;                  2) 7<9;                      3) console.log(arr[7]); =< 800          4) i++  =< 7+1 = 8
    1) i=8;                  2) 8<9;                      3) console.log(arr[8]); =< 900          4) i++  =< 8+1 = 9
    1) i=9;                  2) 9<9;               false  END    
    
}

정답

100
200
300

400

500

600

700

800

900

100
200
300

400

500

600

700

800

900

100
200
300

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

for문 안에 for문이 들어가 있는 구조

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

정답

i : 0 j : 1 j : 2 j : 3 j : 4 j : 5 j : 6 j : 7 j : 8 j : 9 j : 10

i : 1 j : 1 j : 2 j : 3 j : 4 j : 5 j : 6 j : 7 j : 8 j : 9 j : 10

i : 2 j : 1 j : 2 j : 3 j : 4 j : 5 j : 6 j : 7 j : 8 j : 9 j : 10

i : 3 j : 1 j : 2 j : 3 j : 4 j : 5 j : 6 j : 7 j : 8 j : 9 j : 10

i : 4 j : 1 j : 2 j : 3 j : 4 j : 5 j : 6 j : 7 j : 8 j : 9 j : 10

i : 5 j : 1 j : 2 j : 3 j : 4 j : 5 j : 6 j : 7 j : 8 j : 9 j : 10

i : 6 j : 1 j : 2 j : 3 j : 4 j : 5 j : 6 j : 7 j : 8 j : 9 j : 10

i : 7 j : 1 j : 2 j : 3 j : 4 j : 5 j : 6 j : 7 j : 8 j : 9 j : 10

i : 8 j : 1 j : 2 j : 3 j : 4 j : 5 j : 6 j : 7 j : 8 j : 9 j : 10

i : 9 j : 1 j : 2 j : 3 j : 4 j : 5 j : 6 j : 7 j : 8 j : 9 j : 10

i : 10 j : 1 j : 2 j : 3 j : 4 j : 5 j : 6 j : 7 j : 8 j : 9 j : 10

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

배열 안에 있는 데이터의 갯수를 구하는 방법입니다.

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

        document.write(num[0],"<br>");
        document.write(num[1],"<br>");
        document.write(num[2],"<br>");
        document.write(num[3],"<br>");
        document.write(num[4],"<br>");

        //for문
        for(let i=0; i<num.length; i++){
            document.write(num[i],"<br>");
        }
        //forEach문
        // num.forEach(function(){});  얘가 기본 한문장
        num.forEach(function(el){
            document.write(el,"<br>")
        });
        
        //forEach : 화살표함수
        // num.forEach(()=<{}) : 화살표함수로 바꾸는 기본형
        num.forEach((el) =< {
            document.write(el,"<br>")
        });

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

        //forEach :화살표함수 : 중괄호생략
        num.forEach(el =< document.write(el,"<br>"));
        //forEach (값, 인덱스, 배열) 불러올수 있다
        num.forEach(function(element, index, array){
            document.write(element,"<br>");
            document.write(index,"<br>");
            document.write(array,"<br>");
        })
    }

정답

100
200
300
400
500
100
200
300
400
500
100
200
300
400
500
100
200
300
400
500
100
200
300
400
500
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

for in은 객체를 위한 문법이다.

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

    for(let i in arr){ //in은 자릿수 값을 불러온다
        document.write(arr[i]);                
    }

정답

100
200
300
400
500

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

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

//   배열에 뿌리기: 값, 인덱스, 배열
//    num.forEach(function(el, i, a){ 
//        console.log(el)
//        console.log(i)
//        console.log(a)
//    });

    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)는 JavaScript에서 사용되는 문법 중 하나입니다.
이 연산자는 배열 또는 객체를 펼쳐서 각각의 요소를 개별적인 값으로 나타내는 역할을 합니다.
배열 펼침 연산자는 세 개의 점(...)으로 표시됩니다.
배열 펼침 연산자를 사용하면 배열의 모든 요소를 새로운 배열에 포함시킬 수 있습니다

    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
javascript

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

    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 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,"");
            console.log(obj[key],"");

        }

정답

a
100
b
200
c
javascript

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"
        } 
        document.write(obj.hasOwnProperty("a"));//true
        document.write(obj.hasOwnProperty("b"));//true
        document.write(obj.hasOwnProperty("c"));//true
        document.write(obj.hasOwnProperty("d"));//false
//바로 위와 같은 식
        console.log("a" in obj)
        console.log("b" in obj)
        console.log("c" in obj)
        console.log("d" in obj)

정답

truetruetruefalse
truetruetruefalse

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

    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: "javascript",
        d: "react"
    }

    const spread1 = {...obj1, ...obj2}
    console.log(spread1.a)
    console.log(spread1.b)
    console.log(spread1.c)
    console.log(spread1.d)

정답

100200javascriptreact
100200javascriptreact

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

정답

100200javascript
100200javascript

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

2025. 04
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30