코드스테이츠 프론트엔드 부트캠프 14일차

2023-04-28(금)

코드스테이츠 부트캠프 14일차

 

 

Section 1 Unit 9 - [JavaScript] 핵심 개념과 주요 문법

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

Chapter. ES6 주요 문법

JavaScript의 표준인 ECMAScript(이하 ES)입니다.

2015년에 출시된 ES6에서 가독성과 유지보수성을 획기적으로 향상할 수 있는 문법이 많이 추가되었습니다.

 

학습한 let 키워드와 const 키워드, 템플릿 리터럴 등이 모두 ES6부터 적용된 문법입니다. 이번 챕터에서는 ES6에서 새롭게 적용된 문법 중 spread/rest문법, 구조 분해 할당(destructing), 화살표 함수를 학습합니다.

 

학습 목표

• spread/rest 문법을 사용할 수 있다.
• 구조 분해 할당을 사용할 수 있다.
• 화살표 함수로 함수를 정의할 수 있다.

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

Chapter4-1. sperd/rest 문법

spread 문법

주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용합니다.

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

sum(...numbers) // 질문: 어떤 값을 리턴하나요?

sum 함수를 진행하면서 1,2,3을 모두 더한 값 6을 출력합니다.

 

 

rest 문법

파라미터를 배열의 형태로 받아서 사용할 수 있습니다. 파라미터 개수가 가변적일 때 유용합니다.

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

sum(1,2,3) // 질문: 어떤 값을 리턴하나요?
sum(1,2,3,4) // 질문: 어떤 값을 리턴하나요?

첫번째 질문은 6을 리턴하고 두번째 질문은 10을 리턴합니다.

 

 

배열에서 사용하기

spread 문법은 배열에서 강력한 힘을 발휘합니다.

 

1.배열 합치기

let parts = ['shoulders', 'knees'];
let lyrics = ['head', ...parts, 'and', 'toes'];

// 질문: lyrics의 값은 무엇인가요

(5) ['head', 'shoulders', 'knees', 'and', 'toes']

 

let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2];  // 참고: spread 문법은 기존 배열을 변경하지 않으므로(immutable), arr1의 값을 바꾸려면 새롭게 할당해야 합니다.

// 질문: arr1의 값은 무엇인가요?

0,1,2,3,4,5

 

 

2.배열 복사

let arr = [1, 2, 3];
let arr2 = [...arr]; // arr.slice() 와 유사
arr2.push(4);  // 참고: spread 문법은 기존 배열을 변경하지 않으므로(immutable), arr2를 수정한다고, arr이 바뀌지 않습니다.

// 질문: arr와 arr2의 값은 각각 무엇인가요?

1,2,3,4

 

 

객체에서 사용하기

let obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };

let clonedObj = { ...obj1 };
let mergedObj = { ...obj1, ...obj2 };

// 질문: clonedObj와 mergedObj의 값은 각각 무엇인가요?

clonedObj = foo:'bar' , x: 42

mergedObj = foo : 'baz' , x: 42 , y : 13

 

 

함수에서 나머지 파라미터 받아오기

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

// 질문: 콘솔은 순서대로 어떻게 찍힐까요?

a one

 b two
manyMoreArgs (4) ['three', 'four', 'five', 'six']

 

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

Chapter 4-2 구조분해할당

분해 후 새 변수에 할당

 

배열

const [a, b, ...rest] = [10, 20, 30, 40, 50];

// 질문: a, b, rest는 각각 어떤 값인가요?

a = 10 

b = 20

rest = 30,40,50

 

객체

const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
// 질문: a, b, rest는 각각 어떤 값인가요?

a = 10

b = 20

rest = { c: 30 , d : 40}

• 객체에서 구조 분해 할당을 사용하는 경우, 선언(const, let, var)과 함께 사용하지 않으면 에러가 발생할 수 있습니다.
• 선언 없이 할당하는 경우, 이 콘텐츠의 하단에 있는 공식 문서 링크를 통해 내용을 확인할 수 있습니다.

 

 

유용한 예제 : 함수에서 객체 분해

function whois({displayName: displayName, fullName: {firstName: name}}){
  console.log(displayName + " is " + name);
}

let user = {
  id: 42,
  displayName: "jdoe",
  fullName: {
      firstName: "John",
      lastName: "Doe"
  }
};

whois(user) // 질문: 콘솔에서 어떻게 출력될까요?

jdoe is John

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

Chapter4-3 화살표 함수

함수를 정의하는 방법에는 함수선언문과 함수표현식이 있습니다.

// 함수선언문
function sum (x, y) {
	return x + y;
}

// 함수표현식
const subtract = function (x, y) {
	return x - y;
}

ES6가 등장하면서 함수를 정의하는 방법이 하나 더 생겼습니다. 바로 화살표 함수(arrow function)입니다. 함수표현식으로 함수를 정의할 때 function 키워드 대신 화살표(=>)를 사용합니다.

// 화살표 함수
const multiply = (x, y) => {
	return x * y;
}

이처럼 화살표 함수를 사용하면 함수표현식으로 함수를 정의할 때보다 간략하게 함수를 정의할 수 있습니다. 또한 화살표 함수로 함수를 정의할 때 생략할 수 있는 몇 가지 규칙이 있습니다.

 

1. 매개변수가 한 개 일 때, 소괄호를 생략할 수 있다.

// 매개변수가 한 개일 때, 소괄호를 생략할 수 있습니다.
const square = x => { return x * x }

// 위 코드와 동일하게 동작합니다.
const square = ( x ) => { return x * x }

// 단, 매개변수가 없는 경우엔 소괄호를 생략할 수 없습니다.
const greeting = () => { return 'hello world' }

2. 함수 코드 블록 내부가 하나의 문으로 구성되어 있다면 중괄호를 생략할 수 있다. 

이때 코드 블록 내부의 문이 값으로 평가될 수 있으면 return 키워드를 생략할 수 있다.

const squre = x => x * x

// 위 코드와 동일하게 동작합니다.
const square = x => { return x * x }

// 위 코드와 동일하게 동작합니다.
const square = function (x) {
	return x * x
}