[JS중급] 문법과 표현

---

문법과 표현

• 문장(statements)과 표현식(expressions)
  
  • 문장 : 어떤 동작이 일어나도록 작성된 최소한의 코드 덩어리
  • 표현식 : 결과적으로 하나의 값이 되는 모든 코드
• 조건을 다루는 표현식
  • 삼항 연산자 : if문보다 간단하지만, 조건에 따라 변수를 선언하거나 반복문 실행은 X(모든 if문 대체 불가)

[조건] ? [truthy할 때 표현식] : [falsy할 때 표현식]

score > CUT_OFF? '합격!' : '불합격!';

• Spread 구문
  
  • rest 파라미터와 차이점 : rest는 여러 개의 파라미터를 하나로 묶는 방식이고, spread는 하나로 묶인 값을 각각의 개별값들로 펼치는 방식
    • 주의사항 : 새로운 배열을 만들거나 함수의 아규먼트로 사용이 가능하지만, 객체로는 새로운 배열을 만들거나 함수의 아규먼트로 사용할 수 없음... 반드시 객체를 표현하는 중괄호 안에서 활용해야 함

const numbers = [1, 2, 3];
// 일반 출력
console.log(numbers); // (3) [1, 2, 3]
// spread 출력
console.log(...numbers); // 1 2 3

// 배열 복사
const web = ['HTML', 'CSS'];
const interact = web.slice();
const interact2 = [...web]; // slice() 메서드와 같은 결과 반환
interact.push('JS');
console.log(web); // (2) ['HTML', 'CSS']
console.log(interact); // (3) ['HTML', 'CSS', 'JS']
console.log(interact2); // (3) ['HTML', 'CSS', 'JS']

// 배열 합치기
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2]; // spread 사용
const arr 4 arr1.concat(arr2); // concat 사용
console.log(arr3); // (6) [1, 2, 3, 4, 5, 6]
console.log(arr4); // (6) [1, 2, 3, 4, 5, 6]

// 배열을 객체로 만들기
const members = ['짱구', '맹구', '유리'];
const new = {...members};
console.log(new); // {0: '짱구', 1: '맹구', 2: '유리'}

• 모던한 프로퍼티 표기법
  
  • 객체 뿐만 아니라 함수에서도 변수(함수)이름과 프로퍼티 이름이 같다면, 한쪽 생략 가능

const user = {
	first: 'durian',
    last: 'yam',
    getFullName: function() {
    	return `${this.first} ${this.last}`;
    },
};
// : function() 생략 가능
const user = {
	first: 'durian',
    last: 'yam',
    getFullName {
    	return `${this.first} ${this.last}`;
    },
};

// 프로퍼티 이름을 표현식으로 나타내기(계산된 속성명, conputed property name)
const user = {
	[표현식] : 값,
};

const user = {
	['yam'+'durian']: 'value',
};
console.log(user); // {yamdurian: "value"}

• 옵셔널 체이닝(optional chaining) : 안전하게 프로퍼티에 접근하는 방법
  
  • 중첩 객체를 다룰 때 주의사항 : 우리가 예상한 프로퍼티를 가지고 있지 않을 수 있음... 따라서 접근하기 전에 검증하고 접근해야 함!

// ?. : 옵셔널 체이닝 연산자
// 왼쪽 프로퍼티 값이 undefined 또는 null이 아니라면
// 그 다음 프로퍼티 값을 리턴하고, 그렇지 않으면 undefined 리턴
function printCatName(user) {
	console.log(user.cat?.name);
}

