💪 JavaScript w/ 생활코딩

Preface

📌 개발 공부 1개월 차인 to-be 개발자의 자습 블로그🙂ﾠAug 2 ~ 6, 2021

현재 상태
아직 CSS도 모르겠는데 갑자기 분위기 자바스크립트.
아무리 FE의 기본이 HTML5, CSS3, JavaScript라지만... 한 주 동안 이 세 가지 분야의 지식을 머리에 마구 쑤셔넣는 중
수준별(?) 강의를 해주시기는 하지만 모든 게 외계어처럼 들린다.
한국어로 말씀하시면 제가 알아들을 줄 아셨나요...ㅜvㅜ
마치 '어둠 속의 대화'를 체험하고 있는 것 같다... 앞이 보이지 않아...! 개념 공부, 이론 공부 열심히 해야지.

그 전에 하소연을 하고 넘어가자면, 아니 JavaScript는 동작을 구현하는 거라면서 왜 자꾸 function을 써야 하는 걸까 😢.
변수를 이래저래 넣어서 어째저째 나온 결과랑 사용자가 button을 클릭하는 거랑 무슨 상관인 걸까 😢.
당최 왜 여기에선 중괄호를 쓰고 갑자기 왜 콜론을 쓰며 백팁은 또 왜 튀어나오는 걸까 😢.
나도 같은 code를 적은 것 같은데 왜 나만 undefined인 걸까 😢.

➕ afterthought

개념 공부, 이론 공부 해야겠다고 해놓고 내가 만족할 만큼 하지 못한 체 DOM, React, BE와의 통신까지 진도가 나가버려서 많이 힘들었다. 뭔가를 하고는 있는데 그게 뭔지를 모르겠어서 마치 실타래가 얽히고 얽혀 풀기 어려운 실뭉치 덩어리가 된 것 같다. 이렇게 막막했던 2개월을 보낸 10월 7일 현재, JavaScript를 다시 보고 있자니 이제서야 JavaScript의 J 정도 알 것 같다. 휴...

---

---

JavaScript

1. intro

JavaScript는 HTML 위에 만들어진 언어이기 때문에 JS를 HTML에 잘 rendez-vous시켜야 한다.
그 의미로 <script>라는 tag를 사용해 JS를 이 tag 안에 작성해야 한다.
JS의 event 속성을 사용해 더욱 더 사용자와 상호작용하는 web을 만들 수 있다.
ex.onclick, onchange, onkeydown...

---

2. console

개발자도구의 Console tab에서 JavaScript를 즉시 실행할 수 있는데, 이를 통해 내가 의도한 대로 code가 작동하는지 확인하기도 하고 즉석에서 code를 수정해 web에서 어떻게 작동될지 적용해 보기도 한다.
Console tab에서 작성하는 code는 실제 web에는 영향을 주지 않는다.
참고로 Elements tab에서 ESC key를 누르면 Console tab이 뜬다.

---

3. data types

