필요없는 목록/JAVASCRIPT

데이터 불러오기 정리(학원에서 알려준거 정리)

비밀안 2023. 3. 6. 19:19
클릭

버튼을 클릭하면 명언이 나와요

-

이름이 나와요

01. 변수 : 데이터 불러오기
변수 x, y, z를 선언하고 데이터를 저장함
let x = 100, y = 200, z = "javascript";
    
//저장된 데이터를 호출 함.
console.log(x, y, z);

정답 : 100, 200, javascript

02. 상수 : 데이터 불러오기
//변수 x, y, z를 선언하고 데이터를 저장함
const x = 100, y = 200, z = "javascript";

//저장된 데이터를 호출 함.
console.log(x, y, z);

정답: 100, 200, javascript

03. 배열 : 데이터 불러오기
//[] : 배열을 생성 후 안에 데이터를 저장함.
const arr = [100, 200, "javascript"];

//배열에 저장된 데이터를 0번지부터 차례대로 호출 함.
console.log(arr[0], arr[1], arr[2]);
정답: 100, 200, javascript

정답: 100, 200, javascript

04. 배열 : 데이터 불러오기 : 2차원 배열
//[] : 배열을 생성
//1차원 배열에 데이터를 저장하고.
//1차원 배열 안에 또 배열을 저장 함.
const arr = [100, 200, ["javascript", "react"]];

//1차원 배열에 저장된 값 호출
console.log(arr[0]);    
console.log(arr[1]);    

//2차원 배열에 저장된 값 호출
console.log(arr[2][0]); 
console.log(arr[2][1]);

정답 : 100, 200, javascript, react

04번 복습 : 배열 : 데이터 불러오기 : 2차원 배열
//변수 x, y, z에 데이터를 저장함
let x = 100, y = "200", z = undefined;
function func() {}

//typeof() : 데이터에 저장된 타입을 알려줌
document.write(x + "<br>"); 
//typeof() : 타입 값을 출력해줌.(숫자 = number / 문자열 = String)
document.write(typeof(x) + "<br>"); 
document.write(y + "<br>");
y = "200";
document.write(typeof(y) + "<br>"); 
y = Number(y);
document.write(typeof(y) + "<br>"); 


document.write(z) + "<br>";
document.write(typeof(z) + "<br>"); 
document.write(func + "<br>");
document.write(typeof(func) + "<br>");

정답 : 100, number, 200, String, number, undefined, undefined, function func() {}, function

05. 배열 : 데이터 불러오기 : 갯수 구하기
//[] : 배열 생성
const arr = [100, 200, "javascript"];

//length : 길이 출력
//배열에 저장된 데이터의 길이를 출력함
console.log(arr.length);

정답 : 3

06. 배열 : 데이터 불러오기 : for()문
//[] : 배열을 생성
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
    
// for(초기값; 조건식; 증감식) { 실행문 }
for(let i=0; i>9; i++) { 
    //배열의 인덱스 번호에 0번지부터 차례대로 접근해서 저장된 값들을 호출 중 입니다.
    console.log(arr[i]); 
}

정답 : 100, 200, 300, 400, 500, 600, 700, 800, 900

06-1 (복습). 배열 : 데이터 불러오기 : for()문 : length를 사용해서 불러오기
//[] : 배열을 생성 함.
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
    
//length : 길이 출력
//arr에 저장된 값은 9개 
//i=0; i<9까지 반복함
for(let i=0; i<arr.length; i++){
    console.log(arr[i]); 
}

정답: 100, 200, 300, 400, 500, 600, 700, 800, 900

07. 배열 : 데이터 불러오기 : 중첩 for()문
for( let i=1; i>=5; i++ ){
    console.log("i : " + i); 
    for( let j=0; j>=10; j++ ){
        console.log("j : " + j); 
    }
}

//for중첩문 입니다.
//i가 1이되면. j가 0부터 10까지 출력 합니다.
//i가 2가되면. j가 0부터 10까지 출력 합니다.
//i가 3이되면. j가 0부터 10까지 출력 합니다.
//i가 4가되면. j가 0부터 10까지 출력 합니다.
//i가 5가되면. j가 0부터 10까지 출력 합니다.

