개발냄새

javascript

Javascript : 데이터 불러오기

IC 2023. 3. 6.

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

변수 안에 저장된 데이터를 불러오는 방법입니다. let을 한 번 언급했다면 그 다음부터는 생략합니다.

{
    let x=100, y=200, z="javascrip
    
    console.log(x, y, z);
}
위 코드는 변수'x'에는 100, 변수'y'에는 200, 변수'z'에는 "javascript" 문자열이 할당되어 있는 상태 입니다.
console.log() 함수를 사용하여 각각의 변수에 할당된값을 출력하고있습니다.

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

상수안에 저장된 데이터를 불러오는 방법입니다. const를 한번 언급했다면 그다음부터는 생략합니다.

{
    const x=100, y=200, z="javascript";
                            
    console.log(x, y, z);
}
 
위 코드는 상수'x'에는 100, 상수'y'에는 200, 상수'z'에는 "javascript" 문자열이 할당되어 있는 상태 입니다.
console.log() 함수를 사용하여 각각의 변수에 할당된값을 출력하고있습니다.

03. 배열 : 데이터 불러오기

배열안에 저장된 데이터를 불러오는 방법입니다. 배열 괄호 안의 첫 번째 칸은 arr[0]부터 시작합니다.

{
    const arr = [100, 200, "javascript"];
                                    
    console.log (arr[0], arr[1], arr[2]);
}
위 코드는 배열 arr에 100, 200, "javascript"가 할당 되어있는 상태입니다.
console.log 함수를 사용하여 배열안에 각각에 할당된값을 출력하고 있습니다.

04. 배열 : 데이터 불러오기 : 2차 배열

배열 안에 배열이 있는 방식의 2차 배열이며 출력시 arr[2][0] 이런식으로 입력합니다..

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

    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2][0]);
    console.log(arr[2][1]);
}
위 코드는 num 변수의 값에 따라 실행되는 if 문과 else if 문의 예시입니다.
변수 num의 값이 90이므로 첫 번째 조건인 if (num == 90)이 참이 되어 "실행되었습니다(num == 90)"가 출력됩니다.
다른 조건문은 실행되지 않습니다.
else if 문은 if 문과 함께 사용하여 여러 조건을 검사하고, 각 조건에 맞게 실행할 코드를 작성할 수 있습니다.
이 경우 if 문이 참이 아닐 때 해당 else if 조건문을 검사합니다.
만약 이전의 if 문이 참이라면 다음 조건은 검사되지 않고, 바로 실행문이 실행됩니다.
마지막 else는 모든 조건에 해당하지 않을 경우 실행되는 부분입니다.

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

배열에서 데이터의 갯수를 구할때 length를 사용하면 된다.

{
    const arr = [100, 200, "javascript"];
                                            
    console.log(arr.length)
}
이 코드는 중첩 if 문을 사용하여 구성된 예시입니다.
코드를 간단히 설명하면, num 변수가 100인 경우에 대해 if 문을 사용하여 3개의 문자열을 출력하고,
그렇지 않은 경우에는 하나의 문자열을 출력합니다.
여기서 주목할 점은, if(num == 100) 문장이 3번 중첩되어 있다는 것입니다.
이렇게 중첩된 if 문은 코드의 가독성을 떨어뜨릴 수 있으므로, 필요한 경우에 한해서 사용해야 합니다.

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

