Javascript와 Typescript를 작성할 때 가장 좋은 단축키

자바스크립트와 Typescript는 작성된 코드의 양을 줄일 수 있는 이상하고 숨겨진 몇 가지 특성을 가지고 있다는 것을 누구나 다 알고 있다.이 글의 앞머리에서, 나는 당신에게 간단명료하고 효율적인 코드가 항상 좋은 코드와 같지 않다는 중요한 정보를 제공하고 싶습니다.여느 때와 마찬가지로, 당신은 일련의 기이한 기능을 실현하는 것이 아니라, 가독성을 우선적으로 고려해야 합니다.
즉, 이러한 특성들은 대량의 공간을 절약할 수 있고, 코드를 읽는 다른 사람들에게 이러한 특성을 정확하게 사용하는 것은 이해하기 쉽다는 것이다.코드에서 사용하고 이해할 수 있도록 이 속기 기능들을 살펴봅시다.

1.3원 계산
이것은 아마도 가장 널리 알려진 자바스크립트 함수일 것이다. 약칭 'if-else' 문장이라고 할 수 있다.이 조작부호를 사용하면 대량의 if else 템플릿 파일을 삭제하고 네 줄을 한 줄로 만들 수 있습니다!

let v = true;

// Traditional approach
if (v) {
    console.log('True');
} else {
    console.log('False');
}

// Ternary Operator
v ? console.log('True') : console.log('False');

구조는 다음과 같다: <conditional expression> ? <true case> : <false case?.아주 간단하죠?이것은 단행if-else 조작을 실행하는 좋은 방법으로 다른 속기 조작부호와 결합하여 사용할 때 특히 유용하다.

2. Typescript의 구조 함수 속기
이것은 Typescript(JS 사용자)를 위해 특별히 설계된 것이지만, 클래스를 구축할 때 이것은 매우 좋은 특성이다.
보통 하나의 클래스에서, 모든 클래스 변수를 열거한 다음, 구조 함수에서 다시 분배해야 한다. 이것은 대량의 코드가 필요하다.그러나 만약 당신의 클래스가 상대적으로 간단하다면, Typescript는 당신이 작성한 코드의 양을 줄이는 좋은 방법이 있습니다.

// Normal way
class Location {
    private _latitude: string;
    private _longitude: string;

    constructor(latitude: string, longitude: string) {
        this._latitude = latitude;
        this._longitude = longitude;
    }
}

// Shorthand in TypeScript
class Location {
    constructor(
        private _latitude: string,
        private _longitude: string
    ) {}
}

대량의 속성을 가진 대형류에서 이것은 진정한 생명의 볏짚일 수 있다!

3. 영위 연산자
nullish 연산자는 자주 오해를 받는다. 표현식을 쉽게 계산하고 null인지 확인할 수 있으며, null이면 기본값을 되돌려줍니다.

function nullish(value1, value2) {
    // If value1 is null returns 'default'
    let v1 = value1 ?? 'default';
    return v1 + value2;
}

myFn("this has no") //returns "this has no default"
myFn("this has no", 0) //returns "this has no 0"

실제로 기술적으로는 null 또는 undefined를 검사하지만 명칭은 이미 충분하다.이것은 값이 존재하는지 검사하는 좋은 방법이다.

4. 대상 재산 양도
ES6는 객체에 값을 지정하는 프로세스를 단순화합니다.객체 등록 정보와 동일한 변수에 값을 지정하면 이름을 반복할 필요가 없습니다!

let name: string = "Caelin";
let age: number = 18;

interface User {
    name: string;
    age: number;
}

// Old way (manual assignment)
let user1: User = {
    name: name,
    age: age,
}

// New way!
let user2: User = {
    name,
    age,
}

위에서 보듯이 새로운 방법은 낡은 방법보다 더 간단하고 건조하다!

5. Arrow/Lambda 함수
만약 네가 이런 조작부호를 많이 본 적이 있다면, => 여기저기 마구 던지면, 그것들은 바로 화살표 함수이다.이것은 모든 lamda 함수가 기본적으로 되돌아오기 때문에 return 문장을 저장할 수 있습니다.
배열 연산자에 자주 사용되는 것을 볼 수 있습니다. 예를 들면 다음과 같습니다.

let arr = [1, 2, 3, 4, 5];

// Long way
arr.map(function (n) {
    return n*2;
})

// Short way
arr.map(n => n*2);

보시다시피, 그것은 코드를 더욱 읽을 수 있고 짧게 합니다.

6.. 기본 매개변수 값
ES6에서 함수의 기본 매개 변수 값을 지정할 수 있습니다.이전에는 OR의 게으름 평가에 의존해야 했다. 이것은 효과가 있지만 가장 이상적인 해결 방안은 아니다.

// Assigns 'c' a default value
function defaultParams(a, b, c="c") {
    return a + b + c;
}

재미있는 팁: 필수 매개변수를 생성하려면 다음과 같이 하십시오.

const requiredParam = _ => throw new Error('Required Parameter!');

// Create a default parameter d
function defaultParamRequired(a, b, c="c", d=requiredParam()) {
    // Logic
}

현재, 이 함수가 기본 매개 변수 d를 전달하지 않은 상태에서 실행되면, 오류가 발생합니다.멋있죠?

7. 분해 및 확장 연산자
나는 확실히 spread operators에 관한 글을 한 편 썼지만, 전파와 파괴 조작은 대상과 그룹을 이용하는 좋은 방법이다!

해체하다
원본 객체에 액세스하지 않고 개별적으로 객체(수정 또는 읽기) 매개변수에 액세스하는 것이 일반적입니다.일반적으로 각 객체 매개 변수에는 선이 필요하며 더 큰 객체에는 선이 길어질 수 있습니다.대상 분해는 우리가 그것을 한 줄로 자르는 것을 허락한다.

const user = {
    name: 'Caelin',
    age: 18,
}

// Normal method
const name = user.name;
const age = user.age;

// Destructuring method
const {name, age} = user;

이런 문법은 복잡한 대상을 처리할 때의 줄 수를 줄이기 위해 대상 매개 변수와 도입 문장에 매우 적합하다.

퍼뜨리다
Spread 연산자는 객체 및 배열을 확장하여 쉽게 조합할 수 있습니다.

const arr1 = [1,2,3,4]
const arr2 = [5,6,7]

const finalArr = [...arr1, ...arr2] // [1,2,3,4,5,6,7]

const partialObj1 = {
  name: "fernando"
}
const partialObj2 = {
  age:37
}

const fullObj = { ...partialObj1, ...partialObj2 } // {name: "fernando", age: 37} 

결론
이것들은 많은 자바스크립트와 Typescript 단축키의 일부분일 뿐입니다. 이것은 당신의 시간을 절약하고 코드를 더욱 깨끗하게 할 수 있습니다.코드 효율을 높이거나 코드 줄 수를 줄이기 위해서가 아니라 다음 개발자가 코드를 더욱 뚜렷하고 쉽게 읽을 수 있도록 하기 위해서라는 것을 명심하세요.
내가 뭘 놓쳤나?댓글을 꼭 달아주세요!

연락을 유지하다
많은 내용이 있는데, 나는 네가 나를 읽어 줘서 매우 고맙다.저는 젊은 기업가입니다. 저는 소프트웨어 개발과 회사를 경영한 경험을 썼습니다.너는 나의 통신을 등록할 수 있다here
언제든지 연락 주시고 또는 에 연락 주세요.