[JS]자바스크립트의 문법과 표현

1. 문
최소 문법 단위 토큰으로 구성된 동작의 최소크기

2. 표현식
값으로 평가되는 식

3. Spread 구문
Es2015에서 새로 등장한 문법
배열을 다룰 때 유용하다.
배열의 요소들을 펼칠 때 사용

const arr = [1,2,3];

console.log(...arr);

출력결과 /// 1 2 3

Rest Parmeter 문법은 비슷하지만 작동이 다르다.

사용예)
const webPublishing = ['HTML' 'CSS'];
const interactiveWeb = [...webPublishing, (추가요소)];
.slice() 메소드를 사용하지 않고도 배열을 복사할 수 있다.
배열을 합쳐 새로운 배열을 만들 때도 좋다.
인수로도 사용할 수 있다.

* 스프레드 구문 자체가 하나의 '값'이 아니다.
* 객체에 담게 되면 인덱스가 키, 요소가 값이된다.
* 객체에서 활용할 때 프로퍼티를 ...spread를 사용해서 복사할 수 있다.
  - 깊은 복사는 일어나지 않는다!
  - 배열에 담거나 인수로 사용할 수 없다.


4. 모던한 프로퍼티 표기법

let a = 10;

const test = {
  a  // 변수자체를 키와 값으로 넣어줄 수 있다. 함수도 마찬가지!!
  testFunction () { // 객체 내 메소드를 선언할 때 function 키워드와 :을 생략할 수 있다!
    동작;
  }
}

표현식으로 프로퍼티 네임 만들기
[표현식]


5. 옵셔널 체이닝 : 속성에 안전하게 접근하기 위해
user.cat?.name
? 왼쪽의 프로퍼티(user.cat)가 null / undefined라면 undefined를 아니라면 오른쪽 프로퍼티를 반환한다
프로퍼티마다 사용할 수 있다. >> user?.cat?.name  마지막 프로퍼티는 안됨!


6. 구조분해(Destructuring)

6-1. 배열

예문)
const rank = ['철수', '영희', '민지', '영수'];

const macbook = rank[0];
const ipad = rank[1];
const airpods = rank[2];
const coupon = rank[3];

위와 같은 코드는

const [macbook, ipad, airpods, coupon] = rank;
이렇게 할 수 있다.
* 할당되는 값이 배열이 아니거나, 값이 없으면 오류가 발생한다

변수의 개수가 배열의 길이가 같을 필요가없다.
배열이 더 길어도 넘치는 요소는 할당되지않는다.
* 마지막 변수에 ...coupon 식으로 선언하면 넘치는 요소들을 포함해서 배열로 만들 수 있다.
* 배열의 요소가 더 적으면 할당받지 못한 변수는 undefined가 된다.
* 파라미터와 마찬가지로 변수에 기본값을 설정할 수 있다.

변수의 값을 서로 교환 할때도 사용할 수 있다!
ex)
let a = 10;
let b = 20;
[a, b] = [b, a];


6-2. 객체의 구조 분해

예문)
conts macbook = {
  title: '맥북 프로 16형',
  price:36900000,
  memory: '16GB',
  storage: '1TB SSD 저장 장치',
  display: '16형 Retina 디스플레이',
}

const { title, price } = macbook; // 배열과 비슷하다.
똑같은 프로퍼티 이름을 변수로 저장한다.
존재하지 않은 프로퍼티 이름을 사용하면 undefined가 할당된다. 기본값 지정 가능!
...변수이름 >> 나머지 프로퍼티를 객체로 할당받음

*변수이름과 프로퍼티이름을 다르게하기
  - const { 프로퍼티네임 : 원하는변수명  ..... } = 객체;
*프로퍼티이름이 변수이름으로 활용할 수 없는 경우는 아래와 같이 변수명을 정해줘야한다!
  - const { '변수-이름' : 변수명 }  
* 프로퍼티네임은 [대괄호표기법]도 사용 가능하다.


7. 에러와 에러 객체

에러가 발생하면 에러객체가 생성된다.
에러 객체의 이름을 담고 있는 name
구체적인 에러 내용을 담고 있는 message라는 프로퍼티가 존재.

8. 의도적으로 에러 만들기
const error = new TypeError('타입 에러가 발생했습니다.')
error.name >>> TypeError
error.message >>> '타입 에러가 발생했습니다.'

9. 에러 발생 시키기
throw error;

10. try catch문
try{

} catch (error) {

}
try 에서 error가 발생했을때 catch 안의 코드가 실행된다.
* error 라는 파라미터? >>> error 객체
* 실행 가능한 코드에서 발생한 '예외'만 try catch가 가능하다
** 코드가 실행조차 되지않는 SyntaxError는 사용할 수 없다!


10-1. finally문

에러 발생 여부와 상관없이 항상 작동하는 코드
finally문의 예외처리를 하고 싶다면 try catch문을 중첩해서 사용해야한다.