[JAVASCRIPT] 데이터를 불러오는 방법 진짜최최최종.zip

무근본 일반인 2023. 3. 6. 20:48

2023. 3. 6. 20:48

728x90

변수 : 데이터 불러오기

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

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

    console.log(x, y, z);

100

200

javascript

console.log나 document.write를 사용하여 선언한 변수를 불러올 수 있다.

변수는 ( ) 소괄호를 사용하여 불러온다.

상수 : 데이터 불러오기

:상수 안에 저장된 데이터를 불러오는 방법

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

    console.log(x, y, z);

100

200

javascript

상수의 값은 변하지 않는다.

상수의 값을 재선언할 시, 오류 창이 뜨며 결과값이 출력되지 않는다.

배열 : 데이터 불러오기

:배열 안에 저장 된 데이터를 불러오는 방법

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

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

100

200

javascript

출력문에 반드시 배열을 뜻하는 arr[ ]를 추가 시켜야 한다.

변수나 상수와 다르게 x, y, z 등의 문자를 키로 사용하지 않고 숫자(0, 1, 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]);

100
200
javascript
react

javascript와 react는 [2]번 키 안에 들어있는 2차 배열이다.

일반 배열처럼 arr[키]만 적어주게 되면 값이 아니라 배열 자체가 불러와지므로, arr[큰 배열의 키][작은 배열의 키]의 형식으로 출력문을 작성해 주어야 한다.

배열 : 데이터 불러오기 (갯수 구하기)

:배열 안에 들어있는 값의 갯수를 구하는 방법

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

    console.log(arr.length)

출력문 안에 arr[키] 대신 길이, 범위 등을 뜻하는 length를 넣어 배열이 얼마나 긴지, 즉 배열 안에 값이 몇 개가 들어있는지를 불러올 수 있다.

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

:for문을 사용하여 배열 안에 있는 여러 개의 데이터를 불러오는 방법.

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

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

100, 200, 300, 400, 500, 600, 700, 800, 900

for문을 통해 다수의 console.log 없이 배열에 저장된 많은 데이터를 불러올 수 있다.

for문을 사용하지 않으면 1번처럼 여러 개의 출력문을 일일히 작성해주어야 하지만, 반복문을 사용하면 여러 개의 출력문을 작성할 필요 없이 데이터를 불러올 수 있다.

for문은 i 값이 참이어야만 i가 증가하며, 증가한 식은 출력문을 통해 출력된다.

2번 식 같은 경우, 등호가 존재하지 않아 i값이 9가 되면 조건문이 거짓이 되어 식이 자동으로 종결된다.

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

:for문 안에 for문이 또 있는 구조로, 첫번째 for문이 1번 반복될 동안, 안에 있는 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:10 / j:1, j:2, j:3, j:4, j:5, j:6, j:7, j:8, j:9, j:10

for문을 중첩하여 사용하기 때문에 여러 개의 식을 반복할 수 있다.

먼저 오는 for문이 큰 단락이 되며, 두 번째로 오는 for문은 그 안의 내용이 된다.

이 식 같은 경우, 첫번째 for문 (i)가 1번 반복되는 동안, 두번째 for문(j)는 10번 반복된다.

중첩 for문은 for문 안의 변수를 서로 다른 것으로 선언해야 한다.

변수는 값이 변경될 수 있기 때문이다.

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

:배열 메소드(Method)^[각주:1] 중 하나로, 반복문을 사용하여 배열의 요소에 하나씩 접근하여 각 요소에 대해 주어진 함수를 호출한다.

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 (element)
0 (index)
100,200,300,400,500 (array)

200(element)
1 (index)
100,200,300,400,500 (array)

300(element)
2 (index)
100,200,300,400,500 (array)

400(element)
3 (index)
100,200,300,400,500 (array)

500(element)
4 (index)
100,200,300,400,500 (array)

배열에서만 사용할 수 있다는 특징이 있다.

또한 값, 요소값, 인덱스값(키), 배열을 불러올 수 있다는 특징이 있다.

forEach문은 화살표 함수로 간단하게 표현할 수도 있으며, 배열의 요소를 가져와서 함수를 실행해야 할 때, 배열 안에 저장된 데이터가 많을 때 등의 상황에서 주로 사용한다.

forEach문 앞에 배열 이름을 붙여주어야 하며, 출력문에 arr[변수] 형식을 사용하지 않고

출력하고 싶은 것이 요소인지, 배열인지, 키인지에 따라 출력문에 들어가는 구문이 달라진다.

배열 : 데이터 불러오기 (for of)

:반복 가능한 자료(배열, 객체 등)를 순회할 때 사용하는 반복문이다.

 const arr = [100, 200, 300, 400, 500];
            
    for(let i of arr) {                                 //타겟, 대상을 정해준 다음 그 값을 i라고 선언하는 것.
        document.write(i,",");
    }

100,200,300,400,500,

arr 안에 배열 값이 있는 동안 계속 반복되는 반복문으로, (let 값 of 반복 가능한 자료)의 형식을 가지고 있다.

