본문 바로가기

Javascript

 (37)
[타입스크립트] 여러가지 타입을 정하는 방법 - union, any, unknown 타입스크립트에서는 변수 하나를 만들고 타입을 지정할 수 있다. 유니온 타입 : 그런데, 가끔가다가 숫자만이 아니라, 문자도 같이 들어오게 하고 싶을 때 어떻게해야할까? let 변수 : string | number = 'kim' 이렇게 변수에 string | number형식으로 타입을 선언하면 문자 또는 숫자의 타입을 허용한다는 말이 된다. 이렇게 두 가지 타입을 합친다는 의미로 union이라는 단어를 사용한다. 소괄호를 쳐도 된다. (string | number | boolean) 응용하기 : 문제 상황을 생각해보자 let 회원들 : number[] = [1,2,3]; 이렇게 배열안의 타입을 정해줄 수 있다 . 그런데 만약 배열안에 [1,'2',3]과 같이 숫자도 들어가고 문자도 들어가는 배열을 만들고 ..
[타입스크립트] 타입스크립트 필수문법 간략 정리 타입스크립트의 필수문법에 대해서 간략하게 정리해보겠다. 변수의 타입 : 먼저, 변수의 타입을 정하는 방법이다. let 이름 :string = 'kim' 자바스크립트와 동일하게 변수를 선언하고, 선언한 변수의 이름 옆에 변수의 타입을 정해준다. 그렇게하고 나면 무조건 해당 타입만 할당된다. string으로 타입을 지정했는데, 만약 number의 값을 할당하게되면 에러가 난다. 배열과 객체는 어떻게 타입을 선언할까? : 이름에 배열을 저장하려고 한다. 이름이라는 변수에는 배열만 넣고 싶다면 어떻게 해야할까? let 어레이 :[] = ['배열'] // 배열로 타입을 정하고 싶으면 :[] 만 붙여주면 된다. let 이름 :string[] = ['kim', 'park'] let 나이 :{ age : number ..
[자바스크립트] call, apply이란 무엇인가? 차이점은 무엇인가? apply는 자바스크립트의 내장함수이다. 이 함수는 특별한 기능을 가지고 있다. apply함수가 필요한 경우를 예로 들어서 설명해보자. var person = { 인사 : function () { console.log('안녕') } } person.인사(); var person2 = { name : '손흥민' } person이라는 객체에 '인사'라는 함수가 있다. 그런데, person2에서도 이 '인사'라는 함수를 사용하고 싶다. 이럴 경우 어떻게 해야할까? 이 때가 바로 apply함수가 필요한 순간이다. person.인사.apply(person2) 이것을 풀어서 설명하면 다음과 같다. person이라는 객체에서 '인사'라는 메서드를 사용할께. 그런데 이 메서드를 person2에 apply해주면 좋을것 ..
[자바스크립트] 배열과 객체의 값을 복사하는 방법 / spread operator . 점 세개를 사용하면 이게 spread operator이다. 무언가를 펼쳐놓고 싶을 때 사용한다. 예를 들어보자. var 어레이 = ['hello', 'world']; console.log(...어레이) // hello world 어레이에 spread operator를 붙이면, 대괄호를 제거해준다. 위에 적힌 코드대로 console.log(...어레이)를 출력하면, 대괄호가 제거되고, hello world가 출력된다. 그렇다면 문자열을 spread하면 어떻게 될까? var 문자 = 'hello' console.log(...문자); // h e l l o 각각의 문자들은 배열내 하나의 값으로 인식되고 있기 때문에, 각각의 값에 해당되던 대괄호가 지워진다. 그래서 'h', 'e', 'l', 'l', 'o'..
[자바스크립트] tagged literals 사용방법 tagged literals는 문자 해체 분석기능을 말한다. 이것을 사용하면 문자 중간중간에 있는 단어의 순서나 변수를 제거할 때 아주 유용하다. 보다 쉽게 조작할 수 있다. var 변수 = '손흥민'; function 해체분석기(){ return 10 } 해체분석기`안녕하세요 ${변수}입니다`; 해체분석기를 사용하는 방법은 위의 코드와 같이 ``백틱 기호를 함수뒤에 사용하면 된다. 일반적인 함수호출방법은 함수 뒤에 ()괄호를 붙이면 함수를 호출한다. 만약에 문자해체분석기능을 호출하고 싶다면 백틱 기호를 사용하자. 그럼 본격적으로 문자열 해체전용 함수를 만들어보자. var 변수 = '강백호'; function 해체분석기(문자들, 변수들) { console.log(문자들) // [안녕하세요, 입니다] co..
[자바스크립트] var, let, const 3가지 변수에 대한 정리 자바스크립트에는 총 3가지의 변수가 있다. var, let, const 이렇게 3개의 변수들이 굳이 생겨난 이유가 있을 것이고, 각각 다른 특징이 있을 것이다. 이 각각의 다른 특징을 선언, 할당, 범위 라는 기준을 가지고 설명해 보겠다. 선언 : 선언이란 말그대로 변수를 선언하는 것이다. 그런데 재선언이 가능한 변수가 있고, 불가능한 변수가 있다. var는 재선언이 가능한 변수이다. 재선언이 가능하다는 말의 예를 들어보자. var 이름 = 'kim' var 이름 = 'Park' 위 코드와 같이 '이름'이라는 변수명으로 또 다시 선언을 하는 것이 가능하다는 말이다. 이와 달리, let과 const의 경우에는 재선언하는 것이 불가능하다. 할당 : 할당은 선언되어있는 변수에 값을 넣어주는 것이다. 할당의 경..
[애플코딩] 자바스크립트 this란 무엇인가? 자바스크립트에서 사용하는 this라는 키워드는 4가지 뜻을 가지고 있다. 1)window : 먼저 window이다. 전역에서 this키워드를 출력해보면 콘솔에 window가 출력되는 것을 알 수 있다. 이 키워드를 또 함수안에서 사용해도 this는 window라는 값을 출력한다. 그런데, 만약에 여기에 use strict모드를 사용하면, 함수 안에서의 this는 undefinded를 출력하게 될 것이다. use strict모드는 문법적으로 조금 더 엄격한 모드를 말한다. 2)object : 두 번째 this의 뜻은 그 자체의 오브젝트를 뜻한다. 아래와 같이 하나의 오브젝트 안에, 함수를 넣어놓고, 그 함수 안에 this를 출력한 경우 이 this는 자신이 속해 있는 객체를 출력한다. 조금 더 풀어서 말하..
[자바스크립트] 자바스크립트의 동작원리 (stack, queue, event loop) 코드를 잘 짜기 위해서는 동작 원리를 이해하는 것이 필요하다. 브라우저의 동작원리를 잘 알아야하는 이유라고 한다면, 자바스크립트를 실행시켜주는 녀석이 브라우저이기 때문이다. 일반적인 프로그래밍 언어들은 뒤에서부터 한 줄로 내려오면서 코드를 읽게 된다. 만약 콘솔 사이에 1초의 시간을 두고 싶다고 했을 때, 아래와 같이 작성하면 console.log(1+1) setTimeout(function(){},1000) console.log(2+2) 브라우서 상에서 1초를 쉬고 콘솔을 출력하지 않는다. 아래와 같이 작성해야, 비로소 1초 뒤에 콘솔이 출력된다. console.log(1+1) setTimeout(function(){ console.log(2+2) },1000) 또 다른 예시로, console.log(..

티스토리툴바