JavaScript / TypeScript - 차세대 자바스크립트 문법 정리

thumbzzero·2023년 5월 5일

const / var / let의 차이

const - 변경 불가 상수

var vs. let

변수 scope가 다름
var - 전역 유효 범위와 함수의 유효 범위만 지님
var를 사용하면 자바스크립트는 함수의 유효 범위 및 전역 유효 범위 이외의 다른 유효 범위를 알지 못하는데 let을 사용하면 다름
let블록의 유효 범위라는 새로운 개념 도입 -> 변수나 상수가 정의된 블록이나 하위 블록에서는 항상 유효하다

화살표 함수

함수를 변수에 저장한 표현식으로서 작성
표현식이 하나뿐인 경우 중괄호를 생략하면 해당 표현식의 결과가 자동으로 반환
ex) const add = (a: number, b: number) => a+b;
암묵적인 리턴 문

기본값 함수 매개변수

ex) const add = (a: number, b: number = 1) => a+b;
오른쪽에서부터 기본값을 설정해야 함
기본값 인수를 허용하지 않는 매개변수가 기본값 매개변수 앞에 먼저 오도록 할 것

스프레드 연산자(…)

상수로 푸시할 수 있는 이유는 배열은 객체이고 객체는 참조값이기 때문
푸시하면 메모리는 변경되지만 address는 변경되지 않는다
: 해당 배열의 모든 요소를 꺼내 값의 목록으로서 추가 / 배열이 아닌 해당 연산자를 사용하는 위치의 개별 값의 목록 가져옴
배열의 요소를 추출하는데 유용
배열, 객체에 있음

있는 ‘객체 할당’ - 메모리에 있는 그 객체에 해당하는 포인터를 다른 상수로 복사하는 것
실제로 객체의 복사본을 만드는 게 아니라 실제 복사본을 만드려면 전개 연산자 객체와 함께 사용

함수 매개변수에 스프레드 연산자 사용
: ex) const add(...numbers) => { }
-> 들어오는 모든 매개변수 또는 일반적으로 들어오는 쉼표로 분리된 값들의 목록을 배열로 병합
any[]말고 number형 배열로 받아야할시에는
const add(...numbers: number[]) => { }로 타입 지정

배열 및 객체 비구조화 할당

배열에서 요소를 추출하는 것
원래의 배열을 바꾸지 않음,새로운 상수나 변수로 복사되는 것
ex) const [hobby1, hobby2, ...remainingHobbies] = hobbies;
ex) const { firstName: userName , age } = person;
-> 객체의 경우 객체에 입력된 속성 이름을 사용해야 이 키들의 값이 객체에서 추출되어 같은 이름의 상수나 변수에 저장됨 (무시하고자 하는 경우 콜론 뒤에 새 이름 설정 - 자바스크립트 구문 / 타입스크립트와 상관X)

0개의 댓글