8 Days A Week

타입 별칭 타입 별칭은 새로운 타입 값을 하나 생성하는 것이 아니라 정의한 타입에 대해 나중에 쉽게 참고할 수 있게 이름을 부여하는 것과 같다. // interface Person { // name: string; // age: number; // } type Person = { name: string; age: number; }; var seho: Person = { name: "세호", age: 30, }; type MyString = string; var str: MyString = 'hello'; type Todo = { id: string; title: string; done: boolean}; function getTodo(todo: Todo){ } 타입 별칭과 인터페이스의 차이점 타입 별칭과..

interface User { age: number; name: string; } // 변수에 활용한 인터페이스 활용 var seho: User = { age: 24, name: "세호", }; // 함수에 인터페이스 활용 function getUser(user: User) { console.log(user); } const capt = { name: "캡틴", age: 100, }; getUser(capt); // 함수의 스펙(구조)에 인터페이스를 활용 interface SumFunction { (a: number, b: number): number; } var sum: SumFunction; sum = function (a: number, b: number): number { return a + b;..

타입스크립트란? 자바스크립트에 타입을 부여한 언어. 실행하기 위해 컴파일이 필요함 왜 써야할까? → 자바스크립트에 타입이 있으면 무엇이 좋을까 function sum(a,b){ return a+b; } sum(10,'20'); //1020 (not 30) 자바스크립트에서는 의도하지 않은 인자의 전달도 실행돼 시스템의 오류를 일으킬 수 있음 function sum(a: number, b: number): number { return a + b; } result = sum(10, '22'); // error result = sum(10, 22); result.toLocaleString(); 타입스크립트로 타입을 명시해주면 경고, 에러가 발생해 이를 방지할 수 있음 사전방지 결과물이 제공하는 api를 바로 볼..

class를 통한 객체 생성 function Health(name){ this.name = name; } Health.prototype.showHealth = function(){ console.log(this.name + "님 안녕하세요"); } const h = new Health("crong"); h.showHealth(); >> "crong님 안녕하세요" javascript에는 class가 없지만 다음과 같이 prototype을 이용해 비슷한 구조를 만들 수 있다. class Health { constructor(name, lastTime){ this.name = name; this.lastTime = lastTime; } showHealth(){ console.log("안녕하세요 "+ this...

Arrow funtion 활용 setTimeout(function(){ console.log("settimeout"); },1000); // arrow function setTimeout( ()=>{ console.log("settimeout"); },1000); const newArr = [1,2,3,4,5].map(function(value, index, object){ return value * 2; }); // arrow function const newArr = [1,2,3,4,5].map((v)=>{ return v * 2; }); // 더 축약형 const newArr = [1,2,3,4,5].map((v)=>v * 2); >> [2, 4, 6, 8, 10] Arrow function의 th..

Template 처리 const data= [ { name: 'coffee-bean', order: true, items: ['americano','milk','green-tea'] }, { name:'starbucks', order: false } ] const template = `welcome ${data[0].name} !!` console.log(template) >> "welcome coffee-bean !!" Tagged Template literals const data= [ { name: 'coffee-bean', order: true, items: ['americano','milk..

Set으로 유니크한 배열 만들기 : 중복없이 유일한 값을 저장하려고 할때, 이미 존재하는지 체크할 때 유용 let mySet = new Set(); // 자료형 console.log(toString.call(mySet)); >> "[object Set]" // set에 인자 추가 mySet.add("crong"); mySet.add("hary"); mySet.add("crong"); // 해당 요소가 있는지 불린값 반환 console.log(mySet.has("crong")); >> true // 요소 삭제 mySet.delete("crong"); // 요소 하나씩 출력 mySet.forEach(function(v){ console.log(v); }) >> "hary" WeakSet : 참조를 가지고 있..

간단히 객체생성하기 // 기존 방식 function getObj(){ const name = "crong"; const getName = function() { return name; } const setName = function(newname){ name = newname; } const printName = function(){ console.log(name); } return { getName : getName, setName : setName } } var obj = getObj(); console.log(obj.getName()); // Object literal function getObj(){ const name = "crong"; const getName = function() { ret..

String의 유용한 메서드들 let str = "hello world ! ^^ ~~"; let matchstr = "hello"; console.log(str.startsWith(matchstr)); console.log(str.endsWith(matchstr)); console.log("include test", str.includes("world")); >> true false "include test" true for of - 순회하기 var data = [1,2,undefined,NaN,null,""]; Array.prototype.getIndex = function(){}; data.forEach(function(value){ console.log("valueis", value) }); >> ..

Babel을 사용하여 ES6 문법으로 코드를 작성 후 ES5로 변환해주어 호환성을 보장하는 방식이 주로 쓰인다. let : let은 블록단위에서 사용 가능한 변수 선언이다. var name = "global var"; function home(){ var homevar = "homevar"; for(let i=0; i ["apple", "orange", "watermelon", "banana"] immutable array는 어떻게 만들까? const list = ["apple","orange","watermelon"]; list2 = [].concat(list, "banana"); console.log(list, list2); console.log(list === list2); >> ["apple", ..