JavaScript 기초1(Python과 비교하여, ES6 기준) : 자료와 변수

📣 이 자료는 ⎡혼자 공부하는 자바스크립트⎦책과 MDN Web docs를 기반으로 작성되었습니다.

그리고 개인적으로 공부하고 이해한 내용을 바탕으로 정리하는 용도로 작성되었으므로 이해를 돕기위한 예시는 최소화하였습니다.

 

1. 자료와 변수

 

< 기본 자료형>

1. Number 숫자
2. String 문자열
3. Bollean 불(불리언); true of false
4. null 빈값
5. undefined 할당된 값 없음(정의되지 않음)
6. BigInt Number의 최대치인 2^53 - 1보다 큰 정수를 표현할 수 있는 내장 객체

Number 숫자

실수는 float, 정수는 int로 구분하는 python과 달리 JS는 실수와 정수에 관계없이 숫자는 모두 number type이다.

+, -, *, /로 기본적인 사칙연산이 가능하고, %로 나머지를, **로 거듭제곱을 연산할 수 있다. 파이썬에서 사용하는 // (몫을 구하는 연산자)는 없고, 나누기 연산 후 정수로 바꿔주어야 한다. 음과 양의 부호를 표현할때는 해당하는 숫자나 변수 앞에 -나 +를 붙여서 간단하게 표현할 수 있다. 이걸 단항 연산자라고 부르는데 이 둘을 문자열이나 문자열이 담긴 변수 앞에 붙여주면 간단하게 숫자형으로 형변환을 할 수 있다. 그러나 문자열을 숫자로 강제 형변환 시에는 NaN라는 Not a Number(숫자가 아님) 속성이 된다. 그러나 이때에도 type을 검사하면 number로 나오니 주의가 필요하다.

❗️파이썬에서는 문자열을 강제로 숫자형으로 변경을 시도하면 typeError를 일으킨다.

 

String 문자열

큰 따옴표나 작은 따옴표 사이에 들어있는 자료형이다. '\n'을 사용하여 줄바꿈을 표현할 수 있다. 인덱스를 사용해서 내부에 있는 요소를 하나하나 호출할 수 있지만, 내부의 값을 변경하는 것은 불가능하다(이건 파이썬도 마찬가지). 문자열 연산은 +(문자열 연결 연산자)만 가능하고, 파이썬처럼 *연산은 지원하지 않는다. 파이썬의 경우는 len() 함수를 사용하지만, JS는 .length 속성을 통해 길이가 얼마인지 알아볼 수 있다.