JS에는 여섯 가지 자료형이 있는데, 이는 typeOf 연산자로 확인할 수 있다.
ㄴ number, string, boolean, null, bigint, symbol
ㄴ console.log(typeof 100); // "number"
ﾠﾠconsole.log(typeof msg); // "string"
이 외에 object, function, null 등의 세 가지의 구조 유형이 있다.
ㄴ console.log(typeof null); // "object" ∵ null 은 빈 객체를 참조하고 있기 때문
ㄴ console.log(console.log(typeof []); // "object" ∵ 배열은 확장된 객체이기 때문
String형과 Number형을 연산하면 항상 String형으로 변환하므로 연산할 때 주의해야 한다.
String은 대소문자를 구분한다.
ㄴ js != JS
string과 array에서는 .length 속성을 쓸 수 있지만 number는 안 돼서undefined가 뜨므로 전화번호 유효성 검사같은 걸 할 땐 번호를 문자열로 바꿔주어야 한다.
ㄴ 숫자로 바꾸고 싶을 때 :number(), parseInt(), parseFloat()
ㄴ 문자로 바꾸고 싶을 때 :.toString()
MDN docs

---

4. variable, assignment operator, binary operator

x = 1에서 'x'가 변수, '='가 대입연산자이다.
변수를 선언할 땐 let (변수 생성 및 생성 후 값 수정 가능)과 const (값 수정 불가능)를 사용한다.
변수를 선언했으면 값을 할당 (초기화) 해야 하는데, 그렇지 않으면 변수의 값이 undeifned가 된다.
변수를 사용하는 대표적인 이유는 변수 하나만 잘 설정하면 많은 data를 변경해야 할 때 변수만 변경하면 돼서 간편하기 때문이다.
(var, let, const에 관한 더 자세한 내용은 여기에서 풀었다. link)

참고로 객체에 사용된 변수는 property라고 하며 property 사이엔 ','가 있어야 한다.
{} (block) 내부에서 변수를 정의하면 변수는 오로지 block 내부에서만 사용할 수 있다.
function, for문, if문 내부의 {}도 모두 block이다.
block 내부에서 정의된 변수를 'local (지역) 변수'라고 부른다.
global 변수는 프로그램이 종료될때까지 계속 살아있다.
ㄴ 이 말은 local 변수는 block이 끝나면 더 이상 살아있지 않고 쓸 수 없다는 말이다.
global 변수가 여기저기서 수정되면 code 안정성에 좋지 않기 때문에 변수들은 최대한 block scope으로 나누는 게 좋다.
가급적 global 변수는 쓰지 않도록 노력해야 하고, 최대한 {} 내에서 let, const 을 사용하여 변수를 새로 만들어서 쓰자.

JS에서는 'x = 1'은 'x는 1이다.'가 아니라 'x에 1을 대입/저장한다.'이다.
혹은 'x = 1'을 ''x'라는 공간이 생기고 그곳에 1이라는 값을 저장해둔다.'로 표현하기도 한다.

연산자 중 +, ===처럼 양쪽의 값을 연산하는 것은 이항연산자이다.
+ 등은 이항 연산자 중에서 산수를 하는 것이기 때문에 산술 연산자라고 부른다.

---

✓ programming

HTML과 JS는 모두 computer 언어이다.
이 중 JS는 computer 언어임과 동시에 computer programming 언어이다.
program에는 '순서'라는 의미가 있고, 이 순서를 만드는 게 programming이다.
ex. orchestra program
즉 computer programming이란 시간의 순서에 따라 실행되어야 할 기능을 programming 언어의 문법에 맞게 글로 적은 것이다.

---

5. comparison operator, boolean

비교연산자의 값이 boolean (true or false) 이다.
비교연산자를 활용함으로써 coding이 단순 반복에서 해방될 수 있었다.
boolean이 true냐 false냐에 따라 실행되는 code가 달라진다.
ㄴ true

• 문자열 : 비어 있지 않은 모든 문자열
• 숫자 : 0이 아닌 모든 숫자
• 객체 : 모든 객체 ({ }, [ ] 포함)

    false

• 문자열 : " " (빈문자열)
• 숫자 : 0, NaN
• 객체 : null
• undefined

---

6. conditional statements

비교연산자를 사용한 programming으로 반복 작업이 수월해졌는데, 여기에 더해 조건에 따라 다른 기능이 실행되게 함으로써 단순 반복 이상의 더 복잡한 작업이 가능하게 되었다.

↓ if문의 형식

if (boolean type data){
  true면 실행할 code
} false면 실행할 code;

↓ 공식 문서에는
if (condition) {
  condition이 참이면 실행할 code
} else {
  대신 실행할 code
}

else if문 등을 사용할 때 code가 작성된 순서대로 조건을 검토되므로 조건문은 순서가 중요하다.
참고로 computer는 왼쪽에서 오른쪽으로, 위에서 아래로 code를 실행하며 비교연산자가 있을 때는 비교연산자를 기준으로 왼쪽과 오른쪽으로 나누어서 code를 실행한다.
MDN docs

---

✓ refactoring

refactoring을 통해 개발자와 computer 모두에게 있는 비효율을 제거한다.
유지・보수에 중요하므로 refactoring은 꾸준히, 여러 차례 해야 한다.

<input
  id="night_day"
  type="button"
  value="night"
  onclick="
  if (document.querySelector('#night_day').value === 'night')
   { document.querySelector('body').style.backgroundColor = 'black';
     document.querySelector('body').style.color = 'white';
     document.querySelector('#night_day').value = 'day';
   } else {
     document.querySelector('body').style.backgroundColor = 'white';
     document.querySelector('body').style.color = 'black';
     document.querySelector('#night_day').value = 'night';
   }
   ">

↓
반복 제거
1) 본인을 가리키는 'document.querySelector('#night_day')'를 'this'로 치환
2) 반복되는 'document.querySelector('body')'를 변수 var에 저장

