[Javascript] 2일차 - 변수, 자료형, 연산자

🚩 2일차 : 『Do it! 자바스크립트 입문』 3장

03-1 변수란 무엇일까?

변수 vs. 상수

변수 : 변하는 값
상수 : 변하지 않는 값

변수를 선언하는 규칙 세 가지

1. 이름에는 해당 변수가 가지는 의미를 담는다.
2. 여러 단어를 연결한 변수 이름은 낙타 표기법(Camel Case)으로 짓는다.
3. 이름은 다음의 규칙을 따른다 : 변수 이름의 첫 글자는 반드시 문자, 밑줄, 달러 기호 중 하나로 시작해야 한다. 이후에는 문자, 밑줄, 달러 기호, 숫자를 사용할 수 있다.

변수에 값이나 식 저장하기

var favoriteSong = "5star";	// 변수 선언과 동시에 값을 저장

var favoriteSeason;
favoriteSeason = "summer";	// 변수를 선언한 다음에 값을 저장

변수에 식을 저장할 경우, 식에 있는 변수는 미리 선언해야 한다.

실습 : 나이 계산 프로그램 만들기

① 변수 선언하기

	<script>
		function calc() {
			var currentYear = 2022;	// 올해 연도를 2022라고 저장하는 변수
			var birthYear = 1906;	// 태어난 연도를 1906이라고 저장하는 변수
			var age;	// 나이를 저장하는 변수

			age = currentYear - birthYear + 1;	// 나이를 저장하는 변수에 나이를 계산하는 식을 저장함

			document.querySelector("#result").innerHTML = "당신의 나이는 " + age + "세입니다.";	// 나이를 출력함
		}
	</script>

document.querySelector("#result").innerHTML은 document에서 선택자를 이용해 id가 result인 태그를 HTML에 삽입한다는 뜻이라는데 뭔 말인지 모르겠음. 8장에서 설명한다니까 일단은 넘어가자.

② 사용자 입력값 변수에 할당하기
prompt() 함수를 이용해서 프롬프트 창을 이용하여 사용자에게 출생연도를 입력받아서 나이를 계산한다.

	<script>
		function calc() {
			var currentYear = 2022;	// 올해 연도를 2022라고 저장하는 변수
			var birthYear = prompt("출생연도를 입력하세요.", "YYYY");	// 프롬프트창에서사용자에게 입력받은 출생연도를 저장하는 변수
			var age;	// 나이를 저장하는 변수

			age = currentYear - birthYear + 1;	// 나이를 저장하는 변수에 나이를 계산하는 식을 저장함

			document.querySelector("#result").innerHTML = "당신의 나이는 " + age + "세입니다.";	// 나이를 출력함
		}
	</script>

🔎 ES6 버전부터는 변수를 선언할 때 var 이외에 let, const를 사용할 수 있다고 한다. 단, let은 블록({}안의 범위) 외부에서는 사용할 수 없고, const는 상수를 선언할 때 사용한다.

03-2 자료형 이해하기

자료형의 종류

기본형 : number, string, boolean, undefined, null
복합형 : array(배열), object(객체)
변수나 값이 어떤 자료형인지 알고 싶을 때는 typeof 연산자를 사용하면 된다.

typeof 1906;
typeof "hello";

숫자형

① 정수
정수는 소수점이 없는 숫자이다. 8진수, 10진수, 16진수로 표현한다.
② 실수
실수는 소수점이 있는 숫자다. 자바스크립트는 숫자를 정밀하게 계산하는 데에 적합하지 않다. 자바스크립트가 실수를 계산할 때에는 실수를 먼저 2진수로 변환하여 계산을 하는데, 이때 자릿수가 많은 소수로 변환된 상태에서 계산을 수행하기 때문에 결과가 틀리는 경우도 있다.

문자형(String)

문자형은 작은따옴표나 큰따옴표로 묶인 자료이다. 따옴표를 문자형으로 출력해야할 경우에는 작은따옴표와 큰따옴표를 모두 활용하면 된다.

논리형

논리형은 참 또는 거짓이라는 값을 표현하는 자료형이다.

undefined와 null

undefined는 자료형이 아니라, 자료형이 정의되지 않았을 때의 상태이다.
null은 처음에 할당되었던 값이 이제 더는 유효하지 않다는 것을 뜻한다.

