본문 바로가기

분류 전체보기

 (40)
[TypeScript] Generic과 any의 차이 타입스크립트 강의중 제네릭에 관해 배우고 있는데 문득 의문이 들었다. 제네릭은 한가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용하는데, 모든 타입 을 허용하는 any와 무엇이 다른지 궁금했다. 타입스크립트 공식홈페이지에 가니 친절하게 설명이 나와있었다. function logText(text: any): any { return text; } 위 코드를 보면 함수의 동작에는 문제가 없다. 다만, 함수의 인자로 어떤 타입이 들어갔고 어떤 값이 반환되는지 알 수 가 없다. any라는 타입은 타입 검사를 하지 않기 때문이다. 이러한 문제점을 해결할 수 있는 것이 제네릭이다. function logText(text: T): T { return text; } 함수의 이름 바로 뒤에 라는 코드를..
[JavaScript] 메서드와 this 객체는 사용자(user), 주문(order), 등과 같이 실제 존재하는 개체(entity)를 표현하고자 할 때 생성된다. let user = { name: "John", age: 30 }; 사용자는 현실에서 장바구니에서 물건 선택하기, 로그인하기, 로그아웃하기 등의 행동을 한다. 이와 마찬가지로 사용자를 나타내는 객체user도 특정한 행동을 할 수 있다. 자바스크립트에선 객체의 프로퍼티에 함수를 할당해 객체에게 행동할 수 있는 능력을 부여해준다. - 메서드 만들기 : 객체 user에게 인사할 수 있는 능력을 부여해보자. let user = { name: "John", age: 30 }; user.sayHi = function() { alert("안녕하세요!"); }; user.sayHi(); // 안녕하..
[JavaScript] 참조에 의한 객체 복사 객체와 원시 타입의 근본적인 차이 중 하나는 객체는 '참조에 의해' 저장되고 복사된다는 점이다. let message = "Hello!"; let phrase = message; 위 코드를 실행하면 두 개의 독립된 변수에 각각 문자열 "Hello"가 저장된다. 그런데 변수엔 객체가 그대로 저장되는 것이 아니라, 객체가 저장되어있는 '메모리 주소'인 객체에 대한 '참조 값'이 저장된다. let user = { name: "John" }; 객체는 메모리 내 어딘가에 저장되고, 변수 user엔 객체를 '참조'할 수 있는 값이 저장된다. 따라서 객체가 할당된 변수를 복사할 땐 객체의 참조 값이 복사되고 객체는 복사되지 않는다. let user = { name: "John" }; let admin = user; ..
[JavaScript] 객체 - 객체 생성 방법 let user = new Object(); // '객체 생성자' 문법 let user = {}; // '객체 리터럴' 문법 주로 객체리터럴 방법을 사용한다. - 리터럴과 프로퍼티 let user = { // 객체 name: "John", // 키: "name", 값: "John" age: 30 // 키: "age", 값: 30 }; 콜론: 기준으로 왼쪽엔 키가, 오른쪽엔 값이 위치한다. 프로퍼티 키는 프로퍼티 '이름'혹은 '식별자'라고 부른다. // 프로퍼티 값 얻기 alert( user.name ); // John alert( user.age ); // 30 // 불린형 프로퍼티 추가 user.isAdmin = true; // 프로퍼티 삭제 delete user.age; - 여러 ..
[JavaScript] 화살표 함수 함수 표현식보다 단순하고 간결한 문법으로 함수를 만드는 방법은 화살표 함수를 사용하는 것이다. // 함수 표현식 let func = function(arg1, arg2, ...argN) { return expression; }; // 화살표 함수 let func = (arg1, arg2, ...argN) => expression 이렇게 코드를 작성하면 인자 arg1, arg2...를 받는 함수 func가 만들어진다. 함수 func는 화살표 => 우측의 표현식을 평가하고, 평가 결과를 반환한다. // 인수가 하나밖에 없다면 괄호를 생략할 수 있다. let double = n => n * 2; // let double = function(n) { return n * 2 }과 거의 동일합니다. alert( d..
[JavaScript] 함수 표현식 함수 선언 방식 외에 함수 표현식을 사용해서 함수를 만들 수 있다. // 함수 선언문 방식 function sayHi() { alert( "Hello" ); } // 함수 표현식 let sayHi = function() { alert( "Hello" ); }; 또한 변수를 복사해 다른 변수에 할당하는 것처럼 함수를 복사해 다른 변수에 할당할 수도 있다. function sayHi() { // (1) 함수 생성 alert( "Hello" ); } let func = sayHi; // (2) 함수 복사 func(); // Hello // (3) 복사한 함수를 실행(정상적으로 실행됩니다)! sayHi(); // Hello // 본래 함수도 정상적으로 실행됩니다. (1)에서 함수 선언 방식을 이용해 함수를 생성..
[JavaScript] 함수 - 지역 변수 : 함수 내에서 선언한 변수인 지역 번수는 함수 안에서만 접근할 수 있다. function showMessage() { let message = "안녕하세요!"; // 지역 변수 alert( message ); } showMessage(); // 안녕하세요! alert( message ); // ReferenceError: message is not defined (message는 함수 내 지역 변수이기 때문에 에러가 발생.) - 외부 변수 : 함수 내부에서 함수 외부의 변수인 외부 변수에 접근할 수 있다. let userName = 'John'; function showMessage() { let message = 'Hello, ' + userName; alert(message); } s..
[JavaScript] switch문 여러개의 if조건문은 switch문으로 바꿀 수 있다. switch문을 사용한 비교법은 특정 변수를 다양한 상황에서 비교할 수 있게 해준다. - 문법 / switch문은 하나 이상의 case문으로 구성된다. default문도 있지만 필수는 아니다. switch(x) { case 'value1': // if (x === 'value1') ... [break] case 'value2': // if (x === 'value2') ... [break] default: ... [break] } 변수x의 값과 첫 번째 case문의 값 'value1'를 일치 비교한 후, 두 번째 case문의 'value2'와 비교한다. case문에서 변수x의 값과 일치하는 값을 찾으면 해당 case문의 아래 코드가 실행된다. 이때,..

티스토리툴바