✨02-1 기본 자료형
-
프로그래밍에서 프로그램이 처리할 수 있는 모든 것을 자료
data라고 부르며, 자료 형태에
따라 나눠놓은 것을 자료형data type이라고 합니다.
자바스크립트는 다양한 종류의 자료형을 제공합니다. 가장 기본적이면서도 많이 사용하는 자료형은 숫자number, 문자열string, 불boolean자료형 입니다. -
문자열 자료형
alert()함수 또는console.log()메소드의 매개변수에 "Hello JavaScript ...!" 를 입력해
보았습니다. 이와 같은 문자들의 집합을 문자열String이라고 합니다.
자바스크립트에서는 문자가 하나든 여러 개든 모두 문자열 자료형 이라고 합니다. -
문자열 만들기
자바스크립트는 2가지 방법으로 문자열을 생성합니다. 첫 번째 방법은 큰따옴표를 사용하는것이고, 두 번째 방법은 작은따옴표를 사용하는 것입니다.> `안녕하세요` '안녕하세요' > "안녕하세요" '안녕하세요' --> 콘솔 출력이 작은따옴표로 감싸져 있으면 이는 문자열을 의미합니다.
따옴표의 종류는 항상 일관되게 사용하는 게 좋습니다. 그러나 문자열 안에 따옴표를 사용해야 한다면 예외적으로 다음과 같이 2가지 따옴표를 모두 사용합니다. 내부에서 작은 따옴표를 사용하고 싶다면 외부에서 큰따옴표를 사용합니다. 반대로 내부에 큰따옴표를 사용하고 싶으면 외부에 작은따옴표를 사용합니다.> `This is "String"' "This is "String"" > `This is 'String'' "This is 'String'"따옴표는 원래 문자열을 만들 때 쓰지만, 따옴표를 문자 그대로 사용하고 싶다면 따옴표 앞에
특수한 기능을 수행하는 이스케이프 문자\를 사용하여 따옴표를 문자 그대로 사용할 수 있습니다.> "This is \"String\"" `This is "String"` > `This is \'String\'' `This is 'String'`이스케이프 문자는 이외에도 여러 가지 특수 기능이 있습니다.
\n: 줄바꿈을 의미합니다.\t: 탭을 의미합니다.\\: 역슬래시\그 자체를 의미합니다.
-
문자열 연산자
숫자와 같은 자료는 덧셈, 뺄셈, 곱셈, 나눗셈을 할 수 있다는 것을 학교 교과과정에서 배워 잘 알고 있습니다. 문자열을 연산한다는 이야기는 못 들어봤을 텐데요. 자바스크립트에서는 숫자 자료와 마찬가지로 문자열도 기호를 사용해서 연산 처리를 할 수 있습니다.
문자열 사이에 덧셈 기호(+)를 사용하면 문자열을 연결할 수 있습니다. 이때 덧셈 기호를
문자열 연결 연산자라고 부릅니다.> '가나다' + '라마' + '바사아' + '자차카타' + '파하' "가나다라마바사아자차카타파하"문자열 내부의 문자 하나를 선택할 때는 문자 선택 연산자를 사용합니다.
> '안녕하세요' [0] "안" > '안녕하세요' [1] "녕" > '안녕하세요' [2] "하"문자열 뒤에 대괄호[...]를 입력하고 괄호 안에 선택할 문자의 위치를 숫자로 지정합니다. 이때 위치
를 나타내는 숫자를 인덱스index라고 부릅니다. 자바스크립트는 인덱스를 0부터 셉니다. 따라서 "안녕
하세요"라는 문자열에서 문자 인덱스는 다음과 같습니다.안 녕 하 세 요 [0] [1] [2] [3] [4]
-
문자열 길이 구하기
문자열 내부의 문자 개수를 문자열 길이 length)라고 표현합니다. 문자열 길이를 구할 때는 length 속성
을 사용합니다. 문자열 뒤에 온점(.)을 찍고 length라고 입력해주면 됩니다.> "안녕하세요".Length 5 > "자바스크립트".Length 6 >"".Length 0 --> 빈 문자열 문자열이라는 것을 기억해 주세요.
-
Uncaught SyntaxError: Unexpected identifier
식별자가 예상하지 못한 위치에서 등장했다는 오류입니다. 예를 들어 이스케이프 문자를 사용하지 않고 한 종류의 따옴표만 사용하면 다음과 같이 오류가 발생합니다.< 오류 > > "This is "String"" (x) Uncaught SyntaxError: Unexpected identifier웹 브라우저는 이 코드를
"This is"와String과""의 나열로 봅니다.
"This is"와""는 문자열 자료형이지만, 가운데String은 단순한 식별자로 봅니다.
식별자가 뜬금없는 곳에 나왔기 때문에 오류를 출력한 것입니다.
-
숫자 자료형
자바스크립트는 소수점이 있는 숫자와 없는 숫자라를 모두 같은 자료형으로 인식합니다.
숫자를 입력하면 숫자 자료가 만들어집니다. -
숫자 연산자
숫자 자료형을 사용하면 다음 표의 숫자 연산자로 기본적인 사칙연산을 할 수 있습니다.연산자 설명 + 더하기 연산자 - 빼기 연산자 * 곱하기 연산자 / 나누기 연산자 자바스크립트는 숫자 자료형을 연산할 때 연산자 우선순위를 고려합니다.
곱셈의 우선순위가 덧셈보다 높으므로 곱셈을 먼저 계산합니다.
만약 덧셈을 먼저 계산하고 싶으면 괄호()를 사용합니다.자바스크립트의 숫자 자료형은 나머지 연산도 할 수 있습니다.
나머지 연산자%는 좌변을 우변으로 나눈 나머지를 출력하는 연산자입니다.> 10 % 2 0 > 10 % 3 1 > 10 % 4 2
-
불 자료형
문자열과 숫자는 일상생활에서 자주 볼 수 있는 자료들이라 익숙하지만, 불boolean은
처음보는 자료형이라 익숙하지 않습니다.불은 영어로 Boolean 이며 '불린' 으로 발음됩니다. 그래서 '불린' 이라고도 표기합니다. 다만
Boolean Algebra 라는 과목을 '불대수' 라고 번역해서 사용하는 것처럼 국내 수학,과학 용어에
'불'이 많이 사용되므로 '불'이라고 하겠습니다.
-
불 만들기
자바스크립트에서는 참과 거짓 값을 표현할 때 불 자료형을 사용합니다. 문자열 자료형과 숫자 자료형은 만드는 방법에 따라 수많은 형태로 표현할 수 있지만, 불 자료형은 true와 false 2가지입니다. 불은 단순하게 true와 false를 입력하면 만들 수 있습니다.또한 두 대상을 비교 할 수 있는 비교 연산자를 사용해도 불을 만들 수 있습니다.
연산자 설명 === 양쪽이 같다 !== 양쪽이 다르다 > 왼쪽이 더 크다 < 오른쪽이 더 크다 >= 왼쪽이 더 크거나 같다 <= 오른쪽이 더 크거나 같다 그렇다면 불 자료형은 어디에 사용할까요?
조건문을 잠시 살펴보겠습니다.if(불 표현식) { 불 표현식이 참일 때 실행할 문장 }조건문 괄호 안의 불 표현식이 참이면 중괄호 속 문장을 실행하고,
거짓이면 중괄호 속 문장을 무시합니다.
-
불 부정 연산자
문자열과 숫자에 연산자를 적용할 수 있는 것처럼 불에도 연산자를 적용할 수 있습니다.
논리 부정 연산자는!기호를 사용하여 참을 거짓으로, 거짓을 참으로 바꿉니다.> !ture false > !false ture-
단항 연산자
연산자는 피연산자의 개수에 따라서 단항 연산자, 이항 연산자, 삼항 연산자로 구분합니다. 양수를 음수로 바꾸거나 음수를 양수로 바꾸는-기호는 항을 하나만 사용하기 때문에단항 연산자라고 합니다. 예를 들어 ~10은 10을 음수로 만들기 위해 사용한 마이너스(-) 연산자의 피연산자가 1개입니다. +10도 양수임을 알려주기 위해 플러스(+) 연산자를 사용했으므로 이 또한 단항 연산자입니다. 본문에서 살펴본 불 부정 연산자도 피연산자가 하나이므로 단항 연산자로 분류합니다.> true false // 피연산자가 true로 1개 → 단항 연산자 > 10 + 20 30 // 피연산자가 10과 20으로 2개 → 이항 연산자 > true ? 10 : 20 10 // 피연산자가 true, 10, 20으로 3개 → 삼항 연산자
-
-
불 논리합/논리곱 연산자
불에는 논리합 연산자와 논리곱 연산자를 적용할 수 있습니다.연산자 설명 && 논리곱 연산자 || 논리합 연산자 && 연산자는 양쪽변의 값이 모두true일 때ture를 결과로 냅니다. 이외에는 모두false입니다.
반면|| 연산자는 양쪽 변의 값 중 하나만ture여도true를 결과로 냅니다&& 연산자
좌변 우변 결과 true true true true false false false true false false false false ||연산자
좌변 우변 결과 true true true true false true false true true false false false
익숙하지 않은 연산자라 기억하기가 조금 힘듭니다. 기억하기 쉽게 현실과 조금 연관지어서 살펴보겠습니다. 다음과 같은 명령을 들었다고 가정해봅시다. `"사과 그리고 배 가져와!"` 무엇을 가져가야 할까요? “사과 그리고 배"라는 의미는 2가지를 모두 가지고 오라는 의미입니다.그렇다면 다음 문장은 어떤가요?
"사과 또는 배 가져와!"
“사과 또는 배"라면 둘 중 하나라도 가져오라는 의미입니다.프로그래밍에서도 이와 같은 의미가 적용됩니다. 일단 프로그래밍 언어에서
true는 ‘좋은 것’이고,
false는 ‘좋지 않은 것'이라고 가정하겠습니다. 그리고 최종적으로 명령을 수행하면true, 수행하지못하면false라고 가정하겠습니다. 다음과 같은 명령을 들었다면 어떻게 해야 할까요?
"치킨(true) 그리고 음식물 쓰레기 (false) 가져와!"
둘 다 들고 오라는 명령인데, 음식물 쓰레기를 손에 잡기는 싫습니다.
그럼 명령을 거부해서 false가됩니다.다음 명령은 어떻게 해야 할까요?
"치킨(true) 또는 음식물 쓰레기(false) 가져와!"
둘 중 하나만 들고 가면 되니까 치킨을 들고 가면 됩니다. 치킨은 맛있으니까요.
따라서 최종 결과가true가 나옵니다.조금 특이한 예시이지만, 이와 같은 방법으로 앞의 표에서 설명한
&& 연산자는 '그리고'
|| 연산자'또는'으로 하나하나 매치해보면 쉽게 기억할 수 있습니다. -
자료형 검사
자바스크립트는 숫자, 문자열, 불 같은 자료형을 확인할 때는typeof연산자를 사용합니다.
typeof연산자도 논리 부정 연산자!, 플러스 연산자+, 마이너스 연산자-처럼 피연산자를
1개만 갖는 단항 연산자 입니다.
-
템플릿 문자열
과거에 자바스크립트는 문자열 내부에 표현식을 삽입할 때 다음과 같이 문자열 연결 연산자(+)를 사용해야 했습니다.> console.log('표현식 273 + 52의 값은 + (273 + 52) + '입니다...!') 표현식 273 + 52의 값은 325입니다...!이렇게 코드를 작성한다고 문제가 있는 것은 아니지만, 표현식을 많이 결합하면 코드가 복잡해집니다. 사용하고 있는 자바스크립트에서는 템플릿 문자열이라는 기능이 추가되어 이러한 코드를 간단하게 작성할 수 있습니다.
템플릿 문자열은 백틱() 기호로 감싸 만듭니다. 문자열 내부에 `${...}` 기호를 사용하여 표현식을 넣으면 표현식이 문자열 안에서 계산됩니다.
> console.log(`표현식 273 + 52의 값은 ${273 + 52}입니다...!`) 표현식 273 + 52의 값은 325입니다...!
✨02-2 상수와 변수
-
상수는 '항상 같은 수' 라는 의미로 값에 이름을 한 번 붙이면 값을 수정할 수 없습니다.
변수는 '변할 수 있는 수' 로 값을 수정할 수 있습니다.
-
상수
어떠한 자료에 이름을 붙여서 사용하는 방법은 수학뿐만 아니라 프로그래밍에서도 많이
사용되며, 이것을 상수constant라고 합니다. 상수를 만드는 과정을 "선언" 이라고 표현하고,
const키워드로 선언합니다.
const 이름 = 값> const pi = 3.141592 undefined > pi 3.141592 > const r = 10 undefined > 2 * pi * r 62.83184 > pi * r * r 314.1592
-
변수
변수를 만들 때let키워드를 사용합니다.
let 이름 = 값> let g = 9.8 undefined > let m = 10 undefined > m * g 98- 상수와 변수의 사용
변경할 가능성이 있으면 변수를 사용하고, 그렇지 않으면 상수를 사용한다
라는 기본 규칙을 지면 됩니다.
- var 키워드
변수를 생성할 수 있는 키워드로var키워드도 있습니다. 과거의 자바스크립에서 사용하던 키워드입니다.var키워드는 변수를 중복해서 선언할 수 있다는 위험성,변수가 속한 범위가
애매하다는 이유로let키워드가 등장하면서 대체되었습니다.
- 상수와 변수의 사용
-
복합 대입 연산자
복합 대입 연사자는 대입 연산자와 다른 연산자를 함께 사용하는 연산자입니다.복합 대입 연산자 설명 사용 예 의미 += 기본 변수의 값에 값을 더합니다. a += 1 a = a+1 -= 기본 변수의 값에 값을 뺍니다. a -= 1 a = a-1 *= 기본 변수의 값에 값을 곱합니다. a *= 1 a = a*1 /= 기본 변수의 값에 값을 나눕합니다. a /= 1 a = a/1 %= 기본 변수의 값에 값을 나머지를 구합니다. a %= 1 a = a%1 > let value = 10 undefined > value += 10 20 > value 20변수
value를 10으로 초기화한 후+=복합 대입 연산자를 사용해value의 값에 10을 더합니다
-
증감 연산자
증감 연산자 설명 변수++ 기존의 변수 값에 1을 더합니다(후위) ++변수 기존의 변수 값에 1을 더합니다(전위) 변수-- 기존의 변수 값에 1을 뺍니다(후위) --변수 기존의 변수 값에 1을 뺍니다(전위) let number = 10 number++ alert(number) // 결과 : 11let number = 10 //변수 선언 alert(number++) // number = 10 출력/ ... 그리고 +1 number = 11 alert(++number) // number = 11 거기에 +1 ... /출력 number = 12 alert(number--) // number = 12 출력 / ... 그리고 -1 number = 11 alert(--number) // number = 11 거기에 -1 ... / 출력 number = 10 /* 출력 : 10 12 12 10 */
-
undefined 자료형
- 상수와 변수로 선언하지 않은 식별자
상수와 변수를 사용하면undefined가 나옵니다.> typeof(abc) undefined > typeof(그냥식별자) undefined - 값이 없는 변수
변수를 선언하면서 값을 지정하지 않은 경우에는 해당 식별자는undefined자료형이 됩니다.> let a undefined > typeof(a) undefined
- 상수와 변수로 선언하지 않은 식별자
✨02-3 자료형 변환
-
문자열 입력
문자열 자료형을 입력할 때 사용하는 함수는prompt()입니다
prompt(메세지 문자열, 기본 입력 문자열)const input = prompt("message", '_default') alert(input)
사용자가 입력창에 값을 입력하고 [확인] 버튼을 클릭하면
prompt()함수는 입력한 문자열을
input에 저장합니다.input에 저장된 문자열 "안녕하세요"를 출력하는 것입니다.
이와 같이 함수를 실행한 후 값을 넘기는 것을return이라고 표현합니다.
-
불 입력
문자열 외에 불 자료형도 값을 입력받을수 있습니다. 이때는confirm()함수를 사용합니다.
confirm(메세지 문자열)const input = confirm("수락하겠습니까?") alert(input)
사용자가 [확인] 버튼을 클릭하면
true를 리턴하고, [취소]버튼을 클릭하면false를 리턴합니다.
-
숫자 자료형으로 변환하기
다른 자료형을 숫자 자료형으로 변환할 때는Number()함수를 사용합니다.> Number("1234") 1234 > typeof(Number("1234")) number
-
문자열 자료형으로 변환하기
다른 자료형을 문자열로 변환할 때는String()함수를 사용합니다.> String(1234) "1234" > String(true) "ture"
-
불 자료형으로 변환하기
다른 자료형을 불 자료형으로 변환할 때는Boolean()함수를 사용합니다.대부분의 자료는 불로 변환할 때
true로 변환됩니다. 다만 5개의 자료형은false로 변환됩니다.> Boolean(0) false > Boolean(NaN) false > Boolean("") false > Boolean(null) false > let 변수 undefined > Boolean(변수) false