사람이 볼 때에는 first나 second나 둘다 값이 없지만, 컴퓨터 입장에서는 처음부터 값이 존재했는데 없어진 경우(null)와 처음부터 값이 없었던 경우(undefined)를 구분한다. 그래서 변수를 초기화할 때는 null을 많이 사용한다.

배열(array)

배열은 하나의 변수에 여러 개의 값을 저장할 수 있는 자료형이다.

배열의 특정 값을 가져올 때 사용하는 인덱스

🔎 콘솔 창에서 배열 관찰하기

객체(Object)

var kim = {
    firstName: "John",
    lastName: "Kim",
    age: 35,
    address: "Seoul"
}

객체는 여러 자료를 중괄호로 묶을 수 있다. 중괄호 안의 키와 값을 콜론을 통해 한 쌍으로 짝지어준다.

자바스크립트 자료형의 특징 : 느슨한 자료형 체크

C언어나 Java의 경우 변수를 선언할 때 자료형을 지정하고 해당 자료형에 맞는 값만 변수에 저장해야 한다(강력한 자료형 체크, Strong Data Type Check). 그러나 자바스크립트는 미리 변수의 자료형을 지정할 필요가 없다(느슨한 자료형 체크, Weak Data Type Check). 타입스크립트의 경우 자바스크립트와 비슷하지만 강한 자료형 체크를 지원한다.

03-3 연산자 이해하기

연산자에는 사칙 연산자, 나머지 연산자, 증감 연산자가 있다. 사칙 연산자, 나머지 연산자는 알겠는데 증감 연산자는 생소하다.

증감 연산자 : 증가 연산자(++)와 감소 연산자(--)를 아울러 부르는 말.
증감 연산자가 피연산자 뒤에 있을 때는 전체 수식의 처리가 끝난 다음에 적용된다. 반면에 피연산자 앞에 있을 때는 전체 수식을 처리하기 전에 적용된다.

1분 복습 문제

실습 : 할인 가격 계산 프로그램 만들기

① 연산자 활용하기
코드에 이미 원래 가격과 할인율을 입력했으므로 입력 상자에 입력하지 않고 '할인 가격 계산하기'만 눌러도 결과가 계산된다.

② 입력 상자에 입력한 값 받아 오기
document.querySelector().value를 활용하여 입력 상자에서 원래 가격과 할인율을 입력받아 변수에 해당 값을 저장하고, 그 다음에 계산한다.

새로운 변수 savedPrice, resultPrice, 그리고 사칙 연산자를 응용하여 원래 가격, 할인율, 할인된 가격, 할인 가격을 모두 출력하는 프로그램으로 수정한다.

03-4 연산자 깊게 알아보기

할당 연산자 응용하기

더하기 연산자와 연결 연산자 구별하기

+는 숫자를 더할 때에는 더하기 연산자이고, 문자열을 연결할 때에는 연결 연산자이다.

문자형과 숫자형의 연산 이해하기

문자형과 숫자형을 더할 때에는 연결 연산자가 된다. 이때는 결괏값이 문자형이 된다.
그러나 문자형과 숫자형을 빼거나, 곱하거나, 나누거나, 나머지를 구할 때에는 사칙 연산자가 되어 문자형을 숫자로 인식한다. 이때는 결괏값이 숫자형이 된다.

비교 연산자 알아보기

① ==와 != 연산자
② <와 <=, >와 >= 연산자
③ == 연산자와 === 연산자
== 연산자와 === 연산자는 모두 왼쪽과 오른쪽이 같은지 비교하는 연산자이다. 그러나 == 연산자는 자동으로 자료형을 변환하여 비교하는 반면, === 연산자는 자료형의 변환을 불허한다.

🔎 문자끼리 비교하기 - 아스키 값
ASCII란 컴퓨터에서 문자형을 숫자형에 일대일 대응한 값을 의미한다. 예컨대 "Q"는 81이고 "q"는 113이기 때문에 다음과 같은 결과가 출력된다.

논리 연산자 알아보기

논리 연산자는 True, False를 처리하는 연산자이다. True, False를 피연산자로 하는 연산자로 부울 연산자, 불리언 연산자라고도 일컫는다.