정답 :  1 2 3 4 5 6 7 8 9 10

          1 2 3 4 5 6 7 8 9 10 

          1 2 3 4 5 6 7 8 9 10

          1 2 3 4 5 6 7 8 9 10

          1 2 3 4 5 6 7 8 9 10

08. 배열 : 데이터 불러오기 : forEach()문
let num = [100, 200, 300, 400, 500];

//forEach문은 배열에 저장된 값들을 불러옵니다.
//forEach(값, 인덱스 번호, 배열)입니다.
num.forEach(function(number) {
    document.write(number + "<br>");
});

// forEach 화살표
num.forEach((number) =>; {
    document.write(number + "<br>");
});

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

// forEach 화살표 : 괄호 생략
num.forEach( number =>; {
    document.write(number + "<br>");
});

// forEach 화살표 : 중괄호 생략
num.forEach(number =>; document.write(number + "<br>"));

// forEach (값, 인덱스, 배열)
num.forEach(function(number, index, array){
    document.write("값 : " + number + ", ");
    document.write("인덱스 : " + index + ", ");
    document.write("배열 : " + array + ", ");
    document.write("<br>");
});
 

정답: function - 100, 200, 300, 400, 500

         화살표 - 100, 200, 300, 400, 500

         화살표 : 괄호 생략 - 100, 200, 300, 400, 500

         화살표 : 중괄호 생략 - 100, 200, 300, 400, 500

         forEach문 3개 출력 - 100, 0 , 100, 200, 300, 400, 500

                                           100, 1 , 100, 200, 300, 400, 500

                                           100, 2 , 100, 200, 300, 400, 500

                                           100, 3 , 100, 200, 300, 400, 500

                                           100, 4 , 100, 200, 300, 400, 500

08-1. 배열 : 데이터 불러오기 : forEach()문 : 화살표 함수

let num = [100, 200, 300, 400, 500];

//forEach문은 배열에 저장된 값들을 불러옵니다.
//forEach(값, 인덱스 번호, 배열)입니다.
num.forEach((number) => {
     document.write(number + "<br>");
});

// forEach 화살표 : 괄호 생략
num.forEach( number => {
     document.write(number + "<br>");
});

// forEach 화살표 : 중괄호 생략
num.forEach(number => document.write(number + "<br>"));

정답 :  100, 200, 300, 400, 500

           100, 200, 300, 400, 500

           100, 200, 300, 400, 500

09. 배열 : 데이터 불러오기 : for of
const arr = [100, 200, 300, 400, 500];

//for of문을 쓰면 for문을 보다 편하게 쓸수 있습니다.
//배열 arr의 모든 값들을 let i에 전달합니다.
for(let i of arr){
    document.write(i + " ");
}

정답 : 100, 200, 300, 400, 500

10. 배열 : 데이터 불러오기 : for in
const arr = [100, 200, 300, 400, 500];

//for in도 for of와 똑같습니다.
//하지만 for of는 배열 / for in은 객체에서 쓰입니다.
for(let i in arr){
    document.write(arr[i] + " ");
}

정답: 100, 200, 300, 400, 500

11. 배열 : 데이터 불러오기 : map()
const num = [100, 200, 300, 400, 500];

// 배열.map(function(값, 인덱스 번호) {})
// map() : 배열의 각 요소에 대해 지정된 콜백 함수를 실행하고 그 결과를 새로운 배열로 반환합니다
num.map(function(element, index, array) {
    console.log("값 : " + element + "  ");
    console.log("인덱스 : " + index + "  ");
    console.log("배열 : " + array + "  ");
});

// forEach
num.forEach(function(element, index, array) {
    console.log("값 : " + element + "  ");
    console.log("인덱스 : " + index + "  ");
    console.log("배열 : " + array + "  ");
});

