TypeScript&JavaScript(21)
-
자바스크립트에서 배열과 객체를 다룰 때 유용한 문법과 함수정리-1
const example = { a: 1, b: 2, c: 3 }; const array = [1,2,3,4,5]; array.forEach(item => { //1,2,3,4,5 }) for (let key in example) { // 객체의 프로퍼티를 순환 console.log(key) // a, b, c } for (let key of array) { console.log(key) // 1,2,3,4,5 } // forEach는 Array의 prototype을 상속받은 객체가 사용가능한 '함수' // for in 은 객체의 속성을 순환하며 따라서 배열을 사용할 경우 index를 반환한다 // for of 는 객체의 속성을 순환하지 않으며 배열 혹은 이터러블한 객체에 사용이 가능하고 value를 반..
2020.04.15 -
Arrow Function
() => { ... } // 매개변수가 없을 때 a => { ... } // 매개변수가 한개 / 소괄호 생략 가능 (a, b) => { ... } // 매개변수가 여러 개/ 소괄호 생략 불가 a => a * a // 한 줄에 리턴값만 바로 넘겨주는 구문이라면 묵시적 return이 이렇게 가능하다 a => { return a * a } // 함수 바디 리턴 기본 방식 () => { return { a: 1 }; } () => ({ a: 1 }) //객체 반환시 리턴 생략하고 소괄호 사용 가능 () => { //여러 줄일때는 대괄호 이용한다 const a = 'abc'; return a; }; Arrow Function은 함수 키워드 대신 => 를 사용하여 좀 더 간결하게 함수를 선언할 수 있는 방법으로,..
2020.03.09 -
Hoisting
'use strict' //일반적인 함수 호출방법 function say(word) { console.log(word) } say('hi') //hoisting의 특징 say('hi') function say(word) { console.log(word) } 자바스크립트는 V8엔진을 통해 컴파일되는 과정에서 선언된 변수와 함수를 메모리에 '먼저' 저장한다. 그렇기 때문에 선언과 호출의 순서가 바뀌어도 정상적으로 동작하는 특징이 있다. 그러나 이러한 호이스팅 기능은 편리하면서도 코드가 길어지고 복잡해질경우 가독성을 떨어뜨리고 헷갈리게 만드는 부분이 있고, ES6이후 블록스코프/함수스코프의 차이 때문에 호이스팅의 특징을 살리기 보다는 선언과 호출 순서를 지키는 편이 더 낫다는게 개인적인 생각이다. 위 코드는..
2020.03.06 -
Typeof (data type checking)
자바스크립트는 기본적으로 타입을 선언하지 않는다. 각 변수에 할당하는 데이터에 맞춰 V8엔진이 데이터타입을 동적으로 부여한다. 이러한 기능은 편리하긴 하지만 대형 어플리케이션에서는 타입의 자유로움으로 인해 에러가 나는 경우도 왕왕 있고 그것을 추적하기 어려울 때가 있다. 따라서 최근에는 TypeScript를 통해 데이터타입을 명시적으로 선언하는 것을 선호하는 경우가 많다. 이는 장단점이 명확하기 때문에 사용자가 상황에 맞게 선택하는 것이 좋다. 'use strict' const string = `node.js` const array = [] const obj = {} const number = 1 console.log(typeof string) console.log(typeof array) console..
2020.03.05 -
String
'use strict' let string = 'node.js 올인원 패키지'; let isStartWith = string.startsWith('n'); //let isIncludes = string.includes('올인원'); let isIncludes = string.includes(','); let isEndWith = string.endsWith('지'); const checkIfContains = () => { if (isStartWith && isIncludes && isEndWith) { return true } else { return false } } const ret = checkIfContains(); console.log(ret); 자바스크립트는 기본적으로 string에 대해 유..
2020.03.05 -
Templete String
'use strict' const details = `자세한 내용`; let str = `node.js`; str += `올인원 패키지${details}` const int = 1; str += `${str}의 값은 ${int}` console.log`입력` console.log(str); ${} 형태로 쓰는 templete string은 ES6이후 지원되는 문법으로, 위처럼 변수를 다른 연산자 없이 바로 문자열과 함께 사용하거나 함수의 자리에 사용할 수 있다. 기존의 방식에 비해 코드길이가 짧아지고 직관적으로 알아보기가 좋다.
2020.03.05