22.11.10 목 TIL

1. Done

---

1. 자바스크립트 원시타입, 참조타입, 원시 래퍼타입

원시타입

원시 타입은 있는 그대로 저장되는 데이터를 표현한다.

원시타입의 종류

• boolean : true, false
• number: 1, 2, 0.134, NaN, ...etc
• string: '문자열인거'
• null
• undefined

원시타입의 특징

원시값을 변수에 할당하면 값이 복사되어 들어간다. 이 말은 즉, 원시값이 할당된 변수들은 모두 자기 자신만의 고유한 값을 가지게 된다는 것을 의미한다.

따라서 값을 할당한 변수의 값이 바뀌더라도 값을 할당받았던 변수의 값은 원시값이 할당된 변수는 자기 자신만의 고유한 값을 가지게 되므로 변하지 않는다.

예시 코드

let num1 = 1;
let num2 = 2;

num1 = num2;
num1 = 3;
console.log(num1, num2); // 3 2

주의사항

원시값의 종류를 알 수 있게 해주는 typeof 메서드를 사용해서 의 타입을 체크할 경우 object (객체→참조타입)가 나오게 된다. 이는 자바스크립트 자체의 문제이기 때문에, null 값 여부를 정확하게 확인하기 위해서는 일치 연산자(strict equality operator) === 를 사용하여 비교하는게 옳다.

const value = null;
let answer = value === null ? true : false;

console.log(answer); // true

2. 참조 타입

참조 타입이란 자바스크립트의 객체를 말한다. 자바스크립트에서 원시 타입을 제외한 나머지는 사실상 참조 타입이다.

참조 타입의 종류

• 객체: {}
• 배열: []
• 함수
• Date 객체
• 정규표현식(RegExp)

참조 타입의 특징

원시 타입과 다르게, 참조 타입은 변수에 값을 직접 저장하지 않는다.

값이 직접 저장되는 것이 아니라 메모리 안에서 객체의 위치를 가리키는 ’포인터’ 가 저장된다.

변수에 저장되는 값이 무엇인지가 원시 타입과 참조 타입의 가장 큰 차이점이다.

예시 코드

let obj1 = { one: 1 };
let obj2 = { two: 2 };

obj2 = obj1; // 두 변수가 포인터의 주소를 공유하게 되었다.

obj2.one = 3;

console.log(obj1); // { one: 3 }
console.log(obj2); // { one: 3 }
console.log(obj1 === obj2); // true
// 참조타입의 동등 비교 시
// 값의 일치가 아닌 값을 가리키는 포인터 위치(주소)의 일치 여부를 확인하고 true가 리턴됨.
// 원시 타입은 동등 비교 시 값의 일치 여부를 비교함.

3. 원시 래퍼 타입

원시 타입을 객체처럼 편리하게 사용하도록 도와준다.

종류

• string
• number
• boolean

원시 래퍼 타입의 특징

오토박싱(autoboxing)

원시 타입을 객체처럼 사용하는 순간, 자바스크립트는 사용하는 데이터의 인스턴스를 만들게 되고, 이 만들어진 객체는 코드를 실행 후 다음 줄에서 바로 파괴된다. 이러한 과정을 오토박싱이라고 부른다.

타입스크립트

함수의 리턴값 타입지정하기

타입을 정의해둔 인터페이스나 별칭을 지정한 타입을 함수의 매개변수 뒤에 세미콜론을 붙여서 넣어서 함수의 리턴값의 타입을 지정해줄 수 있다.

타입 alias 사용

type User = {
    name: string,
		age?: number
}

function userGenerator(name: string): User {
    return {
        name,
    };
}

const kim = userGenerator('ryan');
kim.age = 30;
console.log(kim);
/*
[LOG]: {
  "name": "ryan",
  "age": 30
}
*/

interface 사용

interface User {
    name: string;
    age?: number;
}

function userGenerator(name: string): User {
    return {
        name,
    }
}

const kim = userGenerator('ryan');
kim.age = 30;
console.log(kim);
/*
[LOG]: {
  "name": "ryan",
  "age": 30
}
*/

화살표 함수도 동일하게 콜론: 타입

const userGenerator = (name: string): User => {
    return {
        name,
    }
}

const kim = userGenerator('ryan');
kim.age = 30;

타입에 readonly(읽기 전용) 속성 주기

값의 변경을 막고자 하는 객체의 프로퍼티, 배열이나 튜플 리터럴 타입에 ‘readonly’ type Modifier를 사용하여 값의 불변성(immutablity)을 유지할 수 있다.

interface User {
    readonly name: string;
    age?: number;
}

const numArr: readonly number[] = [1, 2];
~~numArr.push(1);~~
// Property 'push' does not exist on type 'readonly number[]'.

const tupleExample: readonly [string, number, boolean] = ['ryan', 1, true];
~~tupleExample[0] = '안바뀔걸';~~
// Cannot assign to '0' because it is a read-only property.

Call Signature

함수의 매개변수 타입과 리턴값의 타입을 미리 지정해두고 함수에서 사용할 수 있다.

type Divide = (a: number, b: number) => number;

const divider: Divide = (a, b) => a / b;

console.log (divider(4, 2)); // 2

타입스크립트 프로젝트 수동으로 환경설정하기

tsconfig.json

• include: ts → js로 컴파일할 파일의 경로 지정
• compilerOptions
  • outDir: 컴파일된 결과물이 저장될 경로
  • target: 어떤 버젼의 자바스크립트 문법으로 컴파일할지 지정
  • lib: 코드가 실행될 환경(의 라이브러리 정의 파일셋) 지정
    • ES6: Node.js에서 코드 실행
    • DOM: 브라우저에서 코드 실행

// tsconfig.json
{
  "include": ["src"],
  "compilerOptions": {
    "outDir": "build",
    "target": "ES6",
    "lib": ["ES6", "DOM"]
  },
  "compileOnSave": true
}

---