또, 파이썬의 f-string 같은 존재는 `(백틱)을 사용한 템플릿 문자열이다. 백틱으로 문자열을 감싸고 코드는 ${ }의 대괄호 사이에 넣어주면 된다. 

 

Boolean 불(불리언)

불 타입은 true와 false가 있고 각각 참과 거짓을 의미한다. 파이썬과의 차이점은 모두 소문자로 이루어져 있다는 것이다(파이썬은 True/False). Boolean 함수에서 false를 return 하는 것은 false, 0(숫자), NaN(Not a Number), ""(빈 문자열), null(빈 값), undefined(정의되지 않음), 이렇게 6가지이다. 이건 유용하게 쓰일데가 있으니 꼭 알아두자. 불타입에서 true나 false를 부정하기 위해서 파이썬은 앞에 not을 붙이지만 JS는 !를 붙여서 논리를 뒤집는다(추가로 불이 아닌 다른 자료에 논리 부정 연산자를 2번 사용(!!)하면 불 자료형으로 변환할 수 있다). 그리고 논리곱(and)와 논리합(or)은 각각 &&과 ||로 표현된다.

 

❗️비교연산자 정리

===	일치(값 && type)	=== 일치와 == 동등의 차이는 type까지 따질건지, 값만 따질건지에 있다. == 동등으로 비교할때는 자료의 타입을 강제 변환시켜서 값자체만 똑같은지를 확인한다.
!==	불일치(값 && type)
==	동등(값만!)
!=	부등(값만!)

 

null 빈값과 Undefined 정의되지 않음

null은 빈값으로, 어떤 값이 의도적으로 비어있음을 나타낸다. 식별되지 않은 것, 아무런 객체를 가리키지 않음을 뜻한다.

Undefined는 정의되지 않았다는 의미로 어떤 변수를 선언하고 값을 할당하지 않거나 어떤 함수가 return하는 것이 없을 때 undefined를 반환한다. 둘은 개념적으로 다르기 때문에 일치(===)하지 않지만, 동등(==)한 관계이다.

 

BigInt

숫자 원시값 뒤에 n을 추가하여 생성한다. number에 안전 한계인 2^53 - 1보다 큰 정수도 저장/연산이 가능하다. 하지만 number와 혼합 연산은 불가능하며 Math객체의 내장메서드 사용이 불가능하다. 그래서 BigInt와 숫자를 연산하는 경우에는 어느 한쪽을 형변환 하는 것이 필요한데, BigInt를 형변환 하는 경우에는 값의 정확성이 사라질 수 있으니 주의해야한다.

 

❗️자료형을 알고 싶을 땐, typeof( ) 함수!

함수명 : typeof 

매개변수 : 1개, 자료형을 알고자 하는 객체 또는 표현식

리턴 : 자료의 타입이 담긴 문자형

주의사항 : null의 타입은 object로 분류됨

 

 

<상수와 변수>

파이썬에서는 상수라는 게 없고(쓰려면 클래스 등을 이용해서 둘러서 표현) 변수만 있다. 그래서 그냥 변수명에 값을 할당해주면 되는데, JS는 상수와 변수가 구분지어진다. 상수는 '항상 같은 수'로 변하지 않는 값이고 변수는 '변할 수 있는 수'로 값 수정이 가능하다. 각각 선언할때는 const, let이라는 키워드를 변수명 앞에 붙여서 선언하고 초기 값을 할당하면 된다. 이 때 상수는 무조건 초기값을 지정해야 하고, 변수는 값을 지정하지 않으면 undefined 상태가 된다.

const로 선언한 상수는 타입은 물론 값은 변경할 수 없다(변경을 시도하면 SyntaxError를 만날 수 있다). 하지만, 무조건 다 변경할 수 없는 것은 아니고, 배열의 경우에는 배열의 요소를 추가/삭제하는 정도는 가능하다. 즉 처음에 선언한 객체의 값이 변하지만 않으면 되는것이다.

반면, let으로 선언한 변수는 값과 타입 모두 변경이 가능하다. 그러므로 어지간한 경우라면 const로 정의를 하는 것이 갑작스러운 형변환이나 값이 바뀌어서 고생하지 않는 지름길이다.

그리고 상수와 변수 모두 같은 이름으로 선언을 재시도 하면, SyntaxError를 만날 수 있다. 예전 문법에서는 var이라는 키워드로 변수를 선언했었는데 이녀석은 같은 이름으로 재선언을 시도해도 선언이 가능하다는 위험성이 있어서 요즘에는 쓰지 않는다(지인이 말해주길 입사했는데 var을 쓰고 있는 회사라면 빨리 도망쳐야한다고...ㅎㅎ).

파이썬과 동일하게 JS도 복합대입 연산자를 사용한다(+=, -= 같은것!). 하지만 JS에는 조금 더 특별한 연산자가 한가지 더 있는데, 바로 증감 연산자이다. 변수 앞이나 뒤에 붙여 변수++, --변수 꼴로 사용하고, ++면 변수의 값에 1을 더한다는 것이고, --면 1을 뺀다는 것이다. 이 연산자가 앞에 붙는지 뒤에 붙는지에 따라 연산 순서가 달라지고, 변수의 앞에 연산자가 붙는것을 전위, 뒤에 붙는 것을 후위라고 한다. 전위와 후위의 차이는 값을 올려주는 타이밍이 언제인가이다. 전위는 변수가 속한 문장의 실행전에 값을 증가시키고, 후위는 실행된 후에 값을 올린다. 전위와 후위의 차이로 조건문이나 값 비교 조건에서 많은 차이가 있을 수 있으니 꼭 잘 계산하도록 하자!

 

<자료형 변환>

JS를 배우면서 가장 놀랐던 점이 이부분인데, JS는 파이썬처럼 자료형을 엄격하게 따지지 않는다. 예를 들어 파이썬은 다른 타입의 자료 두개를 연산자로 연결하면(아 물론! 문자열*숫자는 제외하고!), TypeError를 만날 수 있다. 그런데 JS는 계산이된다.....(?) 아니 계산이 된다고....(?)

자바 스크립트는 다른 타입의 자료 두개로 연산을 시도하면 어느한쪽의 타입을 강제변환해서 계산을 해버린다. 문자열에 숫자를 연산자로 연결하면, 문자열이 숫자형이 되어 계산된다(물론 계산값은 숫자형이다). 또 불타입에 숫자를 연산자로 연결하면 true는 1, false는 0으로 강제 변환되어 계산된다. 반대로 숫자형이나 불에 빈문자열을 연산자로 연결하면 어떻게 될까? 문자열이 된다(ex) 1 + "" → "1", true + "" → "true"). 여기까지만 보면 연산자를 통해 뒤에 붙는 자료의 타입을 따라간다고 생각할 수 있는데 예외가 있다. 바로 숫자형에 불타입 자료형을 연결했을 때이다. 이때는 불타입에 숫자를 연결했을 때와 마찬가지로 불타입이 숫자형이 되어 계산된다(잘 쓰지는 않는다고 하지만, 예외니까 알아두자!)

 

<자료형과 관련된 재미있는 알고리즘 문제>

JS의 자유로운 형변환을 이용해서 쉽고 간단하게 함수 없이 풀 수 있는 좋은 예제가 있어서 첨부한다.

 

2022.08.07 - [Coding Test/Programmers] - 05. 문자열을 정수로 바꾸기

05. 문자열을 정수로 바꾸기