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

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

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

var x = 100;                //변수 x에 숫자 100을 저장함
var y = "200";              //변수 y에 문자 200을 저장함
var z = "javascript";       //변수 z에 문자 "javascript"를 저장함

console.log(x);
console.log(y);
console.log(z);

100
200
javascript

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

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

const x = 100, y = 200, z = "javscript";

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, ["javscript","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, "javscript"];
            
console.log(arr.length);

3

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[8]);  결과 : 100 200 300 400 .......900         
                                                                 
for(let i = 0; i<9; i++){        // for(초기값; 조건식; 증감식)
    console.log(arr[i]);            // 실행문                                                                                                                              
}

100 200 300 400 500 600 700 800 900

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

for()문 안에 for()문을 넣어 반복 실행함

for(let i=1; i<=3; i++){
    console.log(i);
    for(let j=1; j<=3; j++){
        console.log(j);
    }
}

1
1
2
3
2
1
2
3

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

배열 객체의 메서드 중 하나입니다. 이 메서드를 사용하면 배열의 각 요소에 대해 콜백 함수를 실행할 수 있습니다.

let arr = [10,20,30,40,50,60,70,80,90];

//arr.forEach(function(element){      //콜백함수
//    document.write(element);
//});       
//document.write("<br>");       //화살표 함수로 코드를 줄임

//arr.forEach(el => {
//    document.write(el);
//});   
//document.write("<br>")

arr.forEach(el => document.write(el));

102030405060708090

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

추가 정리

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

//forEach
num.forEach(function(el){
    document.write(el,"<br>");
});
document.write("<br><br>");

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

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

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

//forEach (값, 인덱스, 배열)
num.forEach(function(element, index, array){
    document.write(element,"<br>");
    document.write(index,"<br>");
    document.write(array,"<br>");
})

 

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

ES6에서 도입된 반복문으로, 배열이나 이터러블 객체의 요소를 순회하는 데 사용되며, 간결하고 직관적인 코드 작성을 가능하게 합니다.

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

100200300400500

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

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

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

console.log(arr1, "<br>");
console.log(...arr1);
console.log(...arr1, ...arr2)

[100, 200, 300, 400, 500] '<b>'
100 200 300 400 500
100 200 300 400 500 600 700

13. 배열 : 데이터 불러오기 : 배열 구조할당(Destructuring 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)를 다루는 방법 중, Object 클래스에 속한 keys(), values(), 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']
[Array(2), Array(2), Array(2)]

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

JavaScript 배열 메소드 중 하나입니다. 이 메소드는 배열의 모든 요소에 대해 주어진 콜백 함수를 호출하고,

각 요소에서 반환된 결과를 새로운 배열로 반환합니다.

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

obj.map((el) => {
    console.log(el.a);
    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

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

JavaScript에서 새로 도입된 문법 중 하나로,'...' 기호를 사용하여 객체를 복사하거나 병합할 수 있습니다.

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

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

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

 

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

ECMAScript 6(ECMA-262)에서 새로 도입된 기능으로, 객체를 비구조화(destructuring)하여 

그 값들을 개별적인 변수에 할당하는 것을 말합니다.

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);
}
{
let arr1 = [100, 200, 300, 400, 500];
let arr2 = [600, 700];

console.log(arr1, "<br>");
console.log(...arr1);
console.log(...arr1, ...arr2)

100
200
javascript
(5) [100, 200, 300, 400, 500] '<br>'
100 200 300 400 500
100 200 300 400 500 600 700