데이터 불러오기에 대해서 알아보자

1. 변수

변수 안에 저장된 데이터를 불러올 수가 있습니다.

예제로 설명하겠습니다.

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

console.log(x, y, z);
    
    // 100200javascript

let으로 변수를 정해주고, 콘솔로 불러오면 됩니다.

2. 상수

상수 안에 저장된 데이터를 불러올 수가 있습니다.

예제로 설명하겠습니다.

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

console.log(x, y, z);

    // 100200javascript

const로 변수를 정해주고, 콘솔로 불러오면 됩니다.

3. 배열

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

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

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

배열의 순으로 0부터 2까지 차례대로 불러왔습니다.

4. 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

 

배열 안에 배열이 들어가 있는 2차 배열입니다. 

값을 불러오기 위해선 순서대로 배열을 두 번 쓰면 됩니다.

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

배열 안의 데이터의 갯수를 세는 방법입니다.

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

   console.log(arr.length)    
}    
	// 3

 

배열 안의 데이터의 갯수를 모두 구하는 식입니다. 

 

예제 안의 데이터는 3개이기 때문에 답으로 3이 나옵니다.

6. 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(초기값; 조건식; 증감식;)

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

    // i는 0, i는 9보다 작으므로 true> arr[0]의 값 출력
    // i는 (i++이므로(++는 1씩 증가하는 값)) 1으로 변경되고, i는 9보다 작으므로 ture> arr[1]의 값 출력
    // 위의 과정이 i<9의 조건에 맞게 9보다 작은 값까지 출력(true인 값까지)     
}
	// 100
    // 200
    // 300
    // 400
    // 500
    // 600
    // 700
    // 800
    // 900

풀이 설명

배열 안의 데이터의 갯수를 세는 방법으로 저장된 데이터를 불러오는 방법

for( let i = 0; i<A.length; i++ ){
console.log(A.length);
}
// i=0; 0<10; A[0]=1; i=1;
// i=1; 1<10; A[0]=2; i=2;
// i=2; 2<10; A[0]=3; i=3;
// i=3; 3<10; A[0]=4; i=4;
// i=4; 4<10; A[0]=5; i=5;
// i=5; 5<10; A[0]=6; i=6;
// i=6; 6<10; A[0]=7; i=7;
// i=7; 7<10; A[0]=8; i=8;
// i=8; 8<10; A[0]=9; i=9;
// i=9; 9<10; A[0]=10; i=10;
// i=10; 10<10;

차례 대로, 0부터 집어넣고 조건을 하나 씩 맞춰주면 다음과 같은 과정을 거쳐갔다는 것을 알 수 있습니다.

7. 중첩 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

 

i값을 먼저 정해줬기 때문에 i값이 가장 처음으로 출력이 되고, 그 다음 j값이 나옵니다.

 

그렇기 때문에 i값이 한 번 출력되고 j값이 모두 출력됩니다.

 

출력은 i값이 모두 출력될 때까지 나옵니다.

8. forEach문배열 안의 데이터를 불러오는 방법입니다.

값, 자릿수, 배열 순으로 출력을 할 수 있습니다.

forEach는 콜백 함수입니다. 콜백 함수란, 다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말합니다.

콜백을 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수도 있고, 아니면 나중에 실행할 수도 있습니다.

for문과 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>");

    document.write("<br><br>");

    // for문으로 간략하게 쓸 수 있다.
    for(let i = 0; i<num.length; i++){
        document.write(num[i],"<br>");
    }
    document.write("<br><br>");

    // forEach문
    // forEach문으로 출력, 함수값을 생략해서 쓸 수 있다.
    // forEach는 메소드로, 함수값이다.
    // 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(el, index, array){
        document.write(el,"<br>");
        document.write(index,"<br>");
        document.write(array,"<br>");
    });    
}    

	// 100
    // 200
    // 300
    // 400
    // 500

    // 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

9. for of

for of문을 써서 배열에서 데이터를 불러오는 방법입니다.
최신 문법입니다.

반복 가능한 객체(iterable)를 순회할 수 있도록 해줍니다.

for ...in문이 객체의 모든 열거 가능한 속성을 대상으로 하는 것과 달리, for ...of문은 [Symbol.iterator] 속성을 가지는 것들만을 대상으로 합니다. 

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

    for(let i of arr){
        document.write(i);  //i를 다른 알파벳으로 정해도 무방하다.
    }    
}    
	// 100200300400500

 

10. for in

자릿수 값 즉, 인덱스 값이 나옵니다.

객체(키와 값) 때문에 만들었습니다. 객체의 모든 '열거할 수 있는 속성들'을 순회할 수 있도록 해준다. 

for ...in 문은 객체의 key 값에는 접근 가능하지만, value 값에 직접적으로 접근하는 방법은 제공하지 않습니다.

value값이 궁금하다면 arr[i] 와 같이 key를 이용하는 방식을 사용해 간접적으로 접근할 수 있습니다.

 

for...in 문을 사용할 때는 몇 가지 주의할 점들이 있습니다.

 

첫번째는, for ...in문에서는 순서가 보장되지 않기 때문에, 속성들 간의 순서가 중요한 경우에는 for...in문을 사용하지 않는 것이 좋다는 것입니다.

두번째는, length 연산자를 사용 할 수 없다는 것이고

세번째는, value값은 string이라 연산이 불가능하다는 것입니다.

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

 

