본문 바로가기

js

 (25)
Js - symbol 심볼형 자바스크립트는 객체 프로퍼티 키로 오직 문자형과 심볼형만을 허용합니다. 숫자형, 불린형 모두 불가능하고 오직 문자형과 심볼형만 가능하죠. 지금까지는 프로퍼티 키가 문자형인 경우만 살펴보았습니다. 이번 챕터에선 프로퍼티 키로 심볼값을 사용해 보면서, 심볼형 키를 사용할 때의 이점에 대해 살펴보도록 하겠습니다. 심볼 '심볼(symbol)'은 유일한 식별자(unique identifier)를 만들고 싶을 때 사용합니다. Symbol()을 사용하면 심볼값을 만들 수 있습니다. // id는 새로운 심볼이 됩니다. let id = Symbol(); 심볼을 만들 때 심볼 이름이라 불리는 설명을 붙일 수도 있습니다. 심볼 이름은 디버깅 시 아주 유용합니다. // 심볼 id에는 "id"라는 설명이 붙습니다. le..
Js - 화살표 함수 화살표 함수 기본 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법이 있습니다. 바로 화살표 함수(arrow function)를 사용하는 것입니다. 화살표 함수라는 이름은 문법의 생김새를 차용해 지어졌습니다. let func = (arg1, arg2, ...argN) => expression 이렇게 코드를 작성하면 인자 arg1..argN를 받는 함수 func이 만들어집니다. 함수 func는 화살표(=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환합니다. 아래 함수의 축약 버전이라고 할 수 있죠. let func = function(arg1, arg2, ...argN) { return expression; }; 좀 더 구체적인 예시를 살펴봅시다. let sum =..
Js- 형 변환 형 변환 함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환됩니다. 이런 과정을 "형 변환(type conversion)"이라고 합니다. alert가 전달받은 값의 자료형과 관계없이 이를 문자열로 자동 변환하여 보여주는 것이나, 수학 관련 연산자가 전달받은 값을 숫자로 변환하는 경우가 형 변환의 대표적인 예시입니다. 이 외에, 전달받은 값을 의도를 갖고 원하는 타입으로 변환(명시적 변환)해 주는 경우도 형 변환이라고 할 수 있습니다. let eng = prompt("수학점수 입력"); let math = prompt("영어점수 입력"); alert((eng + math)/2); 각각 영어점수에 50점 수학점수에50점을 입력해주면 아래 사진과 같은 결과를 얻게 된다. 원했던 결과는 (50 +..
Js - alert, prompt, confirm alert alert 함수는 앞선 예제에서 살펴본 바 있습니다. 이 함수가 실행되면 사용자가 ‘확인(OK)’ 버튼을 누를 때까지 메시지를 보여주는 창이 계속 떠있게 됩니다. 예시를 살펴봅시다. alert("Hello"); 메시지가 있는 작은 창은 모달 창(modal window) 이라고 부릅니다. '모달’이란 단어엔 페이지의 나머지 부분과 상호 작용이 불가능하다는 의미가 내포되어 있습니다. 따라서 사용자는 모달 창 바깥에 있는 버튼을 누른다든가 하는 행동을 할 수 없습니다. 확인 버튼을 누르기 전까지 말이죠. prompt 브라우저에서 제공하는 prompt 함수는 두 개의 인수를 받습니다. result = prompt(title, [default]); 함수가 실행되면 텍스트 메시지와 입력 필드(input ..
TypeScript - 타입 별칭 타입 별칭은 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수를 의미합니다. 예를 들면 아래와 같습니다. // string 타입을 사용할 때 const name: string = 'capt'; // 타입 별칭을 사용할 때 type MyName = string; const name: MyName = 'capt'; 위와 같이 string, number와 같은 간단한 타입 뿐만 아니라 interface 레벨의 복잡한 타입에도 별칭을 부여할 수 있습니다. 아래 코드와 같이 말이죠. type Developer = { name: string; skill: string; } 타입 별칭에 제네릭도 사용할 수 있습니다. type User = { name: T } type vs interface 타입 별칭과 인터페이스..
TypeScript - 타입 호환 타입 호환이란 타입스크립트 코드에서 특정 타입이 다른 타입에 잘 맞는지를 의미합니다. 예를 들면 아래와 같은 코드를 의미합니다. interface Ironman { name: string; } class Avengers { name: string; } let i: Ironman; i = new Avengers(); // OK, because of structural typing C#이나 Java였다면 위 코드에서 에러가 날겁니다. 왜냐하면 Avengers 클래스가 명시적으로 Ironman 인터페이스를 상속받아 구현하지 않았기 때문입니다. 하지만 위와 같은 코드가 타입스크립트에서 정상적으로 동작하는 이유는 자바스크립트의 작동 방식과 관련이 있습니다. 기본적으로 자바스크립트는 객체 리터럴이나 익명 함수 등을..
TypeScriprt - 타입 추론 타입 추론(Type Inference) 타입 추론이란 타입스크립트가 코드를 해석해 나가는 동작을 의미합니다. 타입 추론의 기본 타입스크립트가 타입 추론을 해나가는 과정은 다음과 같습니다. let ex= 5; 위와 같이 ex에 대한 타입을 따로 지정하지 않더라도 일단 ex는 number로 간주됩니다. 이렇게 변수를 선언하거나 초기화 할 때 타입이 추론됩니다. 이외에도 변수, 속성, 인자의 기본 값, 함수의 반환 값 등을 설정할 때 타입 추론이 일어납니다. 가장 적절한 타입(Best Common Type) 타입은 보통 몇 개의 표현식(코드)을 바탕으로 타입을 추론합니다. 그리고 그 표현식을 이용하여 가장 근접한 타입을 추론하게 되는데 이 가장 근접한 타입을 Best Common Type이라고 합니다. 잠깐 ..
TypeScript - Generics 제네릭의 한 줄 정의와 예시 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미합니다. 아래 코드를 보겠습니다. function getName(name){ return name; } getName('zontae'); // zontae getName(5); //5 getName(true); //true 위 함수는 name라는 파라미터에 값을 넘겨 받아 name를 반환해줍니다. zontae, 5, true 등 어떤 값이 들어가더라도 그대로 반환합니다. 이 관점에서 제네릭을 한번 살펴보겠습니다. function getname2(name:T): T{ return name; } 위 함수는 제네릭 기본 문법이 적용된 형태입니다. 이제 함수를 호출할 때 아래와 같이 함수 안에서 사용할 타입을 넘겨줄 수 있..

티스토리툴바