[2주차] Step2(JavaScript Part1)

* 이 자료는 제가 복습하기 위해서 작성한 내용입니다. 제대로 공부하시려면 바닐라코딩에서 공유한 스타터키트를 참고하시길 바랍니다.

 

1. 7월 13일 / 2주차

2. 알고 있는 내용

- 자바스크립트의 역할: 웹페이지가 동적으로 움직이도록 만들어줄 수 있다. => 자바스크립트는 HTML의 특정 요소(들)을 선택하여 "이벤트"(마우스 클릭, 키보드 입력 등)에 따라 어떤 동작을 하도록 기능을 넣어줄 수 있다. 자바스크립트는 이벤트에 따라 HTML이나 CSS를 조작할 수도 있고 그 외에도 여러가지를 할 수 있다. (예를 들면 아래와 같이 스크롤 이벤트에 따라 화면에 다른 글자, 다른 이미지가 나오게끔 할 수 있다)

- 한 줄 코멘트는 // 로, 한 줄 이상의 코멘트는 /* */ 로 작성하기

// 한 줄 코멘트

/*
  여러줄 코멘트
  여러줄 코멘트
  여러줄 코멘트
*/

 

- 변수란 프로그램을 작성하는 과정에서 우리가 만든, 자바스크립트 프로그램이 이해하고 알아볼 수 있는 단어들을 의미한다.

 

- 변수를 선언할 때 지어주는 이름을 Identifier(식별자)라고 부른다. 자바스크립트에서 Identifier는 몇 가지 규칙을 반드시 따라야 하는데, 1) 숫자, 알파벳, $, _ 가 사용될 수 있지만, 숫자로 시작할 수는 없다. 2) Javascript Keyword(Reserved Words)는 Identifier가 될 수 없다. (예를 들면 var, let, const 는 Identifier가 될 수 없다)

 

- 자바스크립트로 숫자 연산하기

var num = 1; // 1. 숫자를 변수에 담기

var num2 = num * 2; // 2. 숫자 연산하기
var remainder1 = 30 % 4; // 2 : 30을 4로 나눈 나머지

var result = 3 + 7 * 2; // 3. 연산 우선순위는 수학에서 배운 것과 동일한 방식으로 곱하기와 나누기가 더하기와 빼기보다 더 우선시 된다.

var result = 3 > 7; // 4. 비교, 부등호를 이용하여 비교할 수 있다. false

var one = 5; // 5. 같은 수 판별
var two = 5;
console.log(one === two); // true

var a = 1; // 6. 같은 수 증가시키기
a = a + 1;

var a = 0; // 7. 유효하지 않은 숫자 연산
var b = 0;
var c = a / b; // NaN

var a = typeof 10; // 8. 숫자 판별하기
console.log(a);  // "number"

 

- String(문자열)이란 따옴표로 감싸져 있는 텍스트이다. 단순히 텍스트 값들을 저장하는 것이라고 생각하면 된다. 

 

- 자바스크립트에서 우리가 다루는 값들은 여러 가지 종류가 있고, 그 종류에 따라 우리는 아래와 같이 7가지로 분류할 수 있다. 즉, 자바스크립트에서 모든 값들은 아래 7가지 종류 중 하나이다.

1) String Type(문자열)

2) Number Type(숫자)

3) Boolean Type: true, false

4) Undefined Type: 특히 객체에서 없는 속성에 접근할 경우에도 undefined 값이 결과로 도출된다.

5) Null Type

6) Object Type: 배열과 함수도 객체에 포함
7) Symbol Type

 

- Logical NOT Operator: ! / Logical OR Operator: || / Logical AND Operator: &&

 

- Falsy 한 값 목록

0
-0
false
undefined
null
""
''
``
NaN

 

- 자바스크립트에서 우리는 어떤 조건에 의 해 코드의 실행을 제어할 수 있다. 

 

- 특정 패턴의 코드를 반복할 때 반복문(Looping Statement)를 사용할 수 있다.

3. 알고 있다고 생각했지만 몰랐던 내용(또는 강조할 내용)

- 입문자 수준에서는 이론적인 공부도 물론 중요하지만, 많은 실습을 해보고 경험을 쌓는 것이 더욱 중요하다. 시간을 많이 투자하여 얻은 많은 경험을 통해서 성장할 수 있다.

 

- undefined와 null의 용도 차이: 

1) undefined: 어떤 변수를 만들고 그 값을 정의해주지 않았을 때 사용되곤 한다. 값이 대입되지 않은 상태를 위해 많이 사용된다.

2) null: undefined와는 다르게 의도적으로 값이 없음을 표현하고 싶을 때 대입해주곤 한다. => 변수 사용이 끝나고 더 이상 사용하지 않을때, 의도적으로 값이 없다고 표현할 때 null 을 쓰는 상황이 있으므로 이런 표현에, 논리에 익숙해지자

// 변수를 생성하고, 아무 값도 지정(정의)해주지 않았습니다.
let k;
console.log(k); // undefined

// 위의 코드처럼 아무 값도 대입해주지 않으면 기본으로 undefined라는 값이 대입되기 때문에,
// 아래 코드처럼 undefined를 명시적으로 대입해주는 코드는 잘 사용하지 않습니다.
let o = undefined;
console.log(o); // undefined

let title = "Bootcamp";

// 위 title를 이용한 작업을 실행함.. Blah Blah....

// title를 이용한 작업이 모두 종료되고,
// 더 이상 사용하지 않을 계획이라 title를 의도적으로 없다고 표현함
title = null;

 

- [], {}: true

 

- 반복문 중단하기: break

console.log('before for loop');

for (var i = 1; i < 11; i += 2) {
  if (i === 7) {
    break;
  }

  console.log(i); // 1 3 5
}

console.log('after for loop');

 

- 반복 구문 중단하기: continue

console.log('before for loop');

for (var i = 1; i < 11; i += 2) {
  if (i === 7) {
    continue;
  }

  console.log(i); // 1 3 5 9
}

console.log('after for loop');

4. 몰랐던 내용  

- vscode 에서 /** 을 입력해도 여러줄 주석, 코멘트가 가능하다. 하지만 개인적으로 나는 /**는 주로 코드를 설명할 때 쓰일 때 편하다고 생각한다. 작성하고 있는 코드를 주석처리 할 때는 /** 로 쓰기가 불편했다.

 

- Boolean 객체는 불리언 값을 감싸고 있는 객체이다. Boolean 원시 값의 자리에서 Boolean 객체를 이용해선 안된다.

 

- isNaN() 함수는 어떤 값이 NaN인지 판별한다. isNaN 함수는 몇몇 혼란스러운 케이스을 가지고 있으므로, ECMAScript 2015에서 추가한 Number.isNaN()으로 바꾸는 편이 좋을 수도 있다.

 

- Operator Precedence: AND 연산자의 우선순위가 OR 연산자의 우선순위보다 높다.

5. 추가 학습 자료

- 자바스크립트 예약어

- https://poiemaweb.com/js-data-type-variable

- https://www.w3schools.com/js/js_booleans.asp

- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Boolean

- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/switch