[생활코딩][JavaScript] 자바스크립트 기초2

목차

• 객체에 접근하는 3가지방법(콘솔창 TIP, 터미널 단축키)
• 배열과 반복문(querySelector, querySelectorAll)
• 함수의 기본문법(arg, param, return)

소괄호 안의 개념은 같이 설명된 미니개념이라고 생각하시면 됩니다.

의식의 흐름대로 찾은 개념을 정리해놓기도 합니다.

---

3 ways to access object properties in JS

1. Dot property accessor: object.property
2. Square brackets property access: object['property']
3. Object destructuring: const { property } = object

브라우저 콘솔창TIP

shift 를 누르고 enter를 치면 줄바꿈이 됩니다. JS코드를 적용해볼 때, 명심하세요.

-> enter를 누르면 실행이 되기 때문에 실행되지 않고 여러줄의 JS코드를 실행시켜볼 때 사용하면 좋습니다.

VSCode 터미널 단축키:

`(백틱) + ctrl(컨트롤키)

😎배열과 반복문(Array & Loop)

JS에서 서로 연관된 데이터를 담는 방법 -> 배열 

• 배열에 담긴 각각의 항목 = 원소 = element
• 배열에서 어떤 데이터를 가져올 때는 대괄호[]를하고 대괄호 안에 보고싶은 데이터의 index값을 넣어줍니다 
•  index값은 0부터 시작

담겨있는 배열을 순차적으로 꺼내서 li라는 태그로 만들어주는 역할-> 반복문

 

활용한 JS코드(수정전)

 <script>
      let coworkers = ["감자", "고구마", "주먹밥", "모카"];
    </script>
    <h2>Co workers</h2>
    <ul>
      <script>
        /*i값이 우리가 불러오고자 하는 배열의 index값과 일치하기 때문에 i 를 사용하면 된다.*/
        let i = 0;
        while (i < 4) {
          document.write(`<li>${coworkers[i]}</li>`);
          i = i + 1;
        }
      </script>

->이 코드는 완벽한 코드가 아닌데 이유는 데이터의 값이 바뀌면 정상작동하지 않기 때문에 로직을 바꿔야 한다는 맹점을 가지고 있다. 배열의 수가 바뀔때마다 while안의 조건문을 바꿔줘야 한다는 것이다. 

 

프로그래밍을 할 때, 데이터가 변경된다고 로직을 바꾸는 일은 바람직하지 않습니다. 

while의 조건절을 바꿨습니다. 

while (i < coworkers.length) {
          document.write(`<li>${coworkers[i]}</li>`);
          i = i + 1;
        }

이로 완성된 코드를 얻게 됐습니다. 만약에 li태그에 링크를 걸고싶다면, 

document.write(`<li><a href="http://addf.com">
            ${coworkers[i]}</a></li>`);

이렇게 내부의 코드를 변경해주면 되는 것이겠죠. 

 

😎배열과 반복문 활용

이전에 우리가 만들던 night_day 버튼 만들기를 이어서 만들어보도록 합시다. 

우선 해당 페이지의 모든 a태그를 가져와봅시다.

->전에 배웠던 querySelector()을 사용해서 가져오면 어떨까? 했는데 1개의 요소만 콘솔창에 뜹니다.

• Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다. (MDN 정의)
• 즉, 쿼리셀렉터는 첫번째 요소만 반환하기 때문에 그렇습니다. 
• 그렇다면 우리는 뭘 써야할까요? querySelectorAll()을 사용하면 해당 css selector의 모든 노드리스트를 반환합니다. 여기서 노드리스트는 배열이라고 생각하면 쉽습니다.

    let alist = document.querySelectorAll('a');
      let i = 0;
      while (i < alist.length) {
        alist[i].style.color = 'powderblue';
        i = i + 1;
      };

     } else {
       
    let alist = document.querySelectorAll('a');
      let i = 0;
    while (i < alist.length) {
        alist[i].style.color = 'blue';
        i = i + 1;
      };

이 부분을 추가했습니다. 기능은 모든 a태그의 폰트컬러를 나이트_데이 버튼이 눌릴 때, 같이 바뀌는 것인데요.

중요한 것은 변수를 let이 아니라 const로 지정하게 되면 폰트의 색이 변하지 않습니다. 이 점을 명심하세용

 

😎함수(Function)의 기본

• 입력(parameter, argument) 개념
• 표현식 개념-> return에 연관
• 출력(return) 개념

코드의 중복이 발생하지만 그것이 연속적이지 않을 때는 반복문으로 처리하는 것이 불가능하거나 어려워집니다.

그럴때 우리가 사용하는 것이 함수(Function)입니다.

 

함수의 기본 모습은 function 함수명() 입니다.

->웹 브라우저는 펑션뒤에 있는 ()소괄호를 보고 앞에있는 것이 function명이고 지금 이 기능을 실행하고 싶구나 라는 걸 알게됩니다.

 function two() {
          document.write("<li>2-1</li>");
          document.write("<li>2-2</li>");
        }
        document.write("<li>1</li>");
        two();
        document.write("<li>3</li>");
        two();

함수는 입력과 출력으로 이루어져 있습니다. 

입력 ->parameter(매개변수),  argument(인자) -> 함수로 들어오는 입력값과 관련된 용어들

출력 ->return 

function sum(왼쪽값, 오른쪽값) { //매개변수=param
        document.write(왼쪽값 + 오른쪽값);
      }
      sum(27, 11); //인자arg

->function을 실행시킬 때 받는 값 -> 함수로 전달하는 27과 11이라는 값이 argument(인자)입니다.

여기서 왼쪽값, 오른쪽값이 arg를 받아서 함수 안으로 매개해주는 변수라서 매개변수라고 부릅니다.

 

▶argument(인자)를 받아서 function(함수)로 보내주고 그 값을 parameter(매개변수)로 받은 함수가 

연산해서 return값을 돌려준다.(위의 코드에서는 return을 하고 있진 않습니다. 아래서 return을 다룹니다.)

 

👻return

이 개념을 하기 전에 표현식에 대해서 알아보겠습니다. 

2-1
//expected output 1 
1===1 
//expected output true

풀어서 설명하면

2-1은 1이라는 값의 표현식이고,

true라는 값의 표현식은 1===1인 것입니다. 

 

sum2(2,3)을 했을 때 5가 되는 표현식을 만들고 싶으면 return이라는 개념을 잘 알고 있어야 합니다. 

 <script>
      function sum2(left, right) {
        return left + right;
      }
      document.write(sum2(2, 3) + "<br>");
      document.write('<div style="color:red">' + sum2(2, 3) + "</div>");
      document.write('<div style="font-size:3rem;">' + sum2(2, 3) + "</div>");
    </script>

 

우리가 이전에 만들었던 sum() 함수는 값을 되돌려주는 것이 아니라 내부에서 document.write()를 통해 실행하고 있습니다. 그렇게 되면 sum()함수의 결과값을 가지고 다른 일을 할 수 없고 함수의 결과를 이어받아 다른 기능을 구현하려면 일일이 새로운 fucntion을 만들어줘야하기 때문에 자유도가 떨어지게 됩니다. 하지만, return을 통해 값을 돌려줌으로써 새로운 function을 만들지 않고도 sum2()을 다양한 맥락에서 사용할 수 있는 자유도가 생깁니다.