for문을 이용하여 데이터를 불러오는방법

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

    //for (초기값 i=0 ; 조건식 0i<9 ; 증감식 i++;)    

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

    //for문 실행순서
    // let i = 0;▶ 1번
    // i < 9; ▶ 2번
    // console.log(arr[i]) ▶ 3번
    // i++ ▶4번

    //01. let i = 0;                                                
    // 변수 i 선언 및 값을 0으로 선언                                    
    //02. i<9;                                                   
    // 조건 실행, i가 9보다 작을동안 명령문을 실행 ,현재 0      
    //03. console.log(arr[i]); 
    // 2번에서 조건실행 하므로 콘솔창에 100출력
    //04. i++ 
    // 증감식을 실행하므로 i값은 0에서 1로 변경
    //05. let i = 1; 
    // 증감식을 실행하므로 0 에서 1로 변경
    //06. i<9;
    // 조건실행, i가 9부도 작을동안 명령문을 실행 , 현재 1
    //07. console.log(arr[i]); 
    // 05번에서 조건실행 하므로 콘솔창에 200출력
    //08. i++ 
    // 증감식을 실행하므로 i값은 1에서 2로 변경
    //09. (반복)

    // i=0; 0<9; console.log(arr[0]); i++   //100
    // i=1; 1<9; console.log(arr[0]); i++   //200
    // i=2; 2<9; console.log(arr[0]); i++   //300
    // i=3; 3<9; console.log(arr[0]); i++   //400
    // i=4; 4<9; console.log(arr[0]); i++   //500
    // i=5; 5<9; console.log(arr[0]); i++   //600
    // i=6; 6<9; console.log(arr[0]); i++   //700
    // i=7; 7<9; console.log(arr[0]); i++   //800
    // i=8; 8<9; console.log(arr[0]); i++   //900
    // i=9; 9<9; END
]

 

for문은 컴퓨터 프로그래밍에서 반복 작업을 수행하는데 사용되는 제어 구조입니다.
일반적으로 특정 횟수만큼 작업을 반복하거나 컬렉션(배열, 리스트 등)의 모든 항목을 반복 처리하는 데 사용됩니다.

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

for문 안에 for문이 들어가있는 구조

{
    for( let i=1; i<=10; i++ ){ //let은 생략이 가능하나 자바스크립트에서는 써주는편
    console.log("i : " + i);  //https://webzz.tistory.com/68
    for( let j=1; j<=10; j++){
    console.log("j : " + j);
        }
    } 
}
 
중첩 for문은 for문 안에 또 다른 for문을 넣어서 반복 작업을 수행하는 것을 말합니다.
중첩 for문은 복잡한 작업을 수행할 때 유용합니다.
예를 들어, 2차원 배열의 모든 요소를 처리할 때 사용됩니다

08. 배열 : 데이터 불러오기 : foreach()

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],"");   

    document.write("");

    //for문으로 간단히 출력
    for(let i=0; i<num.length; i++) {
        document.write(num[i],"");
    }

    document.write("");

    //forEach로 출력 (배열에 있는데이터 반복시킬때 사용함)
    num.forEach(function(el){
        document.write(el, "")
    });

    document.write("");

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

    document.write("");

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

    document.write("");


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

    document.write("");

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

 

이 코드는 주어진 배열 num에 대해 다양한 방식으로 반복문을 이용하여 출력하는 코드입니다.

다음은 코드 전체를 요약한 내용입니다.

num 배열에 100, 200, 300, 400, 500의 값이 할당되어 있습니다.
document.write()를 사용하여 배열의 각 요소들을 인덱스를 이용하여 출력합니다.
for문을 사용하여 배열의 각 요소들을 출력합니다.
forEach() 메소드를 사용하여 배열의 요소들을 출력합니다.
화살표 함수를 이용하여 forEach() 메소드를 실행합니다.
화살표 함수에서 인자가 하나일 때 괄호를 생략할 수 있습니다.
화살표 함수에서 중괄호가 한 줄일 때는 중괄호를 생략할 수 있습니다.
forEach() 메소드는 콜백함수에 현재 요소의 값, 인덱스, 전체 배열을 인자로 받을 수 있습니다.
모든 출력 방법이 동일한 결과를 출력하며, forEach() 메소드를 사용하는 방법이 가장 간단하면서도 가독성이 좋은 방법입니다.

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

배열에서 데이터의 갯수를 구할때 length를 사용하면 된다.

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

    for(let i of arr){ //arr의 값을 변수 i라고 지정해준것
        document.write(i,""); 
    }
}
document.write("");

 

이 코드는 for...of 루프를 사용하여 배열 arr의 요소들을 반복문을 이용하여 출력하는 코드입니다.

다음은 코드 전체를 요약한 내용입니다.

