(3장) 타입, 값, 변수 - 6. 형(타입) 변환 7. 변수 선언과 할당 [자바스크립트 완벽 가이드 7판]

iberis2·2022년 12월 26일
0

3장 타입, 값, 변수

자바스크립트의 타입

1. 숫자(Number)
2. BigInt
3. 문자열(String)
    - RegExp 타입: 텍스트 패턴
    (문자열에서 정교한 매칭, 검색, 대체 동작을 할 수 있다)
4. Boolean
5. Null, Undefined
6. Symbol
7. 객체(Object)와 배열(Array)
    - Set 객체 : 값의 집합
    - Map 객체 : 키와 값의 연결
    - 형식화 배열 : 바이트 배열과 다른 이진 데이터를 연결
    - Date 타입 : 날짜 , 시간 표현
    - Error 타입
    - 함수
    - 클래스

6. 타입 변환

변환 함수를 사용하지 않아도 자바스크립트에서 필요한 경우 자동적으로 변환이 이루어지기도 한다.

console.log(10 + "abc"); // 10abc 문자열로 반환
console.log("3" * "3"); // 9 숫자로 반환
let n = 1 - "x";
console.log(n); // NaN (문자열 x 는 숫자로 변환 불가)
console.log(n + " object"); // NaN object (Number 타입인 NaN가 문자열로 변환)

(1) 형변환 함수

함수
string()문자열로 변환
.toString()문자열로 변환, 2진법 ~ 32진법 사이 문자열 숫자로 변환
Number()숫자로 변환
숫자.toFixed(소수점 아래 자릿수)소수점 아래 몇 자리 표시할 지 지정
숫자.toExponential(자릿수)소수점 아래 몇 자리 표시할 지 지정(지수표기법 사용)
숫자.toPrecision(전체 숫자 길이)지정한 숫자가 작아서 정수 부분을 정확히 표시할 수 없을 때 지수 표기법 사용
parseInt()첫 번째 숫자를 최대한 해석하여 정수만 인식 나머지 무시, 0x로 시작할 경우 16진수로 해석
parseFloat()첫 번째 숫자를 최대한 해석하여 소수까지 인식
Boolean()불린 값(true/false)로 변환

.toString()

// toString(객체)는 항상 [object Object] 값이 나옴
let object = { x: 1, y: 2, z: 3 };
let doubleObject = { x: 1, y: 2, z: { a: 1, b: 2 } };
console.log(object.toString()); // [object Object]
console.log(doubleObject.toString()); // [object Object]

//toString(배열)
let a = [1, 2, 3, 4, 5];
console.log(a.toString()); // 1,2,3,4,5 (쉼표를 포함한 문자열로 반환)

console.log(a[0]); // 1
console.log(a[1]); // ,
console.log(a[2]); // 2


// 2부터 36진수까지 변환할 수 있고 출력값은 string 타입이다
let num1 = 255;
console.log(num1.toString(2)); // 11111111;
console.log(255..toString(8));//377  숫자를 바로 적으면 소수점으로 인식하여 오류가 나므로, 점을 2개 찍어야 한다
console.log((255).toString(16)); // ff 숫자를 괄호로 감싸도 가능

let n = 17;
let binary = "0b" + n.toString(2);
console.log(binary); // 0b10001

let octal = "0o" + n.toString(8);
console.log(octal); // 0o21

toFixed
결과 값을 위해 반올림하거나 0을 붙임
아무 숫자도 입력 안하면 정수만 남기고 소수점 첫번째 자리에서 반올림한다.
출력값은 문자열 이므로 숫자형으로 바꿔주기 위해 Number()함수 또는 +를 붙여줘야한다.
(결과값에 + 계산시 문자열로 계산될 수 있으므로 주의!)

let num = 123456.789;
console.log(num.toFixed(0)); // 123457 (소수점 아래 0번쨰까지 표현)
console.log(num.toFixed(5)); // 123456.78900
console.log(num.toFixed()); // 123457 (괄호 안이 공백일 경우 반올림하여 정수 리턴)

console.log((123.456).toFixed(1)) //123.5
console.log(typeof (123.456).toFixed(1)) // string
console.log(typeof +(123.456).toFixed(1)) // number

parseInt, parseFloat

console.log(parseInt("3 Hi nice to meet you")); // 3
console.log(parseInt("  3.77 meters")); // 3 (시작부분 공백, 소수 무시)
console.log(parseInt("0xFF")); // 255 (16진수로 해석)
console.log(parseFloat(".1")); // 0.1
console.log(parseInt(".1")); // NaN (정수는 .으로 시작할 수 없음)
console.log(parseInt("0.1")); // 0
console.log(parseFloat("$6.7")); //NaN (숫자는 $로 시작할 수 없음)

7. 변수 선언과 할당

let 변수; 중복선언 불가, 재할당 가능

  • 하지만 이미 선언한 변수를 재선언할 수는 없다
  • 변수 이름에 camelCase (소문자로 작성하며, 이어지는 단어의 첫 글자는 대문자로 작성) 사용

const 상수; 중복선언 불가, 재할당 불가

  • 상수에 Snake case (대문자로 작성하며, 언더바_를 사용해서 단어를 잇는다) 사용

var 변수 중복선언 가능, 재할당 가능

let myNum = 0;
const MY_NUM = 1;

myNum = 2; // 변수 재할당 가능
MY_NUM = 1; // TypeError: Assignment to constant variable. 상수 재할당 불가

let myNum = 3; //SyntaxError: Identifier 'x' has already been declared 재선언 불가

var num = 1;
console.log(num); // 1
var num = 2;
console.log(num);  // 2

분해할당

let [x, y] = [1, 2]; // let x = 1, y = 2; 와 동일

let [a, b, c] = [1, 2];
console.log([a, b, c]); // [1, 2, undefined]

let [n, m] = [1, 2, 3];
console.log([n, m]); // [1, 2]

let [, p, , q] = [1, 2, 3, 4];
console.log(p); // 2 (공백으로 건너뛰고 요소의 값을 할당해줄 수 있음)

let [s, ...z] = [1, 2, 3, 4];
console.log(z); // [2, 3, 4] (... 점 세개를 쓰면 배열하고 남은 값을 전부 할당)

let [d, e, f = 4] = "HI"; // 같은 배열이 아니어도 이터러블 객체면 할당 가능
console.log([d, e, f]); // ['H', 'I', 4]  ( = (등호)로 할당값이 없을 때 기본 값을 지정할 수 있음)

[함께 보면 좋을 글] 스코프(scope)

profile
React, Next.js, TypeScript 로 개발 중인 프론트엔드 개발자

0개의 댓글