<input
  id="night_day"
  type="button"
  value="night"
  onclick="
   var target = document.querySelector('body');
     if (this.value === 'night')
      { target.style.backgroundColor = 'black';
        target.style.color = 'white';
        this.value = 'day';
      } else {
        target.style.backgroundColor = 'white';
        target.style.color = 'black';
        this.value = 'night';
      }
      ">

---

7. array

물건이 많을 때 물건 하나하나를 기억하기보다 많은 물건을 각종 수납 상자에 보관해 물건이 담겨있는 수납 상자를 기억하면 편하다.
마찬가지로 data를 배열이라는 수납 상자에 보관하면 해당하는 배열만 생각하면 돼서 편하다.
ㄴ 3번의 MDN 문서에서도 객체를 가방(collection)에 비유했다.
ㄴ 배열은 객체이다.
배열을 사용하면 몇 천 개의 변수를 생성하지 않고, 하나의 변수에 모든 데이터를 가지고 있을 수 있다.
형식은 []이고 대괄호 안에 data를 담는다.
순서에 따라 정보를 정리정돈하며, index로 data를 출력할 수 있다.
ㄴ 배열이름[index]로 배열에 접근한다.
배열의 개수는 .length 속성을, 배열을 추가할 때는 .push 속성을 사용한다.
배열을 조작할 땐 index로 접근하여 수정/추가하거나 push, unshift method로 추가, pop method로 제거할 수 있다.
Array.map()인 map method는 배열을 반복해주는데, callback 함수에서 return한 값으로 매 요소를 수정한다.
map method의 return 값은 수정된 값으로 다시 생성된 배열이다.

---

8. loop

coding할 때 동작을 반복시키고 싶다면 code를 반복적으로 작성해도 되지만 while이나 for같은 조건문을 사용하는 것이 현명하다.
또한 data가 바뀌었다고 logic을 바꾸어야 하는 code는 비효율적이므 변수, 비교연산자, 조건문, 반복문을 활용해 효율을 높이자.

↓ while문의 형식

while (boolean type data){
조건이 false가 될 때까지 실행되는 code (true인 동안 계속 실행되는 code)
} false가 되면 중괄호에서 나오면서 반복이 종료되거나 이 자리에 짠 다른 code가 실행됨

↓ 공식 문서에는

while (condition){
statement
}; 

반복문은 순서대로 실행되는 program의 실행 순서, 즉 흐름을 제어하는 제어문이다. w/ 조건문
하지만 연속성이 있으므로 연속적이지 않은 code를 반복시키고 싶을 땐 한계가 있다.

    array & loop

<h1>Loop, Array</h1>
  <script>
    var fruites = ["strawberry", "fig", "orange", "melon"];
  </script>
  <h2>Fruites I Like</h2>
    <ul>
      <script>
        var i = 0;
        while (i < fruites.length) {
               document.write('<li><a href="http://fruites.com/'+fruites[i]+'">'+fruites[i]+'</a></li>');
            i = i + 1;
        }
      </script>
    </ul>

🧐❓ 위 내용을 보다 갑자기 등장한 i가 궁금했다. 그래도 위 code에서의 i는 이해가 되었는데, 다음의 code에서는 i의 등장이 생뚱맞게 느껴졌다. 🧐

let count = 1;
for (let i = 0; i <= 5; i++) {    
  count = count + 1;
}

정답은 (공식 문서)에 있었다.

↓ for문의 형식

for ([initialization]; [condition]; [final-expression])
   statement; 

let i = 0은 initialization, i <= 5는 condition, i++은 final-expression이다.

• initialization : 주로 counter 변수를 초기화할 때 사용하며 반복문의 지역 변수로서 식의 결과는 버려짐
• condition : 매 반복마다 평가할 식으로서 결과가 참이면 statement를 실행하고, 이 식을 넣지 않았을 때 계산 결과는 언제나 참이며, 계산 결과가 거짓이면 for문 바로 다음 식으로 건너뜀
• final-expression : 매 반복 후 평가할 식으로서 다음 번 condition 평가 이전에 발생하며 주로 counter 변수를 증감하거나 바꿀 때 사용