arr 배열에 100, 200, 300, 400, 500의 값이 할당되어 있습니다.
for...of 루프를 사용하여 arr의 요소들을 반복문으로 처리합니다.
for...of 루프를 이용하여 현재 요소의 값을 i라는 변수에 할당합니다.
document.write()를 사용하여 변수 i의 값을 출력합니다.
for...of 루프는 배열의 요소들을 순차적으로 접근하면서 처리할 때 유용합니다. 반복문을 간단하게 작성할 수 있고, 코드 가독성도 좋습니다.

10. 배열 : 데이터 불러오기 : for in

배열에서 데이터의 갯수를 구할때 length를 사용하면 된다.

{
    const arr = [100, 200, 300, 400, 500]; //자릿수 출력해주는

    for(let i in arr){      //왜 만들었을까? 객체는 배열이 변해서 생긴것임 for in은 객체를 위해 존재하는 문법, 그래서 배열에 써도 가능함 
    document.write(i,""); 
    }
    }
    {
    const arr = [100, 200, 300, 400, 500];

    for(let i in arr){       
    document.write(arr[i],"");  //arr[] 추가해주면 자릿수가 아닌 배열의 값을 출력해줌
    }
}
이 코드는 for...in 루프를 사용하여 배열 arr의 인덱스를 출력하거나 요소의 값을 출력하는 코드입니다.

다음은 코드 전체를 요약한 내용입니다.

arr 배열에 100, 200, 300, 400, 500의 값이 할당되어 있습니다.
for...in 루프를 사용하여 arr의 인덱스 값을 반복문으로 처리합니다.
document.write()를 사용하여 현재 인덱스 값을 출력합니다.
for...in 루프를 사용하여 배열의 값을 출력할 때는 arr[i]와 같이 배열 인덱스를 사용하여 요소의 값을 출력합니다.
for...in 루프는 객체의 속성을 순회할 때 사용합니다.
배열도 객체이므로 for...in 루프를 사용할 수 있지만, 배열의 요소들을 순서대로 접근하고자 한다면 for...of 루프를 사용하는 것이 더 적합합니다.

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

배열에서 데이터의 갯수를 구할때 length를 사용하면 된다.

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

    num.forEach(function(el){
    document.write(el , "")
    });
    }
    {
    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)  //차이점은 검색
    });
}
위 코드는 num 배열의 모든 값을 forEach 메소드를 사용하여 출력하는 코드입니다.

아래 코드는 forEach와 map의 차이점을 보여주기 위해 num 배열의 모든 값을 출력하면서
각각의 값, 인덱스, 배열 자체를 콘솔에 출력하는 코드입니다.
forEach와 map의 차이점은 반환값에 있습니다. forEach는 반환값이 없으며, 해당 배열의 각 요소에 대해 콜백 함수를 실행합니다.
반면 map은 배열의 각 요소에 대해 콜백 함수를 실행한 결과를 새로운 배열로 반환합니다.
따라서, map을 사용하면 결과적으로 새로운 배열을 반환받을 수 있습니다.

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

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

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

    console.log(arr1);
    console.log(...arr1,)   // 배열 불러올때의 펼침연산자
    console.log(...arr1,...arr2) //배열을 합치는 방법
}
주어진 코드는 배열에 대한 기본적인 개념과 펼침 연산자(spread operator)에 대한 사용 방법을 보여주고 있습니다. 간단히 설명하자면:
배열 선언 및 출력: let arr1 = [100, 200, 300, 400, 500];으로 배열을 선언하고
console.log(arr1);을 통해 전체 배열을 출력할 수 있습니다.
배열 요소 펼침: ...arr1을 사용하여 배열의 요소를 펼칠 수 있습니다. console.log(...arr1);을 통해
[100, 200, 300, 400, 500]이 아닌 100 200 300 400 500과 같이 요소만 출력됩니다.
배열 합치기: ... 연산자를 사용하여 두 배열을 합칠 수 있습니다. console.log(...arr1,...arr2)를 사용하면
[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)
}
변수 선언: let a, b, c; 구문에서 a, b, c 변수를 모두 선언합니다.
구조 분해 할당: [a, b, c] = [100, 200, "javascript"]; 구문에서 [100, 200, "javascript"] 배열의 요소를 a, b, c 변수에 각각 할당합니다.
이때 할당되는 순서는 배열의 요소 순서와 일치해야 합니다.
변수 출력: console.log(a) 구문에서 a 변수를 출력합니다.
이후 console.log(b)와 console.log(c) 구문에서 b와 c 변수를 각각 출력합니다.

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