11. map()

배열 안에 있는 데이터를 다시 배열로 만들어 줍니다.

배열에 있는 모든 요소들의 값을 변경해서 새로운 배열을 써야할 때 루프를 사용하여 수동으로 반복 처리하는 대신에 array.map()을 사용할 수 있습니다. 

이 array.map() 메소드는 콜백 함수를 이용해 각 요소에 호출해서 그 값을 변환하게 도와줍니다.

일반적으로 array.map() 메소드는 특정 숫자를 곱하거나 애플리케이션에 필요한 다른 작업을 수행하는 등 요소에 어떤 변경 사항을 적용하는 데 사용됩니다.

 

el는 element의 약자로, 값을 뜻하고, i는 index의 약자로 자릿수를 뜻합니다. a는 array의 약자로 배열을 뜻합니다.따라서, 가장 첫 번 째 값인 100이 출력되고, 자릿수의 가장 첫 번 째 값인 0이 출력되며, 배열이 출력되었습니다.그 후에는 연속적으로 그 다음 값들이 값,인덱스,배열의 순으로 출력된 것입니다.

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

    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) 최신식입니다.
배열, 객체, 문자열 등의 요소를 펼쳐서 개별요소로 분리하는 연산자입니다.

spread operator는 반복 가능한(iterable) 객체에 적용할 수 있는 문법입니다. 배열이나 문자열 등을 아래처럼 풀어서 요소 하나 하나로 전개시킬 수 있습니다.

 

...만 붙이면 자유롭게 그 객체를 펼칠 수 있어서 여러 곳에서 유용하게 사용할 수 있습니다.

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

   console.log(arr1); //배열로 불러오는 법
   console.log(...arr1); //데이터로 불러오는 법 '...'
   console.log(...arr1,...arr2); //데이터가 합쳐서 나옴
   //펼침 연산자의 기본적인 문법
}    
	// 100200300400500	
    // 100200300400500
	// 100200300400500600700

13. 배열 구조분해할당

배열의 요소를 개별 변수에 할당하는 방법 중 하나입니다.

이를 통해 벼열의 각 요소를 개별 변수로 분리해 사용할 수 있습니다.

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.

{
    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를 넣으면 이름만 불러오고, 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)); //이름과 값 모두 불러옴  
}    
	// abc
    // 100200javascript
    //a100b200cjavascript

 

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

 

변수를 정해서 객체에서 데이터를 불러올 수 있습니다.

 

const name의 값을 객체의 데이터 값으로 정해줘서 지정했습니다.

{
    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문을 쓸 수 있습니다.

값을 불러올 때 키(key) 즉 이름을 불러올지 혹은 값(obj[key])을 불러올 지를 정해서 입력해주면 원하는 값들이 출력됩니다.

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    for(let key in obj){
        console.log(key); //키 즉, a,b,c가 옴
        console.log(obj[key]); //값이 옴
    }
}    
	// abc
    // 100200javascript

 

18. map( )

객체에서 map문도 쓸 수 있습니다.배열 안에 객체를 넣어서 불러올 수 있다는 뜻입니다.map을 쓰는 방식을 잘 기억해서 헷갈리지 않도록 element를 잘 써주고, 객체에서 쓰던 형식을 이용해서 .키 값을 잘 써줍니다.

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

    obj.map(function(el){   		// obj.map((el) => {})와 같음(화살표 함수)
            console.log(el.a)
            console.log(el.b)
            console.log(el.c)
    });
    //배열 안에 객체를 넣어서 불러옴
}
	// 100
    // 200
    // javascript

 

19. hasOwnProperty( )

객체에 지정된 이름을 가진 속성이 있는지 여부를 반환하는 함수입니다.

'own' 의 의미는 프로토타입 체인이 아닌, 객체 자체가 해당 속성을 가지고 있는지 여부를 나타내는듯 합니다.

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

 

객체 안에 데이터의 키가 a,b,c이기 때문에 셋을 부른 식은 true값을 출력했지만, 그렇지 않은 식은 false를 출력했습니다.

20. 객체 펼침연산자

예제로 설명하겠습니다.순서대로, 기본적인 펼침 연산자와 데이터를 추가한 펼침 연산자 그리고 객체를 추가한 펼침 연산자를 예로 들겠습니다.배열에서 사용했던 것처럼 ...을 사용해서 써주면 됩니다.데이터를 추가해서 쓰는 것처럼 객체도 더 추가할 수가 있습니다.배열과 다르게 객체는 추가를 하는 데에 부담이 덜합니다.

{	 // 기본적인 펼침 연산자 
    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"} //데이터 추가도 가능

    console.log(spread.a);
    console.log(spread.b);
    console.log(spread.c);
    console.log(spread.d);
   // 100
   // 200
   // javascript
   // react
   
   // 데이터와 마찬가지로 객체도 추가 가능   
    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. 객체 구조분해할당

 

배열에서 쓴 것과 같이 객체에서도 구조분해할당을 쓸 수 있습니다.

구조분해할당은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    const {a, b, c} = obj;                                  
                                    
    console.log(a); //키 값을 그대로 써줘야 출력됨
    console.log(b);
    console.log(c);

    // {a:name1, b:name2, c:name3} 으로 쓸 수도 있음

    // console.log(name1);
    // console.log(name2);
    // console.log(name3);
}    
	// 100
    // 200
    // javascript