① OR 연산자
|| 는 왼쪽과 오른쪽 하나만 참이어도 True이다.

② AND 연산자
&& 는 왼쪽과 오른쪽 둘다 참이어야 True이다.

③ NOT 연산자
! 는 True와 False를 뒤집는다.

서로 다른 연산자를 계산하는 순서

단항 연산자 → 산술 연산자 → 비교 연산자 → 논리 연산자 → 할당 연산자

같은 분류의 연산자 내에서도 계산하는 순서가 있음(p.87 참고)

요약

• 변수와 상수의 개념 : 변수는 올해 연도(매년 바뀜), 태어난 연도(사람마다 다름)와 같이 변하는 값이다. 상수는 바뀌지 않는 값이다.
• 변수 이름 짓는 방법 : 변수 이름을 지정할 때에는 3가지 규칙을 따라야 한다. 첫째, 해당 변수가 가지는 의미를 담는다. 둘째, 낙타 표기법을 따른다. 셋째, 첫글자는 문자, 밑줄, 달러 기호로 시작해야 하며 두번째 글자부터는 문자, 밑줄, 달러 기호, 숫자가 올 수 있다.
• 변수에 값이나 식을 저장하는 방법 : 변수를 선언함과 동시에 값을 저장하는 방법이 있고, 변수를 선언한 다음에 값을 저장하는 방법이 있다.
• 자바스크립트의 자료형에는 기본형(숫자, 문자형, 논리형, undefined, null)과 복합형(배열, 객체)이 있다. 변수나 값이 어떤 자료형인지 알고 싶을 때는 typeof 연산자를 사용하면 된다. 자바스크립트 자료형은 느슨한 자료형 체크를 사용한다.
• 숫자에는 소수점이 없는 정수(8진수, 10진수, 16진수)와 소수점이 있는 실수가 있다. 문자형은 큰따옴표 또는 작은따옴표로 묶은 자료이다. 논리형은 참 또는 거짓이라는 값을 가질 수 있는 자료형이다. undefined는 자료형이라기 보다는, 자료형이 정의되지 않았을 때의 상태이다. 특별히 표시할 결괏값이 없을 때에도 undefined가 출력된다. 컴퓨터는 처음부터 값이 할당되지 않았던 경우와 원래의 값이 더는 유효하지 않은 경우를 구분하기 때문에 undefined와 null를 구분한다.
• 배열은 하나의 변수에 여러 개의 값을 저장할 수 있는 자료형이다. 대괄호 안에 쉼표로 값을 구분하여 저장할 수 있다. 또한 인덱스를 활용하여 배열의 특정 값을 가져올 수 있다. 객체도 하나의 변수에 여러 개의 값을 저장할 수 있지만, 중괄호 안의 키와 값을 콜론을 통해 한 쌍으로 짝지어준다는 점에서 배열과 다르다.
• 연산자에는 사칙 연산자, 나머지 연산자, 증감 연산자가 있다. 증감 연산자는 증가 연산자(++)와 감소 연산자(--)를 아울러 부르는 말이다. 증감 연산자가 피연산자 뒤에 있을 때는 전체 수식의 처리가 완료된 이후에 적용이 된다. 반면에 증감 연산자가 피연산자 앞에 있을 때는 전체 수식이 처리되기 전에 적용이 된다.
• 할당 연산자(=)와 산술 연산자를 조합하여 +=, -=, *=, /=, %=와 같이 사용할 수 있다.
• 숫자를 더할 때에는 +가 더하기 연산자가 되고, 문자와 문자를 연결할 때에는 +가 연결 연산자가 된다.
• 문자형과 숫자형을 +로 연결하면 +가 연결 연산자가 되고 결괏값도 문자형이 된다. 그러나 문자형과 숫자형을 빼기, 곱하기, 나누기, 나머지 연산자로 계산하면 결괏값이 숫자형이 된다.
• 비교 연산자 중 == 연산자는 두 자료형을 자동으로 변환하여 비교하지만 === 연산자는 자료형을 변환하지 않고 비교한다.
• 논리 연산자 중 OR 연산자는 ||, AND 연산자는 &&, NOT 연산자는 ! 기호를 사용한다.
• 단항 연산자, 산술 연산자, 비교 연산자, 논리 연산자, 할당 연산자 순서대로 계산한다.