일상코딩/노트

javascript : BasicSyntax

코딩애벌레 2024. 4. 17. 14:30

오늘 배워볼 것은 JavaScript를 사용할 때 필요한 문법들을 배워볼 것이다. 3달전에 파이썬 문법 배울때가 새록새록한데 벌써 JS 문법을 배운다니... 정말 많이 배우고 있는 것 같다. 파이썬과 다른 부분이 많다보니 헷갈리는 문법들이 많은데, 그래도 뉘앙스가 비슷해서 이해하기는 쉬웠던 것 같다. 오늘도 화이팅.

아직 공식문서를 보는것이 익숙치는 않은데, 해당 페이지는 한국어로도 잘 해석되어있고 뭔가 귀여워서 보면서 하는게 좋을 것 같아서 링크를 첨부했다.

 

JavaScript Standard Style

English • Español (Latinoamérica) • Français • Bahasa Indonesia • Italiano (Italian) • 日本語 (Japanese) • 한국어 (Korean) • Português (Brasil) • 简体中文 (Simplified Chinese) • 繁體中文 (Taiwanese Mandarin) 이것은 Ja

standardjs.com

 


식별자(변수명) 작성 규칙
  • 문자, 달러('$') 또는 밑줄('_')로 시작
  • 대소문자를 구분
  • 예약어 사용 불가 (for, if, function 등)

파이썬과 다르게 안되면 빨간줄로 그어준다!

 


식별자(변수명) Naming case
  • 카멜 케이스 (camelCase)
    • 변수, 객체, 함수에 사용
  • 파스칼 케이스 (PascalCase)
    • 클래스, 생성자에 사용
  • 대문자 스네이크 케이스(SNAKE_CASE)
    • 상수(constants)에 사용

 


변수 선언

 

변수 선언하는 키워드는 3가지로 let, const, var이 있다. 이 중 var은 현재 쓰이지 않지만, let과 const를 사용하지 않고 변수를 설정하면 var로 자동 기본값 설정이 되니 주의하자.

 

변수 선언 키워드

let

 const var

- 블록 스코프(block scope)를 갖는 지역 변수를 선언

- 재할당 가능

- 재선언 불가능

- ES6에서 추가

 - 블록 스코프(block scope)를 갖는 지역 변수를 선언

- 재할당 불가능

- 재선언 불가능

- ES6에서 추가
- ES6 이전에 변수 선언에서 사용했던 키워드

- 재할당 가능

- 재선언 가능

- 함수 스코프(function scope)를 가짐

- 변수 명시하지 않으면 기본값으로 사용

- 호이스팅(hoisting) 발생

let 변수 할당의 경우와 const 변수 할당의 경우를 모두 나타냈다

 

 

블록스코프

: if, for, function 등의 '중괄호 { } 내부'를 가르키며 블록 스코프를 가지는 변수는 바깥에서 접근이 불가능하다. 이 부분은 파이썬과 굉장히 다른 점이므로 유의하자.

위의 출력과 아래의 출력은 다르다

데이터 타입

 

데이터 타입은 크게 2가지로 원시 자료형, 참조 자료형으로 나뉜다. 파이선과 비교해서 어려운 것은 없지만, null과 undefined에 관련해서 짚고 넘어가야할 내용이 있다. 곧 다룰 내용이니 인지만 해두고 일단 넘어가자!

데이터 타입

원시 자료형 (Primitive type)

 참조 자료형 (Reference type)

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

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

- Number

- String

- Boolean

- null

- undefined

 Objects(Object랑 다른 의미)

- Object

- Array

- Function

 

불변 자료형(원시 자료형)에 속하는 String : apple 와 Number : a로, 변수 간에 서로 영향을 미치지 않는다

 

참조 자료형인 객체(Object)이므로 값이 복사되어 원본에 영향을 끼친다

 

이러한 과정은 파이썬에서도 깊은복사 얕은복사와 유사한 개념이다.

 


Number 자료형
  •  Integer, Float, Infinity, NaN(Not a Number) 등 사용 가능하다.

파이썬에서 보지못한 Infinity와 NaN이 있다

 


String 자료형
  • '+' 연산자를 사용해 문자열끼리 결합
  • 뺄셈, 곱셈, 나눗셈 불가

문자열의 경우 + 연산자를 통해 문자열을 연결할 수 있다

 

Str의 + 연산은 파이썬과 동일하다. 하지만 파이썬에는 곱셈인 *까지 가능했지만, JavaScript에서는 허용하지 않는다.

 


null 과 undefined

 

null의 경우 타입을 확인 시 객체로 출력되니 주의하자

 

null : 변수의 값이 없음을 의도적(직접)으로 표현할 때 사용

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

 

'값이 없다'의 의미를 가진 null과 undefined 2가지 인 이유

  • JavaScript의 설계 실수
  • null이 원시 자료임에도 불구하고 object로 출력되는 이유는 설계 당시 버그를 해결하지 않음
  • 이후로도 고치지 못하는 이유는 이미 null타입에 의존성을 띄고있는 수 많은 프로그램들이 호환성 문제가 생길 수있기 때문 

 


