[혼공스] 02 - 1 정리

 

오늘은 02 - 1장의 내용을 정리해보자.

 

02 - 1장의 제목은 '기본 자료형'으로, 가장 기본적이면서도 가장 많이 사용되는 '자료형'에 관해서 설명하고 있다.

 

솔직히 '자료형? 다 아는 내용이겠지...'하고 접근했는데

 

전공을 하고 있는 사람이더라도 빠졌을 만한 개념들에 대해서 잘 짚어주고 있어서 공부가 많이 됐다.

 

그럼 정리 시작!

 

문자열 자료형

문자들의 집합을 문자열이라고 한다. 자바스크립트에서는 문자가 하나든 여러 개든 모두 문자열 자료형이라고 한다.

 

(C++의 경우를 생각해보면 문자가 하나일 때는 char를 쓰고, 일련의 문자(문자열)를 쓸때는 string을 사용하는데 이 부분에 차이가 있음을 설명하는 것 같다. C언어에서는 문자열이 본질적으로 널 문자('\0')로 끝나는 문자 배열 char[]이었다.)

 

TIP!

메소드와 함수의 차이에 대해서 간단하게 짚고 넘어가자면,

메소드는 클래스가 가지고 있는 함수를 의미하고, 함수는 메소드를 포괄하는 의미를 가진다.

 

문자열 만들기

자바스크립트는 2가지 방법으로 문자열을 생성한다. 첫 번째 방법은 큰따옴표를 사용하는 것이고, 두 번째 방법은 작은따옴표를 사용하는 것이다.

 

큰따옴표와 작은따옴표 모두 활용해서 문자열 자료형을 만들 수 있지만, 따옴표의 종류는 항상 일관되게 사용하는 게 좋다. 그러나 문자열 안에 따옴표를 사용해야 한다면 예외적으로 2가지 따옴표를 모두 사용한다. 내부에 작은따옴표를 사용하고 싶다면 외부에 큰 따옴표를 사용하고, 내부에 큰따옴표를 사용하고 싶으면 외부에 작은따옴표를 사용한다.

 

따옴표는 원래 문자열을 만들때 쓰지만, 따옴표를 문자 그대로 사용하고 싶다면 따옴표 앞에 특수한 기능을 수행하는 이스케이프 문자(\)를 사용하여 따옴표를 문자 그대로 사용할 수 있다.

> "This is \"string\""

"This is "string""

 

문자열 연산자

문자열 사이에 덧셈 기호(+)를 사용하면 문자열을 연결할 수 있는데, 이때 덧셈 기호를 문자열 연결 연산자라고 부른다.

>'가나다' + '라마' + '바사아' + '자차카타' + '파하'

"가나다라마바사아자차카타파하"

 

문자열 내부의 문자 하나를 선택할 때는 문자열 선택 연산자를 사용한다. (ex. 문자열[숫자])

문자열 뒤에 대괄호를 입력하고 괄호 안에 선택할 문자의 위치를 숫자로 지정한다. 인덱스를 생각하면 될 것 같다.

>'안녕하세요'[0]

"안"

 

문자열 길이 구하기

문자열 내부의 문자 개수를 문자열 길이라고 표현한다. length 속성을 사용한다.

> "안녕하세요".length

5

 

Uncaught SyntaxError: Unexpected identifier (구문 오류)

식별자가 예상하지 못한 위치에서 등장했다는 오류이다. 예를 들어 이스케이프 문자를 사용하지 않고 한 종류의 따옴표만 사용하면 오류가 발생한다.

> 'This is 'string''

Uncaught SyntaxError: Unexpected identifier

 

웹 브라우저는 이 코드를 'This is ', string, ''의 나열로 본다.(개판이라는 뜻)

즉, 'This is '와 ' '는 문자열 자료형으로 인식하지만, 가운데에 있는 string은 단순한 식별자로 본다. 식별자가 뜬금없이 나왔기 때문에  Unexpected identifier 오류를 출력한다.

 

숫자 자료형

자바스크립트는 소수점이 있는 숫자와 없는 숫자 모두 같은 자료형으로 인식한다.

> 273

273

> 52.273

52.273

 

불 자료형

자바스크립트에서 참과 거짓을 표현할 때 불 자료형을 사용한다. 불 자료형은 true, false 2가지이다.

불 자료형을 만드는 방법으로 비교 연산자를 사용할 수 있다.