• 구조분해(Destructuring) : 배열이나 객체를 분해하는 것(적용되는 방법이 다름

// 배열
const rank = ['짱구', '맹구', '유리', '철수'];

const mac = rank[0]; // 짱구
const ipad = rank[1]; // 맹구
const airpods = rank[2]; // 유리
const coupon = rank[3]; // 철수
// 이랬던 코드를
// rank 배열 자체를 할당해버림.. 배열의 요소들이 할당됨
// 단, 할당 값이 배열 형식이 아니거나 아무 것도 없으면 오류 발생
const [mac, ipad, airpods, coupon] = rank;

// REST 파라미터 응용(단, 마지막 변수에만 활용 가능)
const rank = ['짱구', '맹구', '유리', '철수', '맹구'];
const [mac, ipad, airpods, ...coupon] = rank;
>> 짱구 맹구 유리 (2) ["철수", "맹구"]

const rank = ['짱구', '맹구', '유리'];
const [mac, ipad, airpods, coupon] = rank;
>> 짱구 맹구 유리 undefined
const [mac, ipad, airpods, coupon='없음'] = rank;
>> 짱구 맹구 유리 없음

// 응용(배열 교환) -> 새로운 변수 낭비 없이 교환 가능
[mac, ipad] = [ipad, mac];

// 객체
const macbook = {
	titl: '맥북 프로 15형',
    price: 500000,
    memory: '16GB',
    storage: '1TB',
    display: '16형'
};
// 이렇게 변환과정 없이 바로 사용하고 싶을 때
const title = macbook.title;
const price = macbook.price;

// 이 방법으로
const {title, price, name = 'hi', ...rest} = macbook;

console.log(title); // 맥북 프로 15형
console.log(price); // 500000
console.log(color); // undefined
console.log(name); // hi
console.log(rest); // {memory: '16GB', storage: '1TB', display: '16형'}

// 응용 - 변수 이름으로 사용할 수 없는 프로퍼티일 때 사용
const {title: product, price} = macbook;
console.log(title); // 에러 발생
console.log(product); // 맥북 프로 15형
console.log(price); // 500000

• 에러와 에러 객체
  • 에러 객체 안에는 name과 message 프로퍼티 존재
    • ReferenceError : 존재하지 않는 변수나 호출
    • TypeError : 잘못된 방식으로 자료형을 다룰 때
    • SyntaxError : 문법에 맞지 않는 코드 작성(코드 실행 전에 에러 발생)
    • 그 외 에러 보러가기
  • 의도적으로 에러 만들기 : 에러를 발생 시킨 것은 X
    • 직접 발생 시키기 : throw 키워드 사용

// new 키워드를 붙이고, 에러 객체 이름을 함수처럼 호출해서
// 아규먼트로 원하는 메시지 전달하면 됨
const error = new TypeError('타입에러가 발생했습니다.');

console.log(error.name); // name에는 TypeError
console.log(error.message); // message에는 ['타입에러가 발생했습니다.']가 저장

// 에러 직접 발생 시키기 + 그 뒤 코드는 실행 X
throw error; // TypeError: 타입에러가 발생했습니다.

• try catch문 : 실행이 가능한 코드 내에서의 에러를 다룸(=> 예외처리, Exception Handling)
  • try문에서 선언된 변수는 catch문, 밖에서 사용 불가

try {
	// 코드
} catch (error) {
	// 에러가 발생했을 때 동작할 코드
}

// 예시
try {
	console.log('에러 전');
    const code = '메롱';
    console.log(code);
    code = '멧롱'; // 여기서 에러 발생... 이 다음 코드는 실행않고 catch문으로
    const love = '하트';
    console.log(love);
} catch (error) { // error 변수는 이름 바꿔도 됨
	console.log('에러 후');
    console.error(error); // 실제 에러처럼 출력
}
>> 에러 전
>> 메롱
>> 에러 후

 

// finally문 - try문에서 에러 발생시 catch문 코드가 실행되고,
// 실행된 이후에 다음에 실행할 코드를 finally문에 작성
try {
	// 실행할 코드
} catch (err) {
	// 에러 발생시 실행 코드
} finally {
	// 항상 실행할 코드
}

// 예외처리
try {
  try {
    // 실행할 코드
  } catch (err) {
    // 에러가 발생했을 때 실행할 코드
  } finally {
    // 항상 실행할 코드
  }
} catch (err) {
  // finally문에서 에러가 발생했을 때 실행할 코드
}