Boolean (true / false)
  • 조건문 또는 반복문에서 Boolean이 아닌 데이터 타입은 "자동 형변환 규칙"에 따라 true / false로 변환 가능
자동 형변환
데이터 타입 false true
undefined false X
null false X
Number 0, -0, NaN false 외의 모든 경우
String ' ' (빈 문자열) false 외의 모든 경우

 

연산자

 

파이썬과 다른 부분이 다소 있으니 자세히 살펴봐야한다. 특히 파이썬에서는 암묵적 형변환, 존재하지 않는 증가&감소 연산자와 동등/일치 연산자는 꼭 알아두자! (물론 다 알아야함)

  • 할당 연산자
  • 증가&감소 연산자
  • 비교 연산자
  • 동등 연산자
  • 일치 연산자
  • 논리 연산자
// js 내에 암묵적 형변환

console.log(7 + 7 + 7); // 21
console.log(7 + 7 + "7"); // "147"
console.log("7" + 7 + 7); // "777"

console.log(true + 7 + 7);
console.log(7 + true + "7"); // "87"
console.log("7" + 7 + true); // "77true"

// -, *, / , % 연산자는 모든 변수를 먼저 Number 자료형으로 변환한다.
console.log(7 - true); // 6
console.log("13" - 3); // 10

할당 연산자

 

  • 오른쪽에 있는 피연산자의 평가 결과를 왼쪽 피연산자에 할당하는 연산자
  • 단축 연산자 지원(파이썬과 동일)

파이썬과 동일하니 너무 반갑다

 


증가 & 감소 연산자 (++, --)

 

  • 증가 연산자 ( ++ )
    • 피연산자를 증가(1 증가)시키고 연산자의 위치에 따라 증가하기 전이나 후의 값을 반환
  • 감소 연산자 ( -- )
    • 피연산자를 감소(1 감소)시키고 연산자의 위치에 따라 감소하기 전이나 후의 값을 반환

헷갈릴 수 있으니 명시적인 표현인 '+=' 와 '-=' 표현을 권장

 


비교 연산자

 

  • 피연산자들(숫자, 문자열, Boolean 등)을 비교한 후 결과 값을 boolean으로 반환하는 연산자를 의미
  • 파이썬과 달리 True > true / False > false로 바뀐것 헷갈리지 말자.

문자열 같은 경우는 유니코드 코드 포인트로 자동 변환 연산한다

 


동등 연산자 ( == )

 

  • 두 피연산자가 같은 값으로 평가되는지 비교 후 boolean 값을 반환
  • '암묵적 타입 변환'을 통해 타입을 일치 시킨 후 같은 값인지 비교한다
  • 피연산자 모두 객체일 경우 메모리의 같은 객체를 바라보는지 판별한다
// == 동등 비교 연산자로 비교할 때에 암시적 형변환 순서
// 피연산자 중에서 Boolean/String 자료형은 Number 로 형변환
// 피연산자 중에서 Null 과 Undefined 자료형 - > 양 측이 모두 Null or Undefined인 경우에만 true
// 피연산자 중에서 객체(참조형)을 원시자료형과 비교하는 경우 - > 객체를 원시 자료형으로 강제 형변환
console.log(1 == 1); // true
console.log("1" == 1); // 1 == 1 - > true
console.log(null == undefined); //true
console.log(0 == null); // false
console.log(0 == undefined); // false
console.log([] == false); // true
// toPrimitive([])
// '' == false
// 0 == false
// 0 == 0
console.log({} == false); // false
// toPrimitive([])
// '[object Object]' == false
// NaN == false
// NaN == 0

 

 


일치 연산자 ( === )

 

  • 두 피연산자의 값과 타입이 모두 같은 경우 true를 반환한다
  • 같은 객체를 가리키거나, 같은 타입이면서 같은 값인지 비교한다
  • 엄격한 비교가 이뤄지며, 암묵적 타입 변환은 발생하지 않는다
  • 특수한 경우(null과 undefined)를 제외하고는 동등 연산자가 아닌 일치 연산자 사용을 권장
  • 파이썬에서 일반적으로 사용했던 ( is )과 동일하나 차이가 있다.

동등 연산자와 일치 연산자의 차이점을 볼 수 있다

 


논리 연산자

 

  • && (and 연산)
  • || (or 연산)
  • ! (not 연산)
  • !! (논리 부정 연산)
  • 단축 평가를 지원한다
  • Falsy 조건들이 존재한다

[] 와 {}는 빈 배열이지만 존재하는 객체이므로 논리 부정 연산에서 true를 반환한다

 

 

if 조건문

: 조건 표현식의 결과값을 boolean 타입으로 변환 후 참 / 거짓을 판단한다

if 조건문의 틀은 왼쪽과 같고 파이썬과 달리 elif 는 존재하지 않기 때문에 else if를 사용하여 이어서 쌓아주면 된다.

 


삼항 연산자 (if 조건이 들어가기 때문에 조건문으로 정리했다)

 

