[항해99] W2 Javascript 기초문법 (1)

1. 변수 선언, 대입 연산자

변수 선언 키워드 [ var / let / const ]

1) var

• var 문은 변수를 선언하고, 선택적으로 초기화할 수 있다.
• "전역변수" : let과 유사하지만 스콥의 범위가 전역에 적용된다.
• var hoisting : 변수가 선언되기 전에 사용이 가능하다는 것은 변수 선언이 함수 또는 전역 코드의 상단으로 이동되는 것과 같다. 이 '이동되는 것과 같게 인지하는 것'을 호이스팅(hoisting)이라고 부른다.

2) let

• "지역변수" : 블록 스콥의 범위를 가지며, 선언과 동시에 임의의 값으로 초기화할 수 있다.
• 프로그램 최상위에서 사용 시, var와 달리 let은 전역 객체에 속성을 추가하지 않는다.

// let과 var의 스콥 차이를 이해하지 못했을 때 발생할 수 있는 오용 case
let x = 1;
{var x = 2;} // 재선언으로 인한 SyntaxError 발생

3) const

• const 키워드는 블록 범위의 상수를 선언한다. *재할당 및 재선언 불가
• 이 선언은 함수에 전역 또는 지역일 수 있는 상수를 만들어내므로, 상수 초기자를 필요로 한다.
  선언문에 상수 초기값을 지정해주어야 하며, 이 값은 변경할 수 없다.
• 상수 선언 시 대소문자 모두 사용할 수 있지만, 관습적으로 대문자로만 사용한다.
• ex. MY_FAV를 상수로 정의하고, 그 값을 7로 정했을때의 예시 error case

  		const MY_FAV = 7;
  		MY_FAV = 20; //에러 발생
  console.log('my favorite num is: " +MY_FAV); //상수 7 정상 출력
  //상수 재선언 시도
  const MY_FAV = 20; // - Uncaught SyntaxError: Identifier 'MY_FAV' has already been declared
  // var, let 으로 재선언 시도
  var MY_FAV = 20; // 에러 발생
  let MY_FAV = 20; // 에러 발생

대입 연산자 키워드 [ = ]

• 키워드 좌측에는 대입할 변수, 우측에는 대입할 값을 입력하여 사용

• [ += ][ -= ] [ variable++ ][ variable-- ] 와 같은 구문설탕 참고

구문설탕(Syntactic sugar)
- 더 쉽게 읽거나 표현할 수 있게 설계된 프로그래밍 언어 내의 '구문'
* 일반적인 구문보다 더욱 읽고 쓰기 쉽기 때문에 "인간이 사용하기에 언어를 ✌️더 달콤✌️하게 만든다"고 해서 구문설탕이다 😂
- 일반적으로 구분설탕은 '일반적인 작업의 약어'라고 보면 된다.

ex.
```
get_array(Array, vector(i,j)) 
Array[i,j]

set_array(Array, vector(i,j), value) 
Array[i,j] - value
```

2. 비교 연산자

1) ===

• 양쪽의 위치한 값이 같은 경우 True, 다른 경우 False 로 평가

2) !==

• 양쪽에 위치한 값이 같은 경우 False, 다른 경우 True로 평가
  - ! = Not

3) > , <

• : 좌측 값이 더 클 때 True, 같거나 우측 값이 더 클 때는 False

• < : 우측 값이 더 클 때 True, 같거나 좌측 값이 더 클때는 False

4) >= , <=

• = 기호를 통해 값이 같을 때에도 True로 평가

5) == , !=

• == 와 === 는 같은 기능을 하는 연산자이지만 지양할 것
• != 와 !== 또한 같은 기능을 하는 연산자이지만 지양할 것
• 자바스크립트(javascript)는 "자동 형변환" 기능을 가졌기 때문에 편리하지만 버그 발생률이 높다.
  - 자동 형변환이 적용되는 경우, '10' == 10 값은 True
  (숫자 자료형을 가진 값에 자동 형변환이 적용되는 경우, 문자열로 반환이 가능하다고 여겨 '10' === '10' 으로 인지됨)
