(Daliy / TIL 03.12) Modern JavaScript

화살표함수

function 키워드 생략하고 '=>' 를 붙인다.

const add = (a,b) => {
  return a + b;

리턴을 생략할 수 있다.

const add = (a,b) => a + b;

소괄호를 붙일수도 있다.

const add = (a,b) => (a+b);

파라미터가 하나일 경우 소괄호를 생략 가능하다.

const tenAdd = a => a+10;

화살표 함수를 이용한 클로져 함수

const adder = x => {
  return y => {
    return x + y;
  }
}
const htmlMaker = tag => textContent => `<${tag}>${textContent}</${tag}>`

구조 분해 할당

배열을 분해

const array = ['code', 'states', 'im', 'course'];
const [first, second] = array;

first => 'code'
second => 'states'

rest / spread를 배열 분해에 응용

const array = ['code', 'states', 'im', 'course'];
const [start,...rest] = array;

start => 'code'
rest => ['states', 'im', 'course']
...rest => 'states', 'im', 'course'

const [first, ...middle, last] = array => X
rest문법 이후에 쉼표가 올수 없다.

객체를 분해한다.

const student = {name: '박해커', major: "컴퓨터"};
const { name } = student;

name => '박해커'

rest / spread를 객체 분해에 응용

const student = {name: '박해커', major: "컴퓨터"};
const { name, ...args} = student;

name => '박해커'
args => {major: 컴퓨터}

const student = { name: '최초보', major: '물리학과', lesson: '양자역학', grade: 'B+' }
    function getSummary({ name, lesson: course, grade }) {
      return `${name}님은 ${grade}의 성적으로 ${course}을 수강했습니다`
    }

=> 최초보님은 B+의 성적으로 양자역학을 수강했습니다

const user = {
      name: '김코딩',
      company: {
        name: 'Code States',
        department: 'Development',
        role: {
          name: 'Software Engineer'
        }
      },
      age: 35
    }

const changedUser = {
      ...uesr,
      name: '박해커'
      age: 26
      }

console.log(changedUser)
> {
      name: '박해커',
      company: {
        name: 'Code States',
        department: 'Development',
        role: {
          name: 'Software Engineer'
        }
      },
      age: 26
  }

const changedDepartment = {
      ...user,
      company: {
      ...user.company
      department: 'Marketing'
      }
}

console.log(changedDepartment)
> {
      name: '김코딩',
      company: {
        name: 'Code States',
        department: 'Marketing',
        role: {
          name: 'Software Engineer'
        }
      },
      age: 35
  }