Published on

ES6

글쓴이

    📌 목차

    typescript
    • 1. let, const
    • 2. 화살표 함수
    • 3. spread 연산자

    1. let, const

    let, const는 es6에 추가된 문법이다. let은 변수에 할당된 값을 재할당할 수 있지만, const는 상수로서 기능한다. 변수값을 재할당할 수 없음을(immutable) 보장하는 키워드이다. 선언과 동시에 값을 할당하고 다른 값을 재대입하면 에러가 발생한다. 일반적으로 const의 사용을 권장한다.

    {
    let job = 'developer'
}
let name = 'tina'
const constant = 1;
constant = 2; // error : Assignment to constant variable

console.log(name);
console.log(job); // Uncaught ReferenceError: job is not defined

    var

    let과 const가 등장하기 전에는 var 키워드를 통해 변수를 선언했다. var는 값을 언제든지 재할당할 수 있으며, 소속된 scope 상에서 hoisting된다. var는 global scope와 function scope 둘 중 하나로 구분된다.

    hoisting은 선언 위치와 상관없이 선언을 scope상 가장 위로 끌어 올려주는 것이다.

    hoist : If you hoist something heavy somewhere, you lift it or pull it up there. (출처: Collins Cobuild)

    전역유효범위를 가진 var

    var result; // undefined
function add(a: number , b: number) {
	result = a+b;
	return result;
}
console.log(isGlobal) // true
{
    var isGlobal = true;
}
console.log(result);

    함수유효범위를 가진 var

    function add(a: number , b: number) {
	var result = a+b;
	return result;
}

console.log(result); // ReferenceError: result is not defined

    var 가 전역변수로 선언된 경우 var hoisting으로 인한 예측하지 못한 문제가 생길 수 있다.

    console.log(dontUse); // undefined
var dontUse;
dontUse = "var";
console.log(dontUse); // var

    dontUse에 아직 값이 할당되지 않은 상태에서 undefined 값에 접근하고, 아무런 에러메세지를 표시하지 않는다. 그러므로 var는 되도록 사용하지 않아야 한다.

    2. 화살표 함수

    자바스크립트에서는 화살표 함수를 사용해 코드양을 줄일 수 있다. function 키워드를 명시할 필요가 없기 때문이다. 아래 코드의 경우 파라미터가 없기 때문에 파라미터 부분을 ()로 표시했다. addEventListener 처럼 함수 파라미터가 필요한 경우에도 typescript가 Dom을 인식하기 때문에 타입을 명시해줄 필요가 없다.

    let sayHi = function() {
  alert( "Hello" );
};
let sayHiArrowFunc = () => alert( "Hi" );

let sayHiArrowFunc = (name :string) => alert( "Hi ${name}" );

    const button = document.querySelector('button');
if (button) {
  button.addEventListener('click', event => console.log(event));
}

    3. spread 연산자

    spread 연산자는 '펼쳐놓다' 라는 뜻을 가진 것처럼, 배열과 객체를 deepcopy할때 유용하게 사용된다. 아래 코드에서는 activeHobbies 배열에 hobbies 요소를 모두 push하고, 객체 person의 필드를 copiedPerson에 모두 복사할 때 사용했다.

    const hobbies = ['Sports', 'Cooking'];
const activeHobbies = ['Hiking'];

activeHobbies.push(...hobbies);

const person = {
  name: 'Max',
  age: 30
};

const copiedPerson = { ...person };

    나머지 매개변수

    Rest parameters도 스프레드연산자와 동일한 형태로 사용된다. 함수의 파라미터를 여러개로, 정해지지 않은 개수를 넘기고 싶을 때 사용한다. 그러면 자바스크립트에서 배열로 변환해 넘겨준다.

    const add = (...numbers: number[]) => {
  return numbers.reduce((curResult, curValue) => {
    return curResult + curValue;
  }, 0);
};

const addedNumbers = add(5, 10, 2, 3.7);

    위 코드에서 쓰인 reduce 함수는 es6의 편리한 함수 중 하나이다.

    es6 함수

    구조분해할당

    영어로는 destructring이라고 한다. 아래는 요소를 뽑아내서 hobby1, hobby2로 할당하고, 취미가 2개 이상이면 remainingHobbies라는 배열에 넣는 코드이다. 객체도 마찬가지로 구조분해할당이 가능하다.

    const [hobby1, hobby2, ...remainingHobbies] = hobbies;
console.log(hobbies, hobby1, hobby2);

const { firstName: userName, age } = person;
console.log(userName, age, person);

    Reference