↓ 또 다른 예시 (배열 중 최소값 구하기)

function findSmallestElement(arr) {
  if (arr.length === 0) {
    return 0;
  } else {
    let min = arr[0];
    for (let i = 0 ; i < arr.length ; i++){
      if (arr[i] < min) {
        min = arr[i];
      }
    } return min;
  }
}

---

9. function

배열에 이은 또 다른 수납 상자이다. (흔히 자판기 혹은 마술 상자로 비유되는 그것이다.)
입력과 출력으로 이루어져 있다.
사실 모든 JavaScript는 function 객체이다.
ㄴ function(){}.constructor === function이 ture인 것이 그 증거이다.
참고로 '함수'는 '명령'이라고도 하며, 객체에 속해있는 함수는 'method'라고 한다.
ㄴ document.querySelector('body')에서 document가 객체, querySelector('body')가 함수인 것을 알 수 있는데, 여기에서는 객체에 속한 함수이므로 querySelector('body')를 method라 부른다.
변수, 비교연산자, 조건문, 반복문 등과 마찬가지로 많은 code를 정리할 때 함수를 사용할 수 있으므로 유지・보수에 좋다.
위에서 함수를 선언/정의하고, 아래에서 호출한다.
함수를 호출할 땐 함수명()이라고 쓴다.
ㄴ 선언만 하면 함수를 정의한 것일 뿐 실행되지 않으므로 호출해서 실행시켜야 한다.
ㄴ 변수에 어떤 인자가 전달될지는 함수를 호출할 때 결정하는 것이므로 함수를 선언하는 영역에서 매개변수에 새로운 값을 넣으면 안 된다.

↓ function문의 형식

function 내가정한함수명(){
  함수 실행 단위 (재사용하고 싶은 코드)
  return 함수에서 반환할 값 (return할 것이 있다면 작성)
}


↓ 함수를 선언하는 영역에서 매개변수에 새로운 값을 넣었으므로 안 좋은 예시

function alertSigninSuccess(name) {
  🙅‍♀️ let name="Micheal";
  alert(name+"님 로그인 성공!");
}
  🙆‍♀️ alertSigninSuccess("Micheal");

함수 안에서 또 함수를 호출할 수도 있다.

MDN docs. function

    parameter & argument

   함수는 입력과 출력으로 이루어져있는데, 입력에는 parameter(매개'변수')와 argument(인자)가 있다.
   아래 코드에서 left와 right가 parameter(매개변수)이고, 2, 3, 3, 4가 argument(인자)이다.
   즉, 매개변수 자리에 인자를 저장한다.
   인자는 함수를 호출할 때 매개변수를 통해 사용되는 것이다.
   매개변수는 함수를 호출할 때 인자를 전달받아서 매개변수의 이름으로 함수 안쪽에서 사용된다.
   매개변수가 값을 받으면 그 값이 바로 함수로 전달된다.

function sum(left, right){
  document.write(left+right+'<br>');
}
sum(2,3); // 5
sum(3,4); // 7

    return

   함수의 출력
   '1 + 2 = 3'에서 '1 + 2'가 3의 표현식이듯, 1===1은 ture에서 1===1은 ture의 표현식이다.
   return을 생략하면 함수는 undefined를 반환한다.
   그러므로 return은 함수의 표현식이다.
   함수를 호출하기는 했는데, 그게 뭔지를 알 수가 없으니 return에서 변수명을 지정하기도 한다.
   그러므로 함수를 쓸 때 함수명, 매개변수, 인자, return 등에 이름을 지정해 주어야 한다.

function sum(left, right){
  return left+right;
}
// 함수에 의해 도출된 결과를 어떻게 활용할 건지는 아래에 기재
document.write(sum(2,3)+'<br>');
document.write('<div style="color:red">'+sum(2,<3)+'</div>');
document.write('<div style="font-size:3rem;">'+sum(2,3)+'</div>');

---

✓ refactoring

