변수(Variable)
변수란 이름(label)이 붙은 값이다.
키워드(let, const, var)를 사용해 변수를 선언하고, = 연산자를 이용해 변수에 값을 할당할 수 있다.
변수선언이란 쉽게 말해 이름을 붙임으로써 메모리를 확보하는 것이다.
//1. 변수선언을 먼저 해준 뒤 선언된 변수에 값을 할당해줄 수도 있고
let fruit;
console.log(fruit); //undefined (변수를 선언하고 값을 할당하지 않으면 undefined가 출력된다.)
fruit = 'apple';
console.log(fruit); //'apple' (이제 할당된 값이 출력된다.)
//2. 변수선언과 할당을 동시에 할 수도 있다.
let animal = 'deer';
let number = 7;변수는 변수가 담고 있는 값에 대해 파악하기 쉽도록 직관적으로 짓는 것이 좋다.
let a = 'apple'; // 바람직하지 않은 변수
let favoriteFruit = 'apple'; // 직관적. Camel Case 사용*. 바람직한 변수- 변수에는 띄어쓰기를 할 수 없기 때문에 문자의 첫글자를 대문자로 표기해 가독성을 확보하는데, 그게 마치 낙타의 등 모양같다고 'Camel Case' 라고 부른다고 한다.
참고: 네이밍 규칙
동일한 변수를 사용하여 변수에 값을 재할당할 수 있다.
(단, 변수를 선언할 때 const 키워드를 사용한 경우 재할당이 불가능하다.)
참고: 변수 선언 방식(var, let, const)의 차이
let displayNum = '1';
console.log(displayNum); // '1'
displayNum = displayNum + '0';
console.log(displayNum); // '10';타입(Data Type)
JavaScript에서의 값은 항상 특정한 자료형(Data Type)에 속한다.
1. 숫자(Number)
let n = 12;
n = 123.4567;JavaScript의 숫자는 모두 실수이다. 정수의 한계는 ±253 이다.
숫자형은 다양한 연산이 가능하다. 자주 쓰이는 연산은 곱셈 *, 나눗셈 /, 덧셈 +, 뺄셈 -, 나머지 % 정도.
숫자형엔 일반적인 숫자 외에 Infinity, -Infinity, NaN같은 '특수 숫자 값(special numeric value)'이 포함된다.
Infinity는 어떤 숫자보다 큰 특수 값, 무한대(∞)를 나타낸다.
어느 숫자든 0으로 나누면 무한대를 얻을 수 있다.
NaN은 'Not A Number'라는 뜻이다. NaN은 계산 중에 에러가 발생했다는 것을 나타내주는 값이다. 부정확하거나 정의되지 않은 수학 연산을 사용하면 계산 중에 에러가 발생하는데, 이때 NaN이 반환된다. NaN에 어떤 추가 연산을 해도 결국 NaN이 반환되기 때문에 중간에 NaN이 발생하면 연산과정 전체가 꼬이게 된다.
2. BigInt
내부 표현 방식 때문에 자바스크립트에선 (253-1)(9007199254740991) 보다 큰 값 혹은 -(253-1) 보다 작은 정수는 '숫자형’을 사용해 나타낼 수 없다. 사실 암호 관련 작업같은게 아닌 이상 문제될 건 없다. 아무튼 BigInt 형은 길이에 상관없이 정수를 나타낼 수 있다.
BigInt 형 값은 정수 리터럴 끝에 n을 붙이면 만들 수 있다.
// 끝에 'n'이 붙으면 BigInt형 자료다.
const bigInt = 1234567890123456789012345678901234567890n;3. 문자열(String)
JavaScript에서는 문자열을 따옴표로 묶어서 표시한다.
let str1 = "Hello"; //큰따옴표
let str2 = '작은 따옴표도 사용할 수 있다'; //작은따옴표
let str3 = `백틱(backtick)이라고 더 자주 부른다`; //역따옴표기본적으로 큰따옴표"와 작은따옴표'를 사용한다.
큰따옴표와 작은따옴표는 기능이나 의미의 차이는 없다. (그냥 취향 차이)
백틱은 주로 변수나 표현식을 포함하는 문자열을 템플릿 리터럴(template literal) 방식으로 표현할 때 사용한다.
템플릿 리터럴(template literal)
백틱으로 감싼 문자열 중간에 표현식을 ${…}로 감싸서 넣어주면 해당 표현식을 문자열 중간에 쉽게 삽입할 수 있다. 이런 방식을 '템플릿 리터럴(template literal)' 이라고 부른다.
function sum(num1, num2) {
return num1 + num2;
}
console.log(`${num1}와(과) ${num2}의 합은 ${sum(4,2)}입니다.`); // 4와(과) 2의 합은 6입니다.문자열의 연산
+ 연산자를 사용하여 문자열을 이어붙일 수 있다.
let lunchTimeStart = 12;
let lunchTimeEnd = 13;
let noticeLunchTime = '점심시간은 ' + lunchTimeStart + '시부터 ' + lunchTimeEnd + '시까지 입니다.';위 코드는 템플릿 리터럴을 사용해서 표현하면 더 명료하고 간결하게 나타낼 수 있다.
상황에 맞게 알맞은 방법을 선택해서 사용하는 것이 중요하다.
let noticeLunchTime = `점심시간은 ${lunchTimeStart}시부터 ${lunchTimeEnd}시까지 입니다.`;+) JAVASCRIPT.INFO 의 문자열 문서에서 문자열에 대한 보다 자세한 설명을 찾아볼 수 있다.
4. 불린(Boolean)
불린(boolean)은 참 또는 거짓을 나타내는 논리 타입이다. 불린의 값은 true와 false 두 가지 뿐이다.
불린형은 긍정(yes)이나 부정(no)을 나타내는 값을 저장할 때 사용한다. true는 긍정, false는 부정을 의미한다.
let btnIsClicked = true; // 네, 버튼이 클릭되었습니다(clicked).
let keyIsPressed = false; // 아니요, key가 눌리지 않았습니다(not pressed).불린값은 비교 결과를 저장할 때도 사용된다.
let str = 'Hello World';
if (str.length > 10) { // true 이므로
console.log('문장이 기네요.'); // '문장이 기네요.' 가 콘솔창에 출력된다.
}5. undefined 값
undefined는 '값이 할당되지 않은 상태’를 나타낼 때 사용한다.
변수는 선언했지만, 값을 할당하지 않았다면 해당 변수에 undefined가 자동으로 할당된다.
6. null 값
자바스크립트에선 null을 ‘존재하지 않는(nothing)’ 값, ‘비어 있는(empty)’ 값, ‘알 수 없는(unknown)’ 값을 나타내는 데 사용한다.
let name = null; //이름(name)을 알 수 없거나 그 값이 비어있음을 보여준다.7. 객체(Object)형
지금까지의 다른 자료형은 문자열이든 숫자든 한 가지만 표현할 수 있기 때문에 '원시(primitive) 자료형'이라고 한다. 반면 배열이나 객체는 위 타입들이 서로 섞인 compound 타입의 자료형이다. 주로 복잡한 데이터 구조를 표현할 때 사용한다.
배열(Array)
배열(array)은 특수한 형태의 객체로, 순서가 있는 자료를 저장하고 관리하는 용도에 최적화된 자료구조이다.
let animals = ['사슴', '독수리', '강아지', '펭귄', '여우', '고양이', '퓨마'];객체(Object)
객체(object)는 중괄호 {…}를 이용해 만들 수 있다. 중괄호 안에는 ‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티(property) 를 여러 개 넣을 수 있는데, 키엔 문자형, 값엔 모든 자료형이 허용된다.
let user = { // 객체
name: "John", // 키: "name", 값: "John"
age: 30 // 키: "age", 값: 30
};함수(Function)
함수도 하나의 타입(자료형)이다. 하지만 굳이 따지자면 함수는 객체형에 속한다.
function sayHello() {
alert( 'Hello!' );
}
typeof(sayHello); // "function"typeof 연산자
typeof 연산자는 인수의 자료형을 반환한다. 자료형에 따라 처리 방식을 다르게 하고 싶거나 변수의 자료형을 빠르게 알아내고자 할 때 유용하다.
typeof 연산자는 두 가지 형태의 문법을 지원한다.
연산자: typeof x
함수: typeof(x)
괄호가 있든 없든 결과는 동일하다.
typeof x를 호출하면 인수의 자료형을 나타내는 문자열을 반환한다.
typeof 0 // "number"
typeof 10n // "bigint"
typeof "foo" // "string"
typeof true // "boolean"
typeof undefined // "undefined"
typeof null // "object" typeof null의 결과는 "object"이다.null은 별도의 고유한 자료형을 가지는 특수 값으로 객체가 아니지만, 하위 호환성을 유지하기 위해 이런 오류를 수정하지 않고 남겨둔 상황이다. 즉, 자바스크립트 언어 자체의 오류일 뿐null은 객체가 아니다.낚이지 말자!