연산자	설명
===	양쪽이 같다.
!==	양쪽이 다르다.
>	왼쪽이 더 크다.
<	오른쪽이 더 크다.
>=	왼쪽이 더 크거나 같다.
<=	오른쪽이 더 크거나 같다.

 

TIP!

===, !== 는 다른 언어와 다른부분이니 주의하자. === 연산자와 !== 연산자는 '값과 자료형이 같은지'를 비교하는 연산자이다. 반면 == 연산자와 != 연산자는 '값이 같은지'만 비교하는 연산자이다.

자바스크립트에서 == 연산자와 != 연산자는 어떻게 해서라도 값을 같게 만들고 비교해서 일반적인 생각과 다른 결과를 낸다. 예를 들어 다음과 같은 경우가 있다.

 

> 1 == "1"	자료형이 달라도 어떻게든 변환을 하면 값이 같아지니까 true
true
> false == "0"	false가 0으로, "0"이 0 으로 변환된다.
true
> "" == []	빈 문자열은 false, 비어있는 배열 역시 false로 변환된다
true
> 0 == []	0은 false, 비어있는 배열은 false로 변환된다
true

 

자바스크립트의 비교 연산자는 숫자는 물론 문자열 자료형도 비교할 수 있다. 사전순으로 앞쪽에 있을 수록 값이 작다.

> '가방' < '하마'

true

 

불 부정 연산자

! 기호를 사용하여 참을 거짓으로, 거짓을 참으로 바꾼다.

 

불 논리합(||)/논리곱(&&) 연산자

&&연산자는 양쪽 변 값이 모두 true일 때 true를 결과로 낸다. false가 하나라도 있으면 false를 반환한다.

반면 ||연산자는 양쪽 변의 값 중 하나만 true여도 true를 결과로 낸다.

&&연산자는 '그리고' || 연산자는 '또는'으로 매치해보면 쉽게 기억할 수 있다!

 

typeof 연산자

자바스크립트는 숫자, 문자열, 불 같은 자료형을 확인할 때 typeof 연산자를 활용한다. typeof 연산자는 단항 연산자이다.

typeof 연산자는 결과로 string, number, boolean, undefined, function, object, symbol, bigint 8가지 중에 하나를 출력한다.

>  typeof ('문자열')

"string"

>  typeof(273)

"number"

> typeof(true)

"boolean"

> typeof (10) === 'number'

True

 

가장 마지막의 예시로 활용되는 경우가 많으니 기억해두자.

 

☆ 템플릿 문자열 ☆

학교에서 교수님께서 아주아주 강조하셨던 내용인데 혼공스에서 보게되니 굉장히 반가웠다!

 

과거에 자바스크립트는 문자열 내부에 표현식(수식)을 삽입할 때 다음과 같이 문자열 연결 연산자(+)를 사용해야 했다.

> console.log('표현식 273 + 52의 값은 ' + (273 + 52) + '입니다...!')

표현식 273 + 52의 값은 325입니다...!

 

하지만 이 방식은 따옴표를 계속 열고 닫아야 하기 때문에 굉장히 번거롭고, + 가 많이 사용되기 때문에 가독성도 상당히 떨어진다. 현재 자바스크립트는 템플릿 문자열이라는 기능이 추가되어 이러한 코드를 간단하게 작성할 수 있다.

 

템플린 문자열은 백틱(`)기호로 감싸 만든다. 문자열 내부에 `${...}` 기호를 사용하여 표현식을 넣으면 표현식이 문자열 안에서 계산된다. (숫자 연산 뿐만 아니라 변수도 이렇게 활용할 수 있고, 템플릿 문자열을 활용하면 이스케이프 문자 없이 개행을 할 수 있다).

> console.log(`표현식 273 + 52의 값은 ${273 + 52}입니다...!`)

표현식 273 + 52의 값은 325입니다...!

 

이 부분 역시 매우 중요하니 잘 기억해두었다가 사용하도록 하자!

 

이상으로 02 - 1장의 내용을 정리하여 보았다.

문자열, 숫자, 불 자료형에 대해서 알아보았는데 복습도 많이 되었고, 함수와 메소드의 차이, 템플릿 문자열과 같은 중요한 개념들에 대해서 학습할 수 있었다.

 

내일은 02 -2장의 내용을 정리해보자.

 

오늘 하루도 쌓였다!