데이터 불러오기

코딩/Javascript

데이터 불러오기

우당당쿵당콩탕 2023. 3. 6. 21:14

728x90

데이터 불러오기

자바스크립트 내에서 데이터를 불러오는 방법은 다양하게 존재합니다.

변수인지, 상수인지 혹은 배열인지 객체인지에 따라 달라지는 데이터 불러오기!

오늘 완벽하게 정리해보도록 하겠습니다.

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

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

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

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

//결과값 100, 200, javascript

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

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

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

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

//결과값 100, 200, javascript

3. 배열 : 데이터 불러오기 : 기본형식

여러 개의 배열된 데이터를 불러오는 방법입니다.

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

    console.log(arr[0], arr[1], arr[2]);
}

//결과값 100, 200, javascript

3 - 1. 배열 : 데이터 불러오기 : 2차 배열

배열 안에 배열이 있는 데이터를 불러오는 방법입니다.
ex) const 키 = [값1, 값2, [값3, 값4]] / 값3 : console.log(arr[2[0]]); / 값4 : console.log(arr[2[1]]);

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

    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2][0]); // 세 번째 배열이 2, 그 배열 안의 자바스크립트가 0이기 때문에 [2][0]
    console.log(arr[2][1]);
}

//결과값
//100
//200
//javascript
//react

3 - 2. 배열 : 데이터 불러오기 : 갯수 구하기

배열 안의 불러오는 데이터의 값의 갯수를 구하는 방법입니다. ex) console.log(키.length);

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

    console.log(arr.length);
}

//결과값 3

3 - 3. 배열 : 데이터 불러오기 : for문

기본 문법 :for(초기값; 조건식; 증감식;){실행문}

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

    for(let i = 0; i<9; i++) {
        console.log(arr[i]);
    }   
 }
 
//초기값(i=0); 조건식(i<9); 증감식(i++) ->i++ 는 i가 1씩 증가
//i = 0, true, clg 실행 -> i 1증가 ====> i<9가 false가 될 때까지 반복.
//i<9 가 false가 되는 부분은 i = 8 이므로 arr[8]까지만 작업
//i=0; 0<9; console.log(arr[0]); i++
//i=1; 1<9; console.log(arr[1]); i++
//i=2; 2<9; console.log(arr[2]); i++ 계속 반복 (조건이 맞는 값까지)
//i=9; 9<9; 조건에 맞지 않으므로 end;

3 - 4. 배열 : 데이터 불러오기 : 중첩 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);
        }
    }
}

//결과값
//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

3 - 5 배열 : 데이터 불러오기 : forEach( )문

forEach문을 사용하기 위해서는 배열의 데이터가 존재해야합니다.

forEach문은 element(값), index(인덱스), array(배열)을 불러오는 특징이 있습니다.

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

    num.forEach(function(element, index, array){
        document.write(element, "<br>");
        document.write(index, "<br>");
        document.write(array, "<br>");
    });
}

//결과
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을 먼저 출력하고 그 뒤에 인덱스, 배열 순을 반복한다.

+ forEach 문의 화살표 함수

화살표 함수로 축약할 수 있습니다. 전부 같은 함수이기 때문에 꼭 기억하기!

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

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

3 - 6 배열 : 데이터 불러오기 : for of

for of문은 element 값을 출력하는데 사용됩니다.

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

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

//결과값
100, 200, 300, 400, 500

3 - 7 배열 : 데이터 불러오기 : for in

for in문은 인덱스를 출력하는데 사용되나 element 값도 출력할 수 있습니다.

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

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

//결과값
0, 1, 2, 3, 4

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

//결과값 
100, 200, 300, 400, 500

3 - 8 배열 : 데이터 불러오기 : map()

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

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

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

+map() 화살표 함수

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

	//기본
    num.map(function(el){
        document.write(el);
    });

    //화살표 함수
    num.map((el) => {
        document.write(el);
    });

    //map문 : 화살표 함수 : 괄호 생략
    num.map(el => {
        document.write(el);
    });

    //map문 : 화살표 함수 : 괄호 생략 + 중괄호 생략
    num.map(el => document.write(el));
}

