자바스크립트 테스트 - 데이터 불러오기

🤷‍♂️ 01. 다음의 출력값을 보고 빈칸을 채우시오 🤷‍♂️

{
    var x = 100; 
    var y = 200; 
    var z = "javascript"; 

    console.log(__);
    console.log(__);
    console.log(__);

    //100
    //200
    //300
}

📍 변수 x에 숫자 100을 지정함 
    변수 y에 숫자 200을 지정함

    변수 z에 숫자 javascript

 

✍🏻 x
      y
      x+y

 

 

🤷‍♂️ 02. 다음의 출력값을 보고 빈칸을 채우시오🤷‍♂️

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

    x = ___;   
    y = ___;
    z = ___;

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

    //300
    //400
    //jquery
}

📍 변수 x에 숫자 300으로 변경
    변수 y에 숫자 200으로 변경

    변수 z에 문자 "react"로 변경

 

✍🏻 300
      400
      jquary

 

🤷‍♂️ 03. 다음의 출력값을 보고 빈칸을 채우시오🤷‍♂️

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

    x ___ 300;       
    y ___ 400;       
    z ___ "jquery";  

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

    //400
    //-200
    //javascriptjquery
}

📍 변수는 데이터를 저장, 변경, 추가할 수 있습니다.

    x = x + 300

    y = y - 400

    z = z + "jquary"

    

✍🏻 += 
      - =
      +=

🤷‍♂️ 04. 다음의 출력값을 보고 빈칸을 채우시오 🤷‍♂️

{
    const arr = ________();   

    arr[0] = 100;               
    arr[1] = 200;               
    arr[2] = "javascript";     

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

    //100
    //200
    //javascript
}

📍  new Array()는 JavaScript에서 배열을 생성하는 방법 중 하나입니다.

    Array 생성자 함수는 기본적으로 빈 배열을 생성합니다.

    생성자 함수에 인수를 전달하면 해당 인수의 수만큼의 요소를 가진 배열이 생성됩니다.

    예를 들어, new Array(3)은 3개의 요소를 가진 빈 배열을 생성합니다.

    배열 리터럴을 사용하면 코드를 더 간결하고 가독성 있게 작성할 수 있습니다

 

✍🏻  new Array

    

 

🤷‍♂️ 05. 다음의 출력값을 보고 빈칸을 채우시오🤷‍♂️

{
    const arr = [___________________];    

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

    //100
    //200
    //javascript
}

📍   05번을 좀 더 간결하게 사용하면
      new Array()에 데이터를 ","로 구분하여 저장하는 방법입니다.

 

✍🏻  new Array (100,200,"javascript")

 

 

🤷‍♂️ 06. 다음의 출력값을 보고 빈칸을 채우시오🤷‍♂️

{
    const obj = new Object();

    obj[0] = 100;
    obj[1] = 200;
    obj[2] = "javascript";

    console.log(______);
    console.log(______);
    console.log(______);

    //100
    //200
    //javascript
}

📍   객체(object)는 데이터 값을 필요한 대로 만들어 사용할 수 있고 객체의 데이터는 키(이름) 값으로

      이뤄져 있으며 이것을 속성이라 합니다.

✍🏻  obj.[0]

       obj.[1]

       obj.[2]

 

🤷‍♂️ 07. 다음의 출력값을 보고 빈칸을 채우시오!(console.log를 사용할 것) 🤷‍♂️

{
    const obj = new Object();
    
    obj.a = 100;
    obj.b = 200;
    obj.c = "javascript";

    _____________________
    _____________________
    _____________________

    //100
    //200
    //javascript
}

📍  여러 개의 데이터를 하나의 변수에 저장하고 데이터가 추가되면 추가 된 데이터를 식별해

     가져올 수 있습니다. 

     ex ) obj. 키= 값;

 

✍🏻  console.log(obj.a);

       console.log(obj.b);

       console.log(obj.c);

 

🤷‍♂️ 08. 다음의 출력값을 보고 빈칸을 채우시오 🤷‍♂️

{
    const obj = {____________________};

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

    //100
    //200
    //javascript
}

📍  여러 개의 데이터를 하나의 변수에 저장하고 데이터가 추가되면 추가 된 데이터를 식별해서

     가져올 수 있다. ex ) const obj = {키:값, 키:값, 키:값};

 