삼항 연산자 기본 틀

  • condition : 평가할 조건 (true or false로 평가)
  • expression1 : 조건이 true일 경우 반환할 값 또는 표현식
  • expression2 : 조건이 false일 경우 반환할 값 또는 표현식

간단한 사용 예시. 복잡한 로직에서는 가독성이 떨어질 수 있으므로 적절하게 사용

반복문

  • while
  • for
  • for ... in
  • for ... of

이 부분은 파이썬이 매우 그리워진다. 파이썬은 반복문 2개면 되는데.. javascript에서는 어떤 자료형이냐에 따라 활용 방법이 있어서 적절히 활용해줘야한다.


while 반복문

 

: 조건문이 참이면 표현식을 계속해서 수행

파이썬과 동일하게 condition을 만족하면 실행한다
반복문의 예시로 num이 5가 될때까지 출력한다

 


for 반복문

 

: 특정한 조건이 거짓으로 판별될 때까지 반복

for 반복문 자동완성을 하게된다면 위의 틀이 자동으로 생성된다

 

반복문 내부에 들어가있는 ' ; ' 의 경우 괄호 내부에서 문장이 끝난 것을 명시해줘야 하기 때문에 반드시 필요

 

.length는 array의 길이를 구하는 method이며 위의 for문은 인덱스를 통해 접근했다
for 반복문의 동작 원리는 위의 주황색 화살표를 따라가는 것과 동일하다

 


for ... in 반복문

 

: 객체의 열거 가능한 속성(property)에 대해 반복

조건문 if가 포함되어있지만, 삭제하고 statement만 작성해도 무관하다. (안전장치)
foodList를 순회하면서 spell이라는 key를 반복하고, key로 foodList의 value를 뽑아낸다

 

여기서 객체를 열거 가능한 속성이지만 iterable하지 않다. 따라서 다음에 나올 for ... of에는 사용이 불가하다. 하지만 Array경우 객체라고 배웠지만, 특수하기 때문에 for ... in / for ... of 둘 다 사용 가능하다. 하지만 주로 for ... of를 사용한다

 


for ... of 반복문

 

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

형태는 가장 단순하게 생긴 친구다
단순하게 생긴 친구만큼 깔끔하게 array 내부를 순회한다

 

파이썬에서 for 반복문 사용시 range를 사용하지 않고 list를 순회하는 방법과 동일하다. array 경우 for in도 사용 가능한데, 위와 동일한 결과를 출력하려면 index를 통해 array에 접근하는 방식이다.

array[index]가 for ... of 로 돌린 결과와 같은 값을 출력하는 것을 알 수 있다

for ... in 과 for ... of 비교

Array의 경우 for in for of 모두 사용이 가능하고, 객체의 경우는 for in만 사용하며 for of로 사용하게되면 TypeError를 맛볼 수 있다

 

  • 객체 관점에서 배열의 인덱스는 정수 이름을 가진 열거 가능한 속성
  • for ... in 은 정수가 아닌 이름과 속성을 포함하여 열거 가능한 모든 속성을 반환
  • 내부적으로 for ... in 배열의 반복자가 아닌 속성 열거를 사용하기 때문에 특정 순서에 따라 인덱스를 반환하는 것을 보장할 수 없다. (위에서 순서가 있어보이지만 실제로는 그렇지 않을 수 있다는 뜻) 
  • 따라서 인덱스가 중요한 배열(Array)에서는 사용하지 않는다
  • 배열의 경우 for 문 or for ... of 를 사용한다

부록

반복문 종합

키워드 특징 스코프
while . 블록 스코프
for  .
for ... in object 순회
for ... of iterable 순회

 

세미콜론(semicolon)

  • javascripts는 문장 마지막 세미콜론 ( ; ) 을 선택적으로 사용 가능
  • 세미콜론이 없으면 ASI(Automatic Semicolon Insertion, 자동 세미콜론 삽입 규칙)에 의해 삽입된다

함수 스코프 (function scope)

  • 함수의 중괄호 내부를 가리킴
  • 함수 스코프를 가지는 변수는 함수 바깥에서 접근 불가능

 

호이스팅 (hoisting)

  • 변수를 선언 이전에 참조할 수 있는 현상
  • 변수 선언 이전의 위치에서 접근 시 undefined를 반환한다

var는 사용가능하지만 undefined를 반환하며, 나머지는 참조 에러를 발생시킨다

 

NaN을 반환하는 경우 예시

  • 숫자로서 읽을 수 없을 때
  • 결과가 허수인 수학 계산식
  • 피연산자가 NaN일 경우
  • 정의할 수 없는 계산식
  • 문자열을 포함하면서 덧셈이 아닌 계산식

NaN을 직접적으로 쓸 일은 없지 않을까..?

언어를 배우는 초기에는 정의 되는 것도 많고 외워야 할 것이 많아서 머리가 아파오는거 같다. 하지만 Python보다는 현업에서 많이 사용되는 언어이기 때문에 동기부여는 충분히 되고 있는 것 같다. 나는 과연 front와도 어울릴까..? 모르면 열심히하자.

728x90