3 - 8 배열 : 데이터 불러오기 : 배열 펼침연산자(Spread Operator)

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

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

    console.log(arr1,"<br>"); // [] 배열 자체를 불러온다.
    console.log(...arr1,);    // ...을 붙이면 각 데이터만을 불러온다 ex) 100 200 300 400 500
    console.log(...arr1, ...arr2) // 두 개의 배열을 합쳐서 데이터만을 불러온다.
}

//결과값
100, 200, 300, 400, 500
100, 200, 300, 400, 500
100, 200, 300, 400, 500, 600, 700

3 - 9 배열 : 데이터 불러오기 : 배열 구조 분해 할당(Destructuring assignment)

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

{
    let a, b, c;

    [a, b, c] = [100, 200, "javascript"];   // 앞이 키 뒤에가 값이 되는 형식

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

//결과값
100
200
javascript

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

객체를 불러오는 가장 기본적인 형식입니다.

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

//결과값
100
200
javascript

4 - 1. 객체 : 데이터 불러오기 : object

객체 데이터의 키나 값, 키와 값을 불러오는 방법입니다.

{
    const obj = {
        a:100,
        b:200,
        c:"javascript"
    }
    
    console.log(Object.keys(obj));  // a, b, c 앞(키)의 값을 불러오는 방법
    console.log(Object.values(obj));  // 100, 200, "javascript" 뒤(값)의 값을 불러오는 방법
    console.log(Object.entries(obj));  // 전체(키,값)를 불러오는 방법 *
}

//결과값
a, b, c
100,200,javascript
a,100,b,200,c,javascript

4 - 2. 객체 : 데이터 불러오기 : 변수

객체의 키와 값을 변수로 설정해서 출력값을 변수에 입력해 불러오는 방식입니다.

{
    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

4 - 3. 객체 : 데이터 불러오기 : for in

for in문을 사용해 객체의 데이터를 불러오는 방법입니다.

{
    const obj = {
        a: 100,
        b: 200,
        c: "jabascript"
    }
    for(let key in obj){
        console.log(key);       //키
        console.log(obj[key]);  //값
    }
}

//결과값
a, 100, b, 200, c, javascript

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

데이터가 배열로 되어있고 그 안에 객체가 있을 때 사용되는 방식입니다.

{
    const obj = [
      {a: 100, b: 300, c: "javascript"}
    ]
    obj.map(function(el){        // el은 100 200 자바스크립트가 아니라 앞의 obj이므로 위의 const obj와 같다.
        console.log(el.a)         // 그러므로 a값을 불러오려면 .a를 붙여주어야 한다.
        console.log(el.b)         
        console.log(el.c)         
    });

    //화살표 함수
    obj.map((el) => {        
        console.log(el.a)         
        console.log(el.b)         
        console.log(el.c)         
    });
}

4 - 5. 객체 : 데이터 불러오기 : hasOwnProperty()

데이터의 존재 여부를 true와 false로 알려줍니다.

 {
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    console.log(obj.hasOwnproperty("a")); //obj에 a라는 데이터가 있는가 true
    console.log(obj.hasOwnproperty("b")); //obj에 b라는 데이터가 있는가 true
    console.log(obj.hasOwnproperty("c")); //obj에 c라는 데이터가 있는가 true
    console.log(obj.hasOwnproperty("d")); //obj에 d라는 데이터가 있는가 false

    //축약
    console.log("a" in obj); // obj 안에 (in) a가 있느냐.
}

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

펼침 연산자는 자바스크립트에서 배열, 객체, 문자열 등의 요소를 펼쳐서 개별 요소로 분리하는 연산자입니다.
데이터를 추가해서 불러올 수 있고, 두 개의 데이터를 합칠 수도 있습니다.

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

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

//결과값
100
200
javascript

//데이터를 추가하여 출력할 수 있습니다.
{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    const spread = {...obj, d:"react"} // 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
}

4 - 7. 객체 : 데이터 불러오기 : 객체 구조분해할당(Destructuring assignment)

객체의 속성들을 변수로 분해하여 할당하는 것을 의미합니다.

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

    const {a, b, c} = obj;

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

//결과값
100
200
javascript

현재글데이터 불러오기

300x250

시작하자 코딩

GIT 블로그

CSS #IT #코딩, 모던자바스트립트 #예제 #자바스크립트 #제이슨 #json, CSS #CSS애니메이션, 자바스크립트 #문자열 #문자열 객체 #기본 #기초 #이론 #코딩, 자바스크립트 #정답 #퀴즈 #함수, 자바스크립트 기초 #자바스크립트 문제 #데이터 # 자바스크립트 #함수 #예제 #문제 #기능사, match(), 고양이 #미르 #다온, 웹디자인 #실기 #웹디자인 실기 #HTML #CSS #웹스토리보이 #inline #padding, 자바스크립트 #정보처리기능사 #퀴즈만들기 #함수 #선택자 #기초 #기본, 웹 페이지 디자인 #웹 #웹 개발, 문자열 객체 #endsWith() #메소드 #자바스크립트, lastindexof, 배열 #객체 #자바스크립트 #자료형 #원시 유형 #문자열 #논리형, 자바스크립트 #기초 #코딩 #함수 #개발 #테스트 #기초, 마크업 #HTML #CSS #IT #퍼블리셔 #웹 #웹코딩 #시멘틱 마크업, includes, 코딩 #웹퍼블리셔 #HTML #CSS #코딩시작 #기초 #인라인 #블록 #Inline Block #Block-leverl Elements #Inline Element, 자바스크립트 #이펙트, indexof(),

Today :
Yesterday :

일	월	화	수	목	금	토
					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

우당탕탕 코딩생활

데이터 불러오기

데이터 불러오기

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

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

3. 배열 : 데이터 불러오기 : 기본형식

3 - 1. 배열 : 데이터 불러오기 : 2차 배열

3 - 2. 배열 : 데이터 불러오기 : 갯수 구하기

3 - 3. 배열 : 데이터 불러오기 : for문

3 - 4. 배열 : 데이터 불러오기 : 중첩 for문

3 - 5 배열 : 데이터 불러오기 : forEach( )문

+ forEach 문의 화살표 함수

3 - 6 배열 : 데이터 불러오기 : for of

3 - 7 배열 : 데이터 불러오기 : for in

3 - 8 배열 : 데이터 불러오기 : map()

+map() 화살표 함수

3 - 8 배열 : 데이터 불러오기 : 배열 펼침연산자(Spread Operator)

3 - 9 배열 : 데이터 불러오기 : 배열 구조 분해 할당(Destructuring assignment)

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

4 - 1. 객체 : 데이터 불러오기 : object

4 - 2. 객체 : 데이터 불러오기 : 변수

4 - 3. 객체 : 데이터 불러오기 : for in

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

4 - 5. 객체 : 데이터 불러오기 : hasOwnProperty()

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

4 - 7. 객체 : 데이터 불러오기 : 객체 구조분해할당(Destructuring assignment)

'코딩/Javascript'의 다른글

티스토리툴바

데이터 불러오기

데이터 불러오기

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

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

3. 배열 : 데이터 불러오기 : 기본형식

3 - 1. 배열 : 데이터 불러오기 : 2차 배열

3 - 2. 배열 : 데이터 불러오기 : 갯수 구하기

3 - 3. 배열 : 데이터 불러오기 : for문

3 - 4. 배열 : 데이터 불러오기 : 중첩 for문

3 - 5 배열 : 데이터 불러오기 : forEach( )문

+ forEach 문의 화살표 함수

3 - 6 배열 : 데이터 불러오기 : for of

3 - 7 배열 : 데이터 불러오기 : for in

3 - 8 배열 : 데이터 불러오기 : map()

+map() 화살표 함수

3 - 8 배열 : 데이터 불러오기 : 배열 펼침연산자(Spread Operator)

3 - 9 배열 : 데이터 불러오기 : 배열 구조 분해 할당(Destructuring assignment)

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

4 - 1. 객체 : 데이터 불러오기 : object

4 - 2. 객체 : 데이터 불러오기 : 변수

4 - 3. 객체 : 데이터 불러오기 : for in

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

4 - 5. 객체 : 데이터 불러오기 : hasOwnProperty()

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

4 - 7. 객체 : 데이터 불러오기 : 객체 구조분해할당(Destructuring assignment)

'코딩/Javascript'의 다른글

관련글

티스토리툴바