• == , != 2가지 모두 버그를 유발하기 쉬운 방식으로 === , !== 를 우선적으로 사용하자.

3. 자료형

1) Boolean (불리언) : 원시 자료형 / True, False

2) String (문자열) : 원시 자료형 / 'value', "value"

3) Number (숫자) : 원시 자료형 / 10 (10 !== '10')

4) undefined : 원시 자료형 / 값이 할당되지 않은 변수

5) null : 원시 자료형 / 어떤 값이 "비어있는" 값

6) Object (객체) : {key1: value, ke2: value}

• value에는 모든 자료형의 값을 담을 수 있다.
• Python에서 Dictionary 형 = Javascript 의 Object 형
• key를 기준으로 객체에 있는 value에 접근할 수 있다.
• 객체의 key 접근법 👉 Obj.key / obj['key']
  1️⃣ 유효한 자바스크립트 식별자를 사용하지 않는 경우에는 반드시 obj['key'] 표현식 사용
  2️⃣ 여백(space), 대쉬(-) 등 허용되지않는 문자열은 변수 생성 불가, object key로 사용 시에는 따옴표로 감싸야만 함

7) Array (배열) : [value1, value2, value3]

• Python에서 딕셔너리형(Dictionary) 과 리스트형(List)으로 나누어 불렀었으나, Javascript 에서의 공식 명칭은 'Array'다.
• 배열에는 Index 라는 개념이 존재하며, value에 접근하게 해주는 식별자다. (몇번째 값)
  - Index는 0부터 시작한다.
  

8) NaN (Not a Number의 줄임말) : Number 자료형에 속함

• 숫자가 아닌 값을 숫자로 변환하는 경우 NaN으로 반환됨
• NaN은 다른 모든 값과 비교했을 때 같지 않고, NaN 과 NaN 도 같지 않다.
• NaN의 판별은 [Number.isNaN(), isNaN()]을 이용하면 분명하게 판별이 가능하다.
  isNaN() : 현재 값이 NaN이거나, 숫자로 변환했을 때 NaN 인 경우 True
  Number.isNaN() : 현재 값이 NaN 일 때만 True

9) 함수 : 기능의 단위를 묶거나 반복되는 코드를 줄이기 위해 사용

4. 불리언 연산

• Truthy한 값은 True로 평가, Falsy한 값은 False 로 평가
• Falsy 값에는 빈 문자열 [''], 숫자 0, 불리언 false, null, undefined, NaN 이 해당하며 Falsy 하지 않은 값은 Truthy 즉 True.

  중요하니까 Fals한 값 한번 더👇
  빈 문자열 ''
  숫자 0
  불리언 false
  null
  undefined
  NaN

• 항상 Truthy로 판단되는 자료형 [Array, Object]
• 다른 자료형을 가진 값에 강제로 불리언 연산을 적용하려면 Boolean 함수 사용

Boolean('String') // true
Boolean('') // false
Boolean(undefined) // false

5. 조건문

• 조건문은 조건 충족이 될 때만 특정 구문을 실행한다.
• 논리적인 로직을 표현할 때 가장 중심이 되는 구문, 🌸프로그래밍의 꽃🌸
• 조건에 들어가는 값은 항상 불리언 연산이 적용 된다.

1) if ... else *기본형

if (condition1) // 명령문1
else // 명령문 2

2) if ... else + Block

if (condition1) {
// 명령문 1
} else {
// 명령문 2
}

• 이전 웹개발종합반에서 사용하던 방식은 주로 블락형이다.

3) if ... else + Chaining

if (condition1) {
// 명령문 1
} else if (condition2) {
// 명령문 2
} else {
// 명령문 3
} 

• 같은 내용을 아래 구문으로도 표현 가능하다.

if (condition1) {
// 명령문 1
} else {
  if (condition2) {
  // 명령문 2
  } else { 
  // 명령문 3
  }
}

👉 그 외 참조할 개념 [삼항 연산자, switch문]