출력해야할 타겟, 대상을 정하여 변수 선언을 해주어야 하며, 출력문에는 변수 이름을 넣어주어야 한다.

for문과는 다르게 인덱스(index)나 조건식을 사용하지 않고, 객체의 값을 직접 가져와서 처리할 수 있다.

객체의 요소를 하나씩 순회하며 각 요소를 처리하는 용도로 사용된다.

배열 : 데이터 불러오기 (for in)

:객체의 속성을 순회할 때 사용되는 반복문.

객체의 속성을 하나씩 순회하며, 각 속성의 키(이름)을 가져올 수 있다.

const arr = [100, 200, 300, 400, 500]
    for (let i in arr) {                            //index, 즉 자리값이 출력됨.
        document.write(i); or document.write(arr[i]);
    }

01234 or 100 200 300 400 500

객체의 속성을 하나씩 순회하며 각 속성을 처리하는 용도로 사용된다.

for in문은 배열이나 문자열과 같은 다른 자료형에서는 사용할 수 없다.

객체의 키만 가져올 수 있으므로 해당 키의 값에 접근하려면 대괄호 [ ]를 사용한다.

출력문 안에 arr[i]를 넣을 시, 값이 출력되나,i만 작성시 값이 출력되지 않고 키만 출력된다.

배열을 순회할 때는 for of를 사용하고 문자열을 순회할 때는 for of나 for문을 사용해야 한다.

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

: 배열 안의 데이터를 다시 배열로 만드는 메소드(method)이다.

const num = [100, 200, 300, 400, 500]
    num.map(function(el, i, a){
        document.write(el,"<br>")
        document.write(i,"<br>")
        document.write(a,"<br>")
    });

100(el)
0(i)
100,200,300,400,500(a)
200(el)
1(i)
100,200,300,400,500(a)
300(el)
2(i)
100,200,300,400,500(a)
400(el)
3(i)
100,200,300,400,500(a)
500(el)
4(i)
100,200,300,400,500(a)

배열의 각 요소를 순회하며 콜백 함수를 실행하고 그 결과를 모아서 새로운 배열을 만든다.

기존 배열을 변경하지 않고 새로운 배열을 만들 수 있다.

배열 요소를 순회하며 어떤 계산을 수행하거나 요소를 다른 형태로 변환할 수 있다.

문자열의 배열에서 각 문자열의 길이를 구하거나 객체·배열에서 특정 속성값을 추출하여 새로운 배열을 만들 때 주로 사용된다.

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

:배열에 포함된 항목을 목록으로 바꾸어 주는 연산자

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

     console.log(arr1);
     console.log(...arr1,);
     console.log(...arr1, ...arr2);

arr1 : [100, 200, 300, 400, 500]

...arr1: 100, 200, 300, 400, 500

...arr1, ...arr2: 100, 200, 300, 400, 500, 600, 700, 800, 900

펼침연산자: spread operator

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

대괄호 안에서 배열의 요소를 중괄호 안에서 객체의 속성을 문자열에서는 문자열을 개별 문자로 분리할 수 있다.

배열 : 데이터 불러오기 (배열 구조분해할당)

:배열의 요소를 분해하여 여러 변수에 할당할 수 있다.

let a, b, c;

    [a, b, c] = [100, 200, "javascript"];

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

100
200
javascrpt

배열의 요소를 개별 변수에 할당하는 방법 중 하나이며, 배열의 각 요소를 개별 변수로 분리하여 사용할 수 있다.

배열 구조 분해 할당은 대괄호[ ]를 사용하여 구현한다.

변수의 선언과 할당을 동시에 처리할 수 있다.

배열 구조 분해 할당을 사용하여 변수를 처리할 수도 있다.

또한 기존에 존재하는 변수에도 값을 할당할 수 있다.

배열 구조분해할당을 사용하면 변수를 일일히 선언하거나 값을 할당하는 코드를 줄일 수 있다.

함수의 매개변수에서도 사용할 수 있으며, 배열이나 객체의 중첩된 값에도 적용할 수 있다.

객체: 데이터 불러오기

:객체 안이 있는 값을 .(온점)을 찍어 불러오는 방법

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

100
200
javascrpt

객체의 속성 값에 직접 접근하는 방법 중 하나로, 객체 이름 뒤에 .(온점)을 찍고 접근하고자 하는 속성의 이름을 작성한다.

객체 : 데이터 불러오기 (Object)

:객체 안에 있는 값을 object를 사용하여 불러오는 방법.

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

Object.keys(obj) : a, b, c
Object.values(obj): 100, 200, javascript
Object.entries(obj): ['a', 100] / ['b', 200] / ['c', 'javascript']

console.log(Object.keys(obj)); //객체의 키를 불러오는 문법

console.log(Object.values(obj)); //객체의 값을 불러오는 문법

console.log(Object.entries(obj)); //객체의 배열 자체를 불러오는 문법

객체 : 데이터 불러오기 : 변수를 통해 불러오기

:객체 안에 있는 값을 변수처럼 선언하여 불러오는 방법.

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

객체의 속성 이름을 변수에 저장하여 해당 변수를 이용해 속성에 접근하여 값을 불러올 수 있다.