✍🏻  {a: 100, b:200, c:"javascript"};

    

🤷‍♂️ 09. 다음의 출력값을 보고 빈칸을 채우시오🤷‍♂️

9. 다음의 출력값을 보고 빈칸을 채우시오!
{
    const obj = [
        {a:100, b:200},
        {c:"javascript"}
    ];

    console.log(________);
    console.log(________);
    console.log(________);

    //100
    //200
    //javascript
}

📍  객체 여러 개의 데이터를 하나의 변수에 저장하고 데이터가 추가되면 추가 된 데이터를 식별해
     가져올 수 있다.

     배열 안에 객체가 있는 방법 ex) 출력 : consol.log(obj[배열].객체);

 

✍🏻  obj[0]

       obj[1]

       obj[2]

 

🤷‍♂️ 10. 다음의 출력값을 보고 빈칸을 채우시오🤷‍♂️

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

    //200
    //300
    //200300
}

📍   첫번째 console.log()는 객체(obj)의 b 프로퍼티의 첫번째 요소(200)를 출력합니다.

      두번째 console.log()는 객체(obj)의 b 프로퍼티의 두번째 요소(300)를 출력합니다.

      세번째 console.log()는 객체(obj)의 b 프로퍼티의 모든 요소를 문자열로 합쳐서 출력합니다.

       즉, "200300"이 출력됩니다.

✍🏻  obj.b[0]

       obj.b[1]

       obj.b

       

 

 

🤷‍♂️ 11. 다음의 출력값을 보고 빈칸을 채우시오🤷‍♂️

{
    const a = 100;
    const b = 200;
    const c = "javascript";

    const obj = { _________ }

    document.write(obj.a);
    document.write(obj.b);
    document.write(obj.c);

    //100
    //200
    //javascript
}

📍  객체

     여러 개의 데이터를 하나의 변수에 저장하고 데이터가 추가되면 추가 된 데이터를 식별해
     가져올 수 있다. ex) const 키 = 값; / consol

 

✍🏻  {a, b, c};

 

🤷‍♂️ 12. 다음의 출력값을 보고 빈칸을 채우시오🤷‍♂️

{
    const obj = {
        a: 100,
        b: [200, ____],
        c: "javascript",
        d: _________(){
            document.write("javascript가 실행되었습니다.");
        },
        e: function(){
            document.write( _______ + "가 실행되었습니다.");    //변수값 사용
        },
        f: function(){
            document.write( _______ + "가 실행되었습니다.");    //this를 사용
        }
    }

    document.write(obj.a);
    document.write(obj.b);
    document.write(obj.b[0]);
    document.write(obj.b[1]);
    document.write(obj.c);
    obj.d();
    obj.e();
    obj.f();

    //100
    //200,300
    //200
    //300
    //javascript
    //javascript가 실행되었습니다.
    //javascript가 실행되었습니다.
    //javascript가 실행되었습니다.
}

📍  객체

     객체는 데이터 값을 필요한대로 만들어 사용할 수 있습니다.
     객체 안엔 함수인 실행문이 들어갈 수 있는데, 실행문을 실행시킬 때 사용하는 법입니다.

 

✍🏻  300

       function()

       obj.c

       this.c

 

🤷‍♂️ 13. 다음 결괏값을 완성하시오.🤷‍♂️

{
    for( let i=1; i<10; i++){
        if(i % 2 == 0) {
            document.write(i);
        }
    }
}

📍  데이터 이펙트

     for()문을 이용해 1 - 100까지 짝수만 출력하는 예제입니다.

     증감 연산자를 이용, i += 2는 i = + 2와 같은 식 (2씩 증가)

 

✍🏻 2,4,6,8

 

🤷‍♂️ 14. 다음 결괏값을 완성하시오. 🤷‍♂️

{
    for( let i=1; i<10; i++){
        if( true ) {
            document.write(i);
        }
    }
}

📍  1부터 9까지의 수를 출력하는 반복문입니다.

     그러나 if문 안에 항상 true가 들어가므로, i가 1부터 9까지 모두 출력됩니다.

 

