Javascript를 공부해 봅시다! - 08. 데이터 불러오기

기초부터 시작하는 코딩/Javascript

Javascript를 공부해 봅시다! - 08. 데이터 불러오기

kebab00 2023. 3. 6. 20:38

728x90

데이터 불러오기

자바스크립트에서 데이터를 불러오는 종류를 알아봅시다.

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], arr[1], arr[2][0]);     //2차 배열 출력방법
}

// 100 200 javascript

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

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

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

    console.log(arr.length);     //배열의 갯수를 구할 땐 .length를 쓰면 된다
}

// 3

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

- for()문을 사용하여 데이터를 불러오는 방법 입니다.

const arr = [10, 20, 30, 40, 50, 60, 70, 80, 90];
    for(let i=0; i<=8; i++) {
    console.log(arr[i]);
    };
    
    // 10
    // 20
    // 30
    // 40
    // 50
    // 60
    // 70
    // 80
    // 90

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

- for()문을 두 번 이상 사용하여 데이터를 불러오는 방법 입니다.
- 중첩 for()문을 사용하여 5*5의 표와 2,3,4 단을 만들어 보았습니다

// 5*5표를 만들어 보자
let table = "<table border='1'>"
        for(i=1; i< 6; i++){
            table += "<tr>"
                for(j=1; j< 6; j++){
                    table +="<td>"+j+"</td>"
                };
            table +="</tr>" 
        };
table += "</table>" 
document.write(table);
----------------------------------------------------------------------------------------
// 2-4단을 만들어 보자
for(let i=2; i < 5; i++){
    document.write(i+"단 <br>");
    for(let j=1; j < 10; j++){
        document.write(i + "*" + j +"="+ i*j +" <br>" );
    };
};

See the Pen Untitled by kebab000 (@kebab000) on CodePen.

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

- 배열을 불러오는 for문을 줄인 메서드입니다

let arr = [10,20,30,40,50,60,70,80,90]
arr.forEach(function(element){
    document.write(element);
})
-------------------------------// 화살표 함수로 줄인 내용
arr.forEach(el=>{
    document.write(el);
})

// 10 20 30 40 50 60 70 80 90
// 10 20 30 40 50 60 70 80 90

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

- 배열의 데이터를 불러오는 함수입니다.

const arr = [100, 200, 300, 400, 500, 600];
for(let i of arr){
    document.write(i);
}

// 100200300400500600

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

- 객체를 키를 불러오기 위한 문법입니다
- 요즘엔 배열에도 많이 사용합니다.

const arr = [100, 200, 300, 400, 500, 600];
for(let i in arr){ 
            console.log("a" in obj)
            document.write(i);
}

// 012345

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

- forEach문과 비슷하며, element(값) index(인덱스) array(배열)을 출력하는데 사용합니다.

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

    num.forEach(function(el){
    document.write(el , "")
    });
    }
    {
    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 200 300 400 500

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

- 배열 펼침(Spread) 연산자는 ... 기호로 표시되며, 배열이나 이터러블(iterable) 객체를 개별 요소로 분리하여 전개할 때 사용됩니다.
- 배열 펼침 연산자는 배열을 다른 배열에 병합하거나, 함수의 인수로 배열을 전달할 때 유용하게 사용됩니다.

{
    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. 배열 : 데이터 불러오기 : 배열 구조분해할당(Destruring assignment)

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

{
    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

- Object.keys/value/entries(객체명)을써서 키,값 혹은 둘다 를 불러오는 방법입니다.

{
    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: 200, c: "javascript"}
    ]
    obj.map(function(el){
        console.log(el.a);
        console.log(el.b);
        console.log(el.c);
    })
    //-------------------------화살표 함수 ver.
    obj.map((el) => {
        console.log(el.a);
        console.log(el.b);
        console.log(el.c);
    })
}

    // 100
    // 200
    // javascript
    
    // 100
    // 200
    // javascript

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

- 객체 안에 해당 데이터가 있는지 없는지 true/false로알려줍니다.

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    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);
}

    // true
    // true
    // true
    // false
    
    // true
    // true
    // true
    // false

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

- 전개구문이라고도 하며 배열처럼 값이 다양한 자료를 한꺼번에 인수로 넘겨주거나 배열과 배열을 합할 때처럼 배열을 하나의 덩어리로 처리해야 할 때 아주 유용합니다.

- 복사, 추가, 결합이 가능합니다.

// 복사
{
    const obj1 = {
        a: 100,
        b: 200,
    } 
    const spread = {...obj1};

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

// 100
// 200

// 추가
{
    const obj1 = {
        a: 100,
        b: 200,
    } 
    const spread = {...obj1, c:"javascript"};

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

    // 100
    // 200
    // javascript

// 결합
{
    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);
}
    // 100
    // 200
    // javascript
    // react

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

- 객체를 분해해서 변수화 시킨 것 입니다.

{
    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

현재글Javascript를 공부해 봅시다! - 08. 데이터 불러오기

250x250

GIT 블로그

Loading data ...

Semantic markup, id선택자, Logical sequence markup, 영알못, 기초코딩, css, coding, 블록레벨요소, 텍스트관련태그, 인라인요소, 논리적 순서 마크업, 자바스크립트, class선택자, 조금 부끄러운, 미국여행, 원시유형, 인라인 요소, html, 시멘틱마크업, 학원생활,

Today :
Yesterday :

kebab00's