obj 객채에 접근하여 안에 있는 a, b, c 각 속성의 값을 각각 name1, name2, name3 변수에 할당하고

각 변수의 값을 출력하는 방식이다.

obj.a에서 obj는 객체를 의미하고 a는 속성값을 의미한다.

객체 : 데이터 불러오기 (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

for in문은 객체 obj의 속성 이름을 순회하면서 각 속성 이름을 변수 key에 할당한다.

그리고 obj[key]를 사용하여 key에 해당하는 속성 값을 출력한다.

따라서 console.log(key)는 각 속성의 이름(a, b, c)을 출력하고,

console.log(obj[key])는 각 속성의 값(100, 200, "javascript")을 출력하게 된다.

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

:객체 안에 있는 값을 map()을 사용하여 불러오는 방법.

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

100
200
javascript

obj 배열은 하나의 객체를 요소로 가지고 있으므로, map() 메소드는 해당 객체를 매개변수 el로 받아서 각 속성의 값을 출력한다.

따라서 console.log(el.a)는 객체의 a 속성 값(100)을 출력하고, console.log(el.b)는 b 속성 값(200)을 출력하고,

console.log(el.c)는 c 속성 값("javascript")을 출력한다.

배열 안에 객체가 있어야만 map()을 사용할 수 있다.

배열이 없이 객체만 있다면 "Uncaught TypeError: obj.map is not a function"obj.map()이 함수가 아니라는 경고창이 표시되기 때문에

객체가 배열 안에 있는지를 주의하여 확인해야 한다.

객체 : 데이터 불러오기 (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

true
true
true
false

hasOwnProperty() 메소드(Method)는 객체가 특정 속성(데이터)의 유무를 검사하는 자바스크립트 내장 메소드이다.

해당 메소드는 객체에 직접 접근하여 사용할 수 있으며, 결과값은 true(일치하는 속성이 있을 시)나 false(일치하는 속성이 존재하지 않을 시)만을 반환한다.

hasOwnProperty()는 객체의 속성을 검사하지만, 다른 객체나 상속받은 속성은 검사하지 않는다.

객체의 속성을 정확하게 확인하는데 유용하다.

기본적으로는 console.log(obj.hasOwnProperty("검사할 속성의 이름"));의 형태를 가지지만,

console.log("검사할 속성의 이름" in obj);처럼 약식으로 표현할 수도 있다.

객체 : 데이터 불러오기 (객체 펼침연산자)

:객체 내의 속성들을 개별적인 값으로 분해하지 않고도 객체에 값을 추가하거나 덮어씌울 수 있다.

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

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

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

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

1. 100, 200, javascript
2. 100, 200, javascript, react
3. 100, 200, javascript, react

자바스크립트의 새로운 기능 중 하나로, ...로 표현된다.

객체 펼침 연산자를 사용하면 객체 내의 속성들을 개별적인 값으로 분해하지 않도고 객체를 간단히 복제하거나,

새로운 객체를 만들 때 속성을 추가하고 덮어쓸 수 있다.

1. 객체 펼침연산자를 사용하여 obj 객체를 복사한 수 spread 변수에 할당하는 코드이다.

spread 변수는 obj 객체와 동일한 속성(a, b, c)를 가지고 있다.

2. obj 객체를 복제하고 d라는 새로운 속성을 추가한 후, 변수에 할당한다.

따라서 처음에 선언된 객체에 존재하지 않았던 d의 값이 출력된다.

3. 객체 펼침 연산자를 사용하여 obj1 객체와 obj2 객체를 합친 뒤 변수에 할당한다.

spread 변수는 obj1, obj2 객체의 모든 속성을 가지고 있다.

따라서 obj1에 할당되지 않았던 c값과 d값이 추가되어 출력되며, obj2에 할당되지 않았던 a값과 b값이 추가되어 출력된다.

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

:객체를 분해하여 개별적인 변수에 할당하는 것.

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

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

console.log(x);         //undefind (키값을 그대로 써주어야 함)

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

1. 100, 200, javascript
2. 100, 200, javascript

자바스크립트의 새로운 기능 중 하나로, 객체를 분해하여 개별적인 변수에 할당하는 것이다.

객체구조분해할당은 객체에서 필요한 속성들만 추출하여 변수에 할당할 때 유용하며,

코드의 가독성과 유지보수성을 높여준다는 장점이 있다.

객체의 속성들이 많아지면 개별 변수에 할당하는 것이 코드를 간결하게 만들기 때문이다.

또한 객체구조분해할당은 기본값을 설정할 수도 있다.

1. 객체에서 a, b, 속성을 추출하여 각각 a, b, c 변수에 할당한다.

따라서 console.log(a)는 100을 출력하고, console.log(b)는 200을, console.log(c)는 javascript를 출력한다.

2. 객체에서 a, b, c, 속성의 값을 각각 name1, name2, name3 상수에 할당한 뒤, console.log를 사용하여 상수의 값으로 출력한다.

자바스크립트가 자주 쓰이는 구문을 만들어 놓은 것. 함수와 같은 개념으로 생각하면 좋다. [본문으로]

Fiat Lux