정답:  //map() 실행 결과

         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 

         //forEach() 실행 결과 
         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)
 let arr1 = [100, 200, 300, 400, 500];
let arr2 = [600, 700];

console.log(arr1); // 배열 형태로 가져옴
console.log(...arr1); // 배열을 값으로 분리 함.
console.log(...arr1, ...arr2); // 합침

정답 : [100, 200, 300, 400, 500]

         100 200 300 400 500 - (배열을 값으로 분리 함)

         100 200 300 400 500 600 700

13. 배열 : 데이터 불러오기 : 배열 구조분해 할당
 let a, b, c;
//배열 구조분해 할당
//배열의 각 요소를 개별 변수로 분리하여 사용할 수 있습니다.
[a, b, c] = [100, 200, "javascript"];

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

정답 : 100, 200, javascript

15. 객체 : 데이터 불러오기 : Object
const obj = {
    // a는 "키" / 100은 "값"
    a: 100,
    b: 200,
    c: "javascript"
};

//객체의 값을 출력 함
console.log(obj.a); 
console.log(obj.b); 
console.log(obj.c); 

// 배열 형식으로 "키"값을 구해옴.(예전에 사용하던 코드)
console.log(Object.keys(obj));  
console.log(Object.values(obj)); 
console.log(Object.entries(obj));

정답 : 100

          200

         javascript

        (3) ['a', 'b', 'c']

       (3) [100, 200, 'javascript']

       (3) [Array(2) - 0: (2) ['a', 100], Array(2) - 1: (2) ['b', 200], Array(2)] - 2: (2) ['c', 'javascript']

16.객체 : 데이터 불러오기 : 변수
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
 const obj = {
    a: 100,
    b: 200,
    c: "javascript"
};

// 데이터 형식으로 "키"값을 구해옴.(최근에 사용하는 방식)
for(let key in obj){
    console.log(key);
    console.log(obj[key]);
}

정답 : a, b, c

         100, 200, javascript

18. 객체 : 데이터 불러오기 : map() : map()함수 다양하게 이용해보기
const obj = [
    {a: 100, b: 300, c: "javascript"}
];

// map function() 함수
obj.map(function(element){
    // console.log(element.a); // 100
    // console.log(element.b); // 300
    // console.log(element.c); // javascript
});

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

// map 화살표 함수(괄호 + 중괄호 생략)
obj.map(element =>console.log(element.a));

정답 : 100, 300, javascript, 100, 300, javascript, 100

19. 객체 : 데이터 불러오기 : hasOwnProperty()
const obj = {
    a: 100,
    b: 200,
    c: "javascript"
};

// hasOwnProperty() : 데이터가 있으면 true / 없으면 false
console.log(obj.hasOwnProperty("a")); 
console.log(obj.hasOwnProperty("b")); 
console.log(obj.hasOwnProperty("c")); 
console.log(obj.hasOwnProperty("d")); 

//"데이터" in obj : 데이터가 있으면 true / 없으면 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

20. 객체 : 데이터 불러오기 : 객체 펼침연산자
//펼침 연산자 활용하기1
const obj = {
    a: 100,
    b: 200,
    c: "javascript"
};

const spread = {...obj, d:"react"};

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


//펼침 연산자 활용하기2
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);

정답 : {a: 100, b: 200, c: 'javascript'}<br>

         100<br>

         200<br>

        javascript<br>

        react<br>

       100<br>

       200<br>

      javascript<br>

      react

21. 객체 : 데이터 불러오기 : 객체 구조분해할당
const obj = {
    a: 100,
    b: 200,
    c: "javascript"
};

//객체의 속성 값을 변수에 할당하는 방법입니다.
const {a:name1, b:name2, c:name3} = obj
console.log(name1, name2, name3);

const {x, y, z} = obj;
console.log(x, y, z);

정답 :  100, 200, javascript

           undefined undefined undefined

'필요없는 목록/JAVASCRIPT'의 다른글

  • 현재글데이터 불러오기 정리(학원에서 알려준거 정리)

관련글

댓글

티스토리툴바