<body>
  <input
    type="button"
    value="night"
    onclick="
     var target = document.querySelector('body');
       if (this.value === 'night')
        { target.style.backgroundColor = 'black';
          target.style.color = 'white';
          this.value = 'day';
        } else {
          target.style.backgroundColor = 'white';
          target.style.color = 'black';
          this.value = 'night';
        }
        ">
</body>

↓
1) event를 head 영역에 함수로 기재
2) body에는 head에서 선언한 함수명만 기재
3) 전역 개체를 관리하기 위해 'this' 부분을 수정

<head>
  function nightDayHandler(modeChange){
  	var target = document.querySelector('body');
     if (modeChange.value === 'night')
      { target.style.backgroundColor = 'black';
        target.style.color = 'white';
        modeChange.value = 'day';
      } else {
        target.style.backgroundColor = 'white';
        target.style.color = 'black';
        modeChange.value = 'night';
      }
  }
</head>
<body>
  <input
    type="button"
    value="night"
    onclick="nightDayHandler(this)"
  >
</body>

---

10. object

함수라는 기반 위에 객체가 존재한다.
객체를 사용하는 여러 이유 중 객체 역시 정리정돈의 수단으로 사용할 수 있다는 장점이 있다.
객체란 많은 함수와 이들 사이에 서로 연관된 변수를 같은 이름으로 그룹핑해서 잘 정리하기 위한 도구이다.
배열에는 순서가 있지만 object는 순서를 보장하지 않는다.
ㄴ 즉, 객체는 순서가 바뀌어도 상관없다.
객체는 Key와 값(Value)의 조합으로 이루어진 data이며, index로 값에 접근하는 배열과 다르게 key로 값에 접근한다.
객체는 중괄호로 감싸진 key-value(property)의 형태를 갖는다.
property 이름은 중복되면 안 된다.

객체이름 = {
property이름1: property값,
property이름2: property값
};

객체에 이미 key가 존재하는데, 다시 한 번 할당하면 값이 교체(수정)된다.
이전에 없던 key로 접근하면 새로운 property가 추가 된다.

<script>
const members = {
  "vocalist" : "JK",
  "dancer" : "J-Hope"
};
document.write(members.vocalist);
document.write(members.dnacer);
// 아래는 객체에 값을 추가하는 code
members["team leader"] = "RM";
// 위처럼 key 값에 띄어쓰기가 있다면 대괄호 안에 적어야 함. 'member.tea leader'라고 하면 안 됨.
</script>

↓ 모든 객체 값을 불러오려면

<script>
  for (const key in members) {
    document.write(key+' : '+members[key]+'<br>';
</script>

변수를 선언할 때는 할 수 없었지만 객체의 key에는 한글, 특수문자, 공백, 변수 등이 쓰일 수 있다.
ㄴ 단 공백, 변수, 숫자로 되어 있는 key에 접근할 때는 dot 말고 대괄호로 접근해야 한다.
     즉 property에 접근할 때 객체이름.property이름 또는 객체이름["property이름"]
객체는 문자, 숫자, 배열, 객체 등 어떠한 data도 담을 수 있으며, 심지어 함수도 담을 수 있다.

<script>
const members = {
  "vocalist" : "JK",
  "dancer" : "J-Hope"
};
members["team leader"] = "RM";
</script>

↓
1) 'members'라는 객체에 'showAll'이라는 함수 추가
2) 'members'라는 변수 값이 변경될 수 있으므로 자신을 뜻하는 'this'로 수정

<script>
  members.showAll = function(){
  for(const key in this) {
    document.write(key+' : 'this[key]+'<br>');
  }
}
members.showAll();
// 같은 결과 도출
</script>

console.log()도 형태를 보면 객체이다.
JavaScript 어디에나 접근이 가능하므로 global 객체이다.
console 다음에 dot(.)으로 property에 접근했고, log라는 key의 값은 함수이다.
log는 console 이라는 객체의 method인 것이다.

✓ interface

두 system 간의 상호 작용 장치

• UI : User Interface, 사용자와 computer가 상호 작용하는 장치 ex. button
• API : Application (응용) Program Interface, 응용 program과 computer/운영 체제와 상호 작용하는 장치 ex. alert
  ⇒ 내가 JS를 가지고 API를 programming하면 사용자가 UI를 경험

---

---

Endnote

🔗 related documents

MDN docs

🙇 the source of this content

MDN docs
생활코딩
WeCode