[ TIL ] Day 10 - 자바스크립트 기초 3 : spread, rest, 구조분해할당, 옵셔널체이닝, try-catch-finally

🗓️ 수업 일자 : 2025.10.01

✨ 오늘의 수업 평가 :   [ REVIEW ]  가볍게 산책하듯 배움 🏞️☁️

 

📝  오늘 배운 내용  
- 자바스크립트 spread, rest

- 자바스크립트 구조분해할당

- 자바스크립트 옵셔널체이닝
- 자바스크립트 try-catch-finally 문

 

자바스크립트 기초

 

---

1. 자바스크립트 spread, rest 

• spread
  • 정의 : 뿌려준다는 의미의 spread 단어 처럼, 배열이나 객체를 각각의 낱개로 만들어 사용함. 배열이나 객체의 값을 동일하게 복사하거나, 여러 배열&객체를 병합하거나, 배열&객체를 다른곳에 전달할 때 주로 사용. 
  • 사용법 : "..."을 붙이고 기존 배열/객체 이름을 사용

// 복사 예시
const arr1 = [1,2,3];
const arr2 = [...arr1, 4, 5];

console.log(arr1); // 1,2,3 출력
console.log(arr2); // 1,2,3,4,5 출력 

arr2.shift(); // arr2의 맨 앞 값 삭제
console.log(arr1); // 1,2,3 출력
console.log(arr2); // 2,3,4,5 출력 
// arr2이 arr1 값을 복사하여 따로 저장해 쓰기 때문에
// arr2의 맨 앞 값을 삭제해도 arr1에 영향이 가지 않음 



// 병합 예시
const obj1 = {
    name : "kimday",
};
const obj2 = {
    nick : "365",
};

const obj3 = {...obj1, ...obj2};

console.log(obj3) ; 
// {name : "kimday", nick : "365",} 출력
// 객체 2개(obj1,obj2)가 합쳐져서 새로운 객체가 만들어짐



// 전달 예시
function introduce(name, city) {
  console.log(`저는 ${name}, ${city}에 살아요`);
}

const info = ["kimday","korea"];

// spread로 배열을 전달
introduce(...info);

 

• rest 
  • 정의 : 정의되고 남은 배열이나 객체의 값을 한번에 모아서 배열로 저장
  • 사용법 : "..."을 붙이고 새로운 배열/객체 이름을 사용

const [first, ...namuge] = [10, 20, 30, 40];

console.log(first); // 10 출력
console.log(namuge);  // [20, 30, 40] 출력

// first 변수에 맨 앞의 값인 10이 들어가고
// 나머지 20,30,40은 namuge에 배열로 들어감

 

• 'spread'와 'rest'의 차이점 
  • 'spread'는 기존의 배열/객체를 그대로 가져가 "새로운 배열/객체"에 정의되어 사용한다
  • 'rest'는 사용하고 남은 배열/객체 값이 "새로운 배열"로 만들어 진다 

 

 

2. 자바스크립트 구조분해할당 

• 구조분해할당 
  • 정의 : 배열 / 객체의 값을 그대로 할당받아 새로운 변수처럼 사용하는 것
  • 사용법 : 배열은 순서대로 할당 받고, 객체는 키 이름을 사용하여 할당 받음

const arr = [10, 20, 30];

const [a, b, c] = arr;
// 각각 순서대로 a,b,c에 할당

console.log(a); // 10 출력
console.log(b); // 20 출력
console.log(c); // 30 출력

 

• 구조분해할당과 rest의 조합
  • 구조분해할당으로 필요한 값을 변수에 저장 한 뒤, 나머지 값을 버리는 대신 ...rest 하여 하나의 데이터로 저장해 관리한다

const rainbow = {
	red : 1,
    orange : 2,
    yellow : 3,
    green : 4,
    blue : 5,
    navy : 6,
    purple : 7
};

const {red, green, blue, ...others} = rainbow;

console.log(red); // 1 출력
console.log(green); // 4 출력
console.log(blue); // 5 출력
console.log(others); // {orange: 2, yellow: 3, navy: 6, purple: 7} 출력

 

• 객체 구조분해할당 시 다른 변수명을 사용하고 싶은 경우, { 기존값 : 신규변수명 } 으로 사용한다

const animal = {
    dog : "멍멍",
    cat : "야옹",
    tiger : "어흥",
};

const {dog:mongmong, cat:goyarmi, tiger} = animal;
// dog 값을 mongmong에 담고 
// cat 값을 goyarmi 담고 
// tiger는 그대로 사용

//console.log(dog); // error 출력
console.log(mongmong); // 멍멍 출력

//console.log(cat); // error 출력
console.log(goyarmi); // 야옹 출력

console.log(tiger); // 어흥 출력

 

 

3. 자바스크립트 옵셔널체이닝 

• 옵셔널 체이닝
  • 정의 : 객체(객체,배열,함수)의 속성값이 undefined인지 ?(물음표)로 손쉽게 확인하는 방식
  • 사용법 : 객체 = obj?.prop / 배열 = arr?.[i] / 함수 = func?.()

// 객체에서 사용하기 
const obj = {
    name: "kimday"
};

console.log(obj?.name);   // "kimday" 출력
console.log(obj?.age);    // undefined


// 배열에서 사용하기
const arr = [1,2,3,4,5];

console.log(arr?.[1]);    // 2 출력
console.log(arr?.[10]);   // undefined"

 

 

 

4. 자바스크립트  try-catch-finally 문  

• try - catch 문 
  
  • 정의 : 함수나 모듈 등을 동작 중 에러가 생기면 전체 파일이 멈추게 되는데, try{ }catch( ){ }문을 사용하면 에러가 발생해도 나머지 동작을 원활히 진행 함. 
  • 사용법 : try { ... 실행 할 내용... } catch(error) { ... 에러 발생 .... }

function arrShow(arr){
    try {
        arr.forEach((ele)=>{
            console.log(ele);
        });
    } catch(error) { 
        console.error(error);
        //거의 기본처럼 사용
    }
}

const arr1 = ['a','b','c'];
const str = 'abc';
const arr2 = [1,2,3];

arrShow(arr1); //정상 출력
arrShow(str); // 에러 발생하고 지나감
arrShow(arr2); // 정상 출력

try - catch 문 결과 확인하기!

 

 

• try - catch - finally 문 
  
  • 정의 : try - catch 문에서 발전 된 것으로, 동작과 에러 발생에 상관없이 해당하는 문장이 모두 종료 된 이후에 가장 마지막에 finally문이 실 되는 것
  • 사용법 : try { ... 실행 할 내용... } catch(error) { ... 에러 발생 .... } finally { ... 동작 / 에러에 상관 없이 실행 ... }

function arrShow(arr){
    try {
        arr.forEach((ele)=>{
            console.log(ele);
        });
    } catch(error) { 
        console.error(error);
        //거의 기본처럼 사용
    } finally{
    	console.log("----- 종료 -----")
    }
}

const arr1 = ['a','b','c'];
const str = 'abc';
const arr2 = [1,2,3];

arrShow(arr1); //정상 출력
arrShow(str); // 에러 발생하고 지나감
arrShow(arr2); // 정상 출력

 

try-catch문의 동작 성공과 에러에 상관 없이 finally문이 실행 됨

 

---

 

📃 내일은 뭘 배울까 🤔

- 자바스크립트 함수 심화

- 자바스크립트 배열, 객체 심화