데이터를 저장했으면 불러와야지! 데이터 불러오는 방법🤭

오늘은 데이터 저장하는 방법들을 알아보겠습니다~~

데이터 저장하기

👻변수 : 데이터 불러오기

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

괄호 안에 문자를 입력해 값을 불러옵니다.

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

console.log(x, y, z);

👻상수 : 데이터 불러오기

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

괄호 안에 문자를 입력해 값을 불러옵니다.

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

console.log(x, y, z);

👻배열 : 데이터 불러오기

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

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

console.log(arr[0])
console.log(arr[1])
console.log(arr[2])

👻배열 : 데이터 불러오기_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]);

👻배열 : 데이터 불러오기_갯수 구하기

length를 이용해 데이터의 갯수를 구하는 방법입니다.

배열명을 적고 ".length"를 적어줍니다.

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

console.log(arr.length)

👻배열 : 데이터 불러오기_for( ) 문

아래의 공식을 통해 데이터를 불러옵니다. 

기본적인 반복문 중 하나입니다.

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

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

for()문을 쓰면 번거로움 없이 값을 불러올 수 있습니다.

 

for()문 공식

for(초기화; 반복조건; 반복이 될 때마다 실행되는 코드){
    반복해서 실행될 코드
}

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

아래의 공식을 통해 데이터를 불러옵니다.

for문 안에 for문이 있는 방식으로 여러 개의 데이터를 불러올 수 있습니다.

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

👻배열 : 데이터 불러오기_forEach( )

forEach문은 for문을 간결하게 사용할 수 있는 메소드입니다.

기존에 for()문에 있는 초깃값이나 조건식, 증감식 등등 생략하고 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문 사용해서 출력 (el은 element를 간결하게 적은 것이다.)
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);
})

forEach문 공식

배열명.forEach(function(요소명){실행문});

👻배열 : 데이터 불러오기_for of

for문을 간결하게 쓰기 위해 생겼습니다.

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

👻배열 : 데이터 불러오기_for in

객체의 열거 가능한 '속성들'을 순회할 수 있도록 해줍니다.

객체의 key값에 접근 가능하고, value값에는 직접 접근 불가합니다.

모든 객체에서 사용 가능합니다.

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

👻배열 : 데이터 불러오기_map()

map 객체는 키-값 쌍을 저장하며 각 쌍의 삽입 순서도 기억하는 콜렉션입니다.

아무 값 (객체와 원시 값)이라도 키와 값으로 사용할 수 있습니다.

const num = [100, 200, 300, 400, 500];
            
num.map(function(el, i, a){
    console.log(el);
    console.log(i);
    console.log(a);
});

 

오늘은 이렇게 데이터 불러오는 방법들을 정리해봤습니다!

도움이 되셨다면 공감과 댓글 부탁드립니당 >0<!!