객체의 데이터를 불러오는 기본문법입니다.

{
    const obj = {
    a: 100,
    b: 200,
    c: "javascript"
    }
    console.log(obj.a);
    console.log(obj.b);
    console.log(obj.c);
}
객체 생성: const obj = { a: 100, b: 200, c: "javascript" } 구문에서 obj 객체를 생성합니다.
이때 a, b, c는 obj 객체의 속성(property)으로, 각각 100, 200, "javascript" 값이 할당됩니다.
속성 값 출력: console.log(obj.a) 구문에서 obj 객체의 a 속성 값을 출력합니다.
이후 console.log(obj.b)와 console.log(obj.c) 구문에서 obj 객체의 b, c 속성 값을 각각 출력합니다.

15. 객체 : 데이터 불러오기 : 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));
}
객체의 키(key) 배열 추출: Object.keys(obj) 구문에서 obj 객체의 속성 키(key) 배열을 추출하여 출력합니다. 객체의 값(value) 배열 추출: Object.values(obj) 구문에서 obj 객체의 속성 값(value) 배열을 추출하여 출력합니다. 객체의 키-값(key-value) 쌍 배열 추출: Object.entries(obj) 구문에서 obj 객체의 속성 키(key)와 값(value)을 [key, value] 형태로 묶어서 배열로 추출하여 출력합니다.

16.객체 테이터 불러오기 : 변수(spread operator)

변수에 저장시켜서 객체를 불러오는 방법,

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

    console.log(name1);
    console.log(name2);
    console.log(name3);
}

 
obj 객체를 생성하고, a, b, c 속성(property)을 정의합니다.
const name1= obj.a; 구문에서 obj 객체의 a 속성 값을 name1 변수에 할당합니다.
const name2= obj.b; 구문에서 obj 객체의 b 속성 값을 name2 변수에 할당합니다.
const name3= obj.c; 구문에서 obj 객체의 c 속성 값을 name3 변수에 할당합니다.
각 변수에 할당된 값(name1, name2, name3)을 출력합니다.

17. 객체 : 데이터 불러오기 : for in

객체를 for in문을 사용하여 불러오는 방법입니다.

{
    const obj = {
    a: 100,
    b: 200,
    c: "javascript"
    }
    for(let key in obj) {   //object는 배열로 불러오지만 forin문은 배열로 불러오지않음
    console.log(key)
    console.log(obj[key]);
    }
}
위 코드는 obj라는 객체를 정의하고, for...in 루프를 사용하여 객체의 속성을 순회하고 있습니다.
for...in 루프는 객체의 속성 이름(key)을 변수로 받아 해당 속성 이름에 대응하는 값을 obj[key]와 같이 접근하여 출력하고 있습니다.
따라서 위 코드는 객체의 속성을 for...in 루프를 이용하여 출력하는 코드입니다.

18. 객체 : 데이터 불러오기 : map()펼침연산자(spread operator)

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

{
    const obj=[
    {a:100, b:300, c: "javascript"} //객체 메소드로 불러올땐 이렇게 배열로 나열해셔 출력해야함
    ]

    obj.map(function(el) {
    console.log(el.a);
    console.log(el.b);
    console.log(el.c);
    });
}
 
위 코드는 객체들이 저장된 배열 obj를 선언하고 있습니다.
obj.map 메서드를 이용해 obj 배열의 각 요소(객체)에 대해 함수를 실행하고 있습니다.
map 메서드는 배열의 각 요소에 대해 콜백 함수를 호출하며, 이 콜백 함수는 현재 요소의 값을 인수로 받아 처리합니다.
map 메서드는 새로운 배열을 반환하며, 이 배열은 각 요소에 대해 콜백 함수의 처리 결과를 포함합니다.
따라서 위 코드에서는 obj 배열의 각 요소(객체)에 대해 함수를 실행하며, 해당 객체의 a, b, c 속성 값을 출력하고 있습니다.

