[Javascript] 속기 문법

자바스크립트 속기 코딩 문법에 관한 글을 읽다가 초급개발자로서 알아두면 정말 좋을 것 같아 포스팅한다.  

  

1. 삼항 연산자  

if..else 문법이 번거로울때 사용

const x = 20;  

let answer;  

  

if (x > 10) {  

    answer = "greater than 10";  

} else {  

    answer =  "less than 10";  

}  

20보다 크냐 아니냐를 판별하는데 코드는 쓸 데없이 긴 느낌이다.  

이럴때 삼항연산자를 사용해주면 공 들이지않고도 있어보이는 코드를 짤 수 있다.  

const answer = x > 10 ? "greater than 10" : "less than 10";  

 

 

  

2. 단락 평가  

변수가 null 이거나 undefined이거나 ""인지 확인이 필요할 때가 있다.   

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {  

    // variable1이 null이 아니거나, undefined가 아니거나, 공백이 아닐때  

     let variable2 = variable1; //값을 대입한다.  

} 

 

const variable2 = variable1  || 'new';   

 

  

 

3. 변수 선언  

여러 변수를 선언해야할 때 사용하자.  

let x;  

let y;  

let z = 3;  

 

let x, y, z = 3;  

 

  

 

4. truthy  

if문으로 변수에 할당된 값이 true인지 아닌지 판별해야 할 때 보통은 이렇게 한다.  

if (likeJavaScript === true) {...} 

 

자바스크립트에는 truthy, falsy가 true같은 값, false같은 값으로 통한다.  

곧 불리언 문맥에서 true, false로 평가된다.  

if (likeJavaScript) {...} 

 

  

 

 

5. For Loop  

배열에 있는 것들을 조작하고 싶을때 흔히들 사용하는 방법이다.  

배열의 length를 이용해 for루프를 돌리는 것   

const fruits = ['mango', 'peach', 'banana'];  

for (let i = 0; i < fruits.length; i++)  {...}

하지만 우리는 이렇게 표현할 수 있다.  

for (let fruit of fruits)  {...}

  

 

 

6. 객체 속성   

ES6는 객체에 속성을 보다 쉽게 할당할 수 있는 방법을 제공한다.   

* 변수 이름이 객체 키와 동일하면 속기 표기법을 활용할 수 있다!  

const x = 1920, y = 1080;  

const obj = { x:x, y:y };  

const obj = { x, y };  

 

 

 

7. 화살표 함수  

화살표함수의 사용으로 인해 코드가 간결해지면서 가독성이 올라가는 효과가 있다.  

하지만 조건이 많을 때는 첫번째 방법을 쓰는 것을 추천한다. 

 

list.forEach(function(item) {  

  console.log(item);  

});  

  

setTimeout(function() {  

  console.log('Loaded');  

}, 2000);  

list.forEach(item => console.log(item));  

setTimeout(() => console.log('Loaded'), 2000);  

 

  

 

 

8. 암시적 반환  

return은 함수의 최종결과를 반환하기 위해 자주 사용하는 키워드이다.   

단일 명령문이있는 화살표 함수는 평가 결과를 내재적으로 리턴한다.  

  

객체 리터럴과 같은 여러 줄 문장을 반환하려면 본문을 감싸는 {} 대신 ()를 사용해야한다.  

function calcCircumference(diameter) {  

  return Math.PI * diameter;

}  

calcCircumference = diameter => (  

  Math.PI * diameter;  

)  

 

  

 

9. 템플릿 리터럴  

문자열 연결할때 '+'을 흔히들 쓸 것이다. 나 또한 그랬는데 템플릿 리터럴을 알고나서 광명찾은 느낌이다.   

const welcome = 'You have logged in as ' + first + ' ' + last + '.';  

const db = 'http://' + host + ':' + port + '/' + database; 

 

`` 사이에 문자열을 작성하고 들어와야하는 변수명들은 ${}에 넣는다.   

정말 편하다. 

const welcome = `You have logged in as ${first} ${last}`;  

const db = `http://${host}:${port}/${database}`;  

 

 

 

10. Multi Line 문자열  

여러줄의 문자열을 쓸 때는 백틱을 사용하자.   

내가 정말 좋아하는 방법.  

const lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t'  

    + 'adipisicing elit, sed do eiusmod tempor incididunt\n\t'  

    + 'ut labore et dolore magna aliqua. Ut enim ad minim\n\t'  

    + 'veniam, quis nostrud exercitation ullamco laboris\n\t'  

    + 'nisi ut aliquip ex ea commodo consequat. Duis aute\n\t'  

    + 'irure dolor in reprehenderit in voluptate velit esse.\n\t';  

const lorem = `Lorem ipsum dolor sit amet, consectetur  

    adipisicing elit, sed do eiusmod tempor incididunt  

    ut labore et dolore magna aliqua. Ut enim ad minim  

    veniam, quis nostrud exercitation ullamco laboris  

    nisi ut aliquip ex ea commodo consequat. Duis aute  

    irure dolor in reprehenderit in voluptate velit esse.`;  

 

 

 

11. spread 연산자  

concat()이나 slice()로 문자열을 조작하는 경우이다.  

  

concat(): 문자열을 합쳐준다.  

slice(): 문자열을 자른다.  

// joining arrays  

const odd = [1, 3, 5];  

const nums = [2 ,4 , 6].concat(odd);  

  

// cloning arrays  

const arr = [1, 2, 3, 4];  

const arr2 = arr.slice();  

  

 

spread연산자를 사용하면(...점 세개) 문자열을 복사해준다.  

// joining arrays  

const odd = [1, 3, 5 ];  

const nums = [2 ,4 , 6, ...odd];  

console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]  

  

// cloning arrays  

const arr = [1, 2, 3, 4];  

const arr2 = [...arr];  

 

 

 

12. Array.find  

'어떤' 변수명이 '어떤' 값과 일치하는 경우 결과를 반환한다.   

코딩하다보면 많이 쓰이는데 이 것을 find()함수를 사용하면 훨씬 간결하게 표현할 수 있다.  

 

const pets = [  

  { type: 'Dog', name: 'Max'},  

  { type: 'Cat', name: 'Karl'},  

  { type: 'Dog', name: 'Tommy'},  

];  

  

function findDog(name) {  

  for(let i = 0; i<pets.length; ++i) {  

    if(pets[i].type === 'Dog' && pets[i].name === name) {  

      return pets[i];  

    }  

  }  

}  

pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');  

console.log(pet); // { type: 'Dog', name: 'Tommy' }  

 

  

 

13. 문자열을 숫자로 변환  

문자열을 숫자로 변환할 때  

 

const num1 = parseInt("100");  

const num2 =  parseFloat("100.01");  

 

문자열앞에 + 만 붙여줬는데 숫자로 변환이 된다. 유용하다.  

const num1 = +"100"; // converts to int data type  

const num2 =  +"100.01"; // converts to float data type  

  

 

 

 

 

> 참고 https://www.sitepoint.com/shorthand-javascript-techniques/