Chapter 02. 자료와 변수

Uncaught SyntaxError: Unexpected indentifier // 구문오류: 식별자가 예상치 못한 위치에서 등장했다는 오류. 잘못된 식별자 코드가 있다는 의미이므로 이를 수정하면 됨

 

연산자는 피연산자의 개수에 따라

단항 연산자(피연산자 1개), 이항 연산자(피연산자 2개), 삼항 연산자(피연산자 3개)로 구분함.

예) 10 + 20 // 피연산자가 10과 20으로 2개이므로 이항 연산자

 

이스케이프 문자(\)

• \" : 따옴표를 문자 그대로 사용할 수 있음
• \n : 줄바꿈
• \t : 탭
• \\ : 역슬래시(\) 그 자체를 의미

 

자료형 검사

타입 연산자를 사용하여 값의 자료형을 확인할 수 있음.

원시 자료형의 경우, 해당 자료형의 이름을,

객체나 함수의 경우, "object" 또는 "function"을 반환합니다.

typeof null의 경우 "object"를 반환하는 버그가 있습니다.

 

typeof(10) === 'number' // True
typeof 10 === 'number' // True

typeof연산자로 출력할 수 있는 결과 8가지: string, number, boolean, undefined, function, object, symbol, bigint

 

템플릿 문자열

백틱(`)기호로 감싸 만들고, ${}기호를 사용하여 문자열 내부에 표현식을 넣을 수 있다.

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

 

 

---

변경할 가능성이 있으면 변수를 사용하고, 그렇지 않다면 상수를 사용!

 

• 상수: 항상 같은 수. 값에 이름을 한 번 붙이면 값을 수정할 수 없음. 저장 효율(성능)이 좋음
  Uncaught SyntaxError: Identifier 'name' has already been declared // 구문 오류: 식별자 'name'은 이미 사용하고 있습니다
  Uncaught SyntaxError: Missing initializer in const declaration // 구문 오류: 상수는 한 번만 선언할 수 있으므로 선언할 때 반드시 값을 함께 지정해줘야 함
  TypeError: Assignment to constant variable. // 예외 처리: 한 번 선언된 상수는 값을 변경할 수 없음. 이 경우 변수를 사용해야 함
• 변수: 변할 수 있는 수. 값을 수정할 수 있음
• 선언: 상수 또는 변수를 생성하는 것
• 할당: 상수 또는 변수에 값을 넣는 것
• 참조: 할당된 값을 읽어오는 것 

 

증감 연산자

변수++(후위), ++변수(전위), 변수--(후위), --변수(전위)

• 전위: 해당 문장을 실행하기 전에 값을 계산
• 후위: 해당 문장을 실행한 후 값을 계산

 

 

 

---

데이터 타입의 종류

기본형(Primitive Type)
값이 담긴 주소값을 바로 복제. 불변성을 띔

Number, String, Boolean, null, undefined, Symbol

참조형(Reference Type)

값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제. 불변성을 띄지 않음

Array, Function, Date, RegExp, Map, Set

 

데이터 타입

1. 숫자(Number)

• 정수형 숫자 : 10
• 실수형 숫자 : 3.14
• 지수형 숫자 : 2.5e5; // 2.5 x 10^5
• NaN : Not a Number. 숫자가 아님을 나타내는 값. 숫자가 아닌 값을 숫자로 변환하려고 할 때 발생
• Infinity : 0으로 나눴을 때.   / 0

 

2. 문자열(String) : 작은 따옴표(')나 큰 따옴표(")로 감싸서 표현

let str = "Hello, world!"; 

let str1 = "Hello, "; 

let str2 = "world!";

• 문자열 길이(length) 확인하기
  str.length
• 문자열 결합(concatenation)
  let result = str1.concat(str2);
• 문자열 자르기(substr, slice)
  str.substr(7, 5) // 7번째부터 시작, 5개만 자르기.  "world"
  str.slice(7, 12) // 7번째부터 ~ 12번째 까지 자르기. "world"
• 문자열 검색(search)
  str.search("world") // 인덱스값 반환.  7
• 문자열 대체(replace)
  let result = str.replace("world", "JavaScript"); // world를 JavaScript로 바꿈.  "Hello, JavaScript!" 
• 문자열 분할(split)
  let result = str.split(","); // 콤마, 기준으로 쪼개서 배열로 반환

 

3. 불리언(Boolean) : 참(true)과 거짓(false)을 나타내는 데이터 타입. 조건문(if, else, switch 등)과 논리 연산자(&&, ||, !)와 함께 많이 사용

let a = true;

let b = false;

console.log(a && b); // false

console.log(a || b); // true

console.log(!a); // false

 

4. undefined

undefined는 값이 할당되지 않은 변수를 의미.

일반적으로는 자바스크립트 엔진에서 값이 있어야 할 것 같은데 없는 경우, 자동으로 부여함

‘없다’를 명시적으로 표현할 때는 undefined를 사용하지 맙시다!

• 변수에 값이 지정되지 않은 경우, 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때
  typeof(abc) // "undefined" 상수와 변수로 선언하지 않은 식별자
  let a // 값이 없는 변수
• .이나 []로 접근하려 할 때, 해당 데이터가 존재하지 않는 경우
• return 문이 없거나 호출되지 않는 함수의 실행 결과

 

5. null

null은 값이 존재하지 않음을 의미. 

‘없다’를 명시적으로 표현할 때 사용

typeof null이 object인 것은 유명한 javascript 자체 버그이므로 유의

 

 

6. 객체(Object)

객체는 속성과 메소드를 가짐. 중괄호{}를 사용하여 객체를 생성

 

7. 배열(Array)

여러 개의 데이터를 순서대로 저장하는 데이터 타입. 대괄호[]를 사용하여 배열을 생성

 

 

---

자료형 변환

• prompt('_msg', '_default') : 문자열 입력
• confirm('_msg') : 불 입력

 

암시적 형 변환: 자바스크립트에서 자동으로 수행되는 형 변환으로, 일반적으로 연산자를 사용할 때 발생

• 1 + "2" // +연산자는 다른 자료형이 문자열과 결합되어있으면, 자동으로 문자열로 변환. "12"
• 1 - "2" // 숫자 변환. "-1"
• "2" * "3" // 숫자 변환. "6"
• 4 + +"5" // 숫자 변환. 빈 문자열("")이나 공백 문자열(" ")은 0으로 변환하고, 문자열은 자동으로 숫자로 변환. "9"
• Boolean() :  불 자료형으로 변환. 논리 부정 연산자(!)를 사용해서 불이 아닌 다른 자료에 논리 부정 연산자를 2번 사용하면 불 자료형으로 변환함. 
  !!'안녕하세요' // true
  false로 변환되는 자료형 5가지: 0, NaN, 빈문자열(""), null, undefined

 

명시적 형 변환: 개발자가 직접 자료형을 변환하는 것

• Number() : 다른 자료형을 숫자 자료형으로 변환. 숫자 연산자(-, *, /)를 사용해도 가능
  "52" - 0 // 52
  Number(true) // 1
  Number(false) // 0
  Number("") // 0
• String() : 문자열 자료형으로 변환. 문자 연결 연산자(+)를 사용해서 빈 문자열을 연결해줘도 문자열 자료형으로 변환함