19. 객체 : 데이터 불러오기 : hasOwnProperty() //데이터가 있는지없는지 알려주는것

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

{
    const obj = {
    a: 100,
    b: 200,
    c: "javascript"
    }
    console.log(obj.hasOwnProperty("a")); //a에 데이터가 있는지 없는지 알려돌라는 코드 //true
    console.log(obj.hasOwnProperty("b")); //b에 데이터가 있는지 없는지 알려돌라는 코드 //true
    console.log(obj.hasOwnProperty("c")); //c에 데이터가 있는지 없는지 알려돌라는 코드 //true
    console.log(obj.hasOwnProperty("d")); //d에 데이터가 있는지 없는지 알려돌라는 코드 //false

    console.log("a" in obj); // 위랑 같지만 약식으로 사용
    console.log("b" in obj); // 위랑 같지만 약식으로 사용
    console.log("c" in obj); // 위랑 같지만 약식으로 사용
    console.log("d" in obj); // 위랑 같지만 약식으로 사용
}

 

위 코드는 JavaScript에서 객체의 속성(property)에 대한 존재 여부를 확인하는 방법을 보여줍니다. obj.hasOwnProperty(prop)는 obj 객체가 prop 속성을 직접적으로 갖고 있는지 여부를 반환하는 메서드입니다.
따라서 obj.hasOwnProperty("a")는 obj 객체가 a 속성을 갖고 있는지 확인하고 결과값인 true를 반환합니다.
"prop" in obj는 obj 객체에 prop 속성이 존재하는지를 확인하는 연산자입니다.
따라서 "a" in obj는 obj 객체에 a 속성이 존재하는지 확인하고 결과값인 true를 반환합니다.
이 두 방법은 비슷하지만, hasOwnProperty는 객체 자신의 속성만을 확인하고, in 연산자는 객체의 상속된 속성까지 확인합니다.
일반적으로 hasOwnProperty를 사용하는 것이 더 안전합니다.

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

객체 펼침연산자를 이용하여 데이터 불러오기

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

    console.log(spread.a);
    console.log(spread.b);
    console.log(spread.c);
    }
    {
    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);

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

}

 

첫번째 블록은 객체(obj)를 스프레드 연산자(...)를 이용해 새로운 객체(spread)로 복사하여, spread 객체의 속성(a, b, c)을 출력한 것입니다.
두번째 블록은 첫번째 블록과 비슷하게 객체(obj)를 스프레드 연산자를 이용해 새로운 객체(spread)로 복사하고, d 속성을 추가하여, spread 객체의 속성(a, b, c, d)을 출력한 것입니다.
세번째 블록은 두 개의 객체(obj1, obj2)를 스프레드 연산자를 이용해 결합하여, 새로운 객체(spread)로 만들고, spread 객체의 속성(a, b, c, d)을 출력한 것입니다.

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

객체 구조분해할당을 이용하여 데이터를 불러오는 방법입니다.

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

    console.log(a);
    console.log(b);
    console.log(c);
    }
{
    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);
}
첫 번째 코드 블록에서는 객체 구조 분해 할당을 사용하여 객체의 속성 값을 변수에 할당하고 출력합니다.
obj 객체에서 a, b, c 속성 값을 가져온 후 각각 a, b, c 변수에 할당하고 이를 console.log()를 사용하여 출력합니다.
두 번째 코드 블록에서는 객체 구조 분해 할당을 사용하여 객체의 속성 값을 변수에 할당하고, 이 변수를 새로운 변수 이름으로 설정합니다.
obj 객체에서 a, b, c 속성 값을 가져온 후 각각 name1, name2, name3 변수에 할당하고 이를 console.log()를 사용하여 출력합니다.
저작자표시

댓글

티스토리툴바