-
[패스트캠퍼스] 프론트엔드 강의 6주 차 후기코딩/JS 2023. 4. 21. 14:00
-
이번 한 주 역시, 비전공자인 나에게는 다소 어려운 내용이었기 때문에 자바스크립트 함수의 체계에 내 눈과 머리가 익숙해지는 것에 의의를 두고 들었다. 학습 목표의 기준을 낮추고 나니 한결 마음이 편해지면서 자바스크립트 함수의 전반적인 흐름이 보이기 시작했고, 함수의 구조에 서서히 익숙해지는 내 자신을 발견할 수 있었다. 뭐든 첫 술에는 배부를 수 없는 법이기에, 나만의 페이스로 정복해 볼 참이다.-
그중에서 기억에 남는 수업 내용은 전개 연산자 파트. 엄밀히 말하자면 전개 연사자 파트에서의 전개 연산자 축약형 코드이다. 자바스크립트 파트부터 강사님께서는 함수 관련해서 정식 코드를 먼저 보여 준 후에 축약형 코드는 알려주시는 방법으로 수업을 진행하셨다. 아직 함수의 정식 코드조차 익숙지 않은 나에게는 다소 버거운 수업방식이었지만, 그래도 반복해서 들을 수 있는 온라인 강의라는 장점 덕분에 js 수업 초반에는 엄청난 부담감을 갖진 않았는데... 전개 연산자 파트에서의 축약형 코드를 보고 다시금 충격을 받았다.-
저렇게까지 축약을 할 수 있는 건가? 싶을 정도로 짧아지는 코드를 보고 있자니... 어안이 벙벙 그 자체...
console.log 부분을 제외하고 본다면, 7열의 코드가 3열이 되고 최종적(?)으로는 1열로까지 축약이 가능하다는 것이다. 이건 정말이지 어서 빨리 익숙해지는 수밖에 없을 것 같다.// 전개 연산자 기본형 const fruits = ['Apple', 'Banana', 'Cherry', 'Orange'] function toObject(a, b, ...c) { return { a: a, b: b, c: c } } console.log(toobject(...fruits)) // 전개 연산자 축약형 1 // 객체 데이터 안의 속성의 이름과 그 안에서 사용하는 매개변수의 이름이 같을 때 아래와 같이 축약 가능하다. function toObject(a, b, ...c) { return { a, b, c } } console.log(toobject(...fruits)) // 전개 연산자 축약형 2 // 2-1 function 키워드를 사용하는 일반함수를 화살표 함수로 축약 가능 // 2-2 중괄호는 화살표 함수에서 함수의 범위를 나타내는 블럭의 의미로 해석이 되기 때문에 // 명확하게 객체 데이터를 화살표 함수에서 축약형으로 반환하고 싶다면, 소괄호를 열어서 그 안에서 객체데이터를 정의한다. const = toObject(a, b, ...c) => ({ a, b, c }) console.log(toobject(...fruits))
-
그래도 아직은 기본형을 철저히 이해하고 넘어가야 할 때이기에 다시 한번 더 전개 연산자의 개념도 정리해 본다.// ... -> 전개 연산자 (Spread) // 하나의 배열 데이터를 쉼표로 구분하는 각각의 아이템으로 전개해서 출력하게 된다 const fruits = ['Apple', 'Banana', 'Cherry', 'Orange'] console.log(fruits) // 배열 데이터로 출력 console.log(...fruits) // 문자 데이터로 출력, console.log('Apple', 'Banana', 'Cherry') 의 출력 내용과 동일 // 전개 연산자의 활용 // function toObject() {} -> 객체 데이터로 변환해주는 함수 function toObject(a, b, c) { return { a: a, b: b, c: c } } console.log(toObject(...fruits)) // console.log(toobject(fruits[0], fruits[1], fruits[2])) 의 출력 내용과 동일
// 매개 변수에 전개연산자 활용 //...c -> 나머지 매개변수 (rest parameter) const fruits = ['Apple', 'Banana', 'Cherry', 'Orange'] function toObject(a, b, ...c) { // ...c가 나머지의 모든 인수들들 배열의 형태로 다 받아내는 역할을 한다 return { a: a, b: b, c: c } } console.log(toObject(...fruits))
-
국비지원교육으로 수강비 없이 듣고 있는 프론트엔드 강의가 어느덧, 후반부로 들어섰다. 수업이 진행되면 진행될수록 반복학습이 필요한 부분들은 늘어났고, 당연한 거겠지만 아직 많이 부족하다는 것도 다시금 느끼게 됐다. 그렇게 때문에 프로젝트 제출까지 완료해서 평생이용권을 받고 싶다는 욕심까지 생기고 있다. ㅎ 기왕 이렇게 된 거 좀 더 분발해서 프로젝트 제출까지 마쳐보자!-
-
'코딩 > JS' 카테고리의 다른 글
[패스트캠퍼스] 프론트엔드 강의 8주 차 후기 (0) 2023.05.02 [패스트캠퍼스] 프론트엔드 강의 7주 차 후기 (0) 2023.04.28 [패스트캠퍼스] 프론트엔드 강의 5주 차 후기 (0) 2023.04.13 [패스트캠퍼스] 프론트엔드 강의 4주 차 후기 (0) 2023.04.06 [패스트캠퍼스] 프론트엔드 강의 3주 차 후기 (0) 2023.03.29