✍🏻 1,2,3,4,5,6,7,8,9

 

🤷‍♂️ 15. 다음 결괏값을 완성하시오🤷‍♂️ 

{
    const func = function(){
        document.write("함수가 실행되었습니다.");
    }
    func();
}

📍  익명 함수

     변수는 데이터를 저장하는 "저장소" 이며 이 저장소엔 숫자, 문자, 함수, 객체 등을 저장할 수 있습니다.

 

✍🏻 실행되었습니다.

 

🤷‍♂️ 16. 다음 결괏값을 완성하시오.🤷‍♂️

{
    if( 1 ){
        document.write("조건문이 실행되었습니다.(true)");
    } else {
        document.write("조건문이 실행되었습니다.(false)");
    }
}

📍  if문

    위 코드는 JavaScript에서 조건문(if문)이 어떻게 동작하는지를 보여주기 위한 예제입니다.

    if문의 조건식이 1로, JavaScript에서는 0 이외의 모든 값이 true로 평가됩니다. 따라서, if문의 조건식은 참이 됩니다.

    따라서, 코드 실행 결과는 "조건문이 실행되었습니다.(true)"가 출력됩니다.

 

✍🏻  조건문이 실행되었습니다.(true)

 

🤷‍♂️ 17. 다음 결괏값을 완성하시오.🤷‍♂️

{
    let num = 10;

    if( num == 100 ){
        document.write("조건문이 실행되었습니다.(1)");
        if( num == 100 ){
            document.write("조건문이 실행되었습니다.(2)");
            if( num == 100){
                document.write("조건문이 실행되었습니다.(3)");
            }
        }
    } else {
        document.write("조건문이 실행되었습니다.(4)");
    }
}

📍  중첩된(if문 안에 if문이 있는) 조건문

    num 변수의 값이 10으로, if문의 조건식 num == 100은 거짓(false)이므로, else 블록이 실행됩니다.

    따라서, 코드 실행 결과는 "조건문이 실행되었습니다.(4)"가 출력됩니다.

 

✍🏻 조건문이 실행되었습니다.(4)

 

🤷‍♂️ 18. 다음 결괏값을 완성하시오.🤷‍♂️

{
    let num = 10;

    (num == 100) ? document.write("true") : document.write("false");
}

📍  삼항 연산자(ternary operator)를 사용

    num 변수의 값이 10으로, num == 100은 거짓(false)이므로, false인 경우에 대한 표현식인 document.write("false")            가  실행됩니다.

    따라서, 코드 실행 결과는 "false"가 출력됩니다.

 

✍🏻  false

 

🤷‍♂️19. 다음 결괏값을 완성하시오 🤷‍♂️ 

{
    let num = 0;
    while( num <= 5 ){
        document.write( num + ". 반복문이 실행되었습니다.");  
        num++;
    }
}

📍  while문을 사용하여 반복문(loop)을 실행

     num 변수의 값이 0으로 초기화되고, while문의 조건식 num <= 5은 num이 5보다

     작거나 같을 때 참(true)이므로, while문이 실행됩니다.

     그리고 num 변수를 1 증가시킵니다.

     이렇게 반복적으로 document.write() 함수를 호출하면서 num 변수의 값을 출력하고,

      num 변수를 1씩 증가시키면서 while문을 반복 실행합니다.

      num 값이 6이 되면 while문의 조건식이 거짓(false)이 되므로, 반복문이 종료됩니다.

 

✍🏻  0. 반복문이 실행되었습니다.

       1. 반복문이 실행되었습니다.

       2. 반복문이 실행되었습니다.

       3. 반복문이 실행되었습니다.

       4. 반복문이 실행되었습니다.

       5. 반복문이 실행되었습니다.

 

🤷‍♂️20. 다음 결괏값을 완성하시오.🤷‍♂️

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

    str.forEach((element, index, array) =>l {
        document.write(element);
        document.write(index);
        document.write(array);
    });
}

📍  배열(str)에 forEach 메서드를 호출

    배열의 각 요소(element)와 해당 요소의 인덱스(index),

    그리고 전체 배열(array)을 출력하는 코드입니다.

 

✍🏻 1000100201300400400500[100, 200, 300, 400, 500]

 

 

✨ 감사합니다.