JavaScript_2)Basic Syntax of JS

HTML, CSS, JS를 묶어서 Web이라는 갈래 안에 두다보니, 프로그래밍 언어에 대한 이해 없이 HTML, CSS를 배우는 사람이 많아졌고, 이러한 사진들을 많이 보게된다. HTML과 CSS는 프로그래밍 언어가 아니지만 JavaScript는 하나의 프로그래밍 언어이며, 우리가 배웠던 파이썬과 같은 갈래에 있다. 그렇다면 파이썬과 어떤 비슷한 점과 차이점이 있는지를 주목해서 공부한다면 그렇게 어렵지 않을 것이다.

변수명 작성 규칙

1. 반드시 문자, 달러($), 언더스코어로 시작 - 파이썬과 유사
2. 대소문자를 구분 - 파이썬과 동일
3. 예약어 사용 불가 - 파이썬과 동일
4. 카멜 케이스(camelCase)를 변수, 객체, 함수에 사용 - 파이썬은 스네이크 케이스(snake_case)
5. 파스칼 케이스(PascalCase)를 클래스, 생성자에 사용
6. 대문자 스네이크 케이스(SNAKE_CASE)를 상수에 사용

변수 선언 키워드(파이썬에선 없음)

1. let

• 블록 스코프를 갖는 지역 변수를 선언
• 재할당 가능
• 재선언 불가능
• ES6에서 추가된 기능
  

2. const

• 블록 스코프를 갖는 지역 변수를 선언
• 재할당 불가능
• 재선언 불가능
• ES6에서 추가된 기능
  

<참고> 블록 스코프(block)

if, for, 함수 등의 중괄호 내부를 가르킴, 블록 스코프를 가지는 변수는 블록 바깥에서 접근 불가능

기본적으로 변수를 선언 할 때, const 사용을 권장하며, 이후 재할당이 필요해지면 let으로 변경해서 사용하자. 사용하지 않으면 var 처리 되는데 이는 ES6 이후 사용하지 않음

자료형(Data)

1. 원시 자료형

   Number, String, Boolean, undefined, null
   변수에 값이 직접 저장되는 자료형(불변, 값이 복사)
   

Template literals(템플릿 리터럴)

내장된 표현식을 허용하는 문자열 작성 방법 - 파이썬의 f-string과 동일
백틱과 달러 중괄호 사용(따옴표가 아님!)

null & undefined

JS의 설계 실수
null은 원시자료형이나 타입을 출력하면 object로 나오는 것도 버그
해결하지 못하는 이유는 null 타입에 의존성을 띄고 있는 수 많은 프로그램이 망가질 수 있기 때문(하위 호환 유지)

1. null

   변수의 값이 없음을 의도적으로 표현할 때 사용

2. undefined

   변수 선언 이후 직접 값을 항당하지 않으면 자동으로 할당됨

Boolean 값의 자동 형변환

2. 참조 자료형

   Objects(Object, Array, Function)
   객체의 주소가 저장되는 자료형(가변, 주소가 복사)
   

연산자

1. 할당 연산자 - 파이썬과 동일
   

2. 증가&감소 연산자(++, --) - 가 존재하지만 += 나 -= 표현을 권장
   

3. 비교 연산자(>, <, >=, <=) - 파이썬과 동일

4. 동등 연산자(==) - 파이썬과 동일

5. 일치 연산자(===) - 파이썬에서의 is 와 동일(엄격한 비교)
   <참고> 동등 연산자 보다는 일치 연산자 사용을 권장함

6. 논리 연산자

• and (&&)
• or (||)
• not (!)
• 단축 평가 지원

  조건문

  
  파이썬과 유사하지만 파이썬은 들여쓰기를 통해 구분하는 것을 JS에서는 (소괄호 내에 조건) {중괄호 내에 함수 로직 작성} 한다.

<참고> 조건(삼항)연산자 - 축약형

반복문

1. while문

   조건문과 구조가 같으며, 파이썬과 사용 로직이 같음

2. for문

for ([초기문]; [조건문]; [증감문]) {
	// do something
}

의 형태로 작성하며 초기문은 변수 선언; 조건문은 while 조건과 유사; 증감문; 의 구조이다.
for 문은 let을 사용해야한다.

3. for ... in 문

   객체의 열거 가능한 속성에 대해 반복 - object 객체일 때 사용
   인덱스의 순서가 중요한 배열에서는 사용하지 않음
   

4. for ... if 문

   반복 가능한 객체(배열, 문자열)에 대한 반복
   

<참고>

위의 사진의 결과의 이유는 arr은 배열이지만 배열 또한 Object이며 키값이 idx인 형태이므로 for in 문을 사용하면 Object로 인식하여 idx를 출력한다.

<참고> 호이스팅

변수를 선언 이전에 참조할 수 있는 현상
변수 선언 이전의 위치에서 접근 시 undefined를 반환
JS에서 변수들은 실제 실행 시에 코드의 최상단으로 끌어 올려지게 되기 때문에 발생

<참고> NaN(Not a Number)를 반환하는 경우의 예시
1. 숫자로서 읽을 수 없음
2. 결과가 허수인 수학 계산식
3. 피 연산자가 Nan
4. 정의할 수 없는 계산식(0*Infinity)
5. 문자열을 포함하면서 덧셈이 아닌 계산식