Javascript 문법 again 📑

비구조화 할당(구조분해) 문법

• 비구조화 할당 문법을 사용하면 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언해줄 수 있다.

const object = { a: 1, b: 2 };

const { a, b } = object;

console.log(a); // 1
console.log(b); // 2


const object = { a: 1, b: 2 };

function print({ a, b }) {
  console.log(a);
  console.log(b);
}

print(object);

const ironMan = {
  name: '토니 스타크',
  actor: '로버트 다우니 주니어',
  alias: '아이언맨'
};

const captainAmerica = {
  name: '스티븐 로저스',
  actor: '크리스 에반스',
  alias: '캡틴 아메리카'
};

function print(hero) {
  //객체에서 값들을 추출해서 새로운 상수로 선언해준다
  const { alias, name, actor } = hero;
  const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
  console.log(text);
}

print(ironMan);
print(captainAmerica);

• 배열에서도 사용이 가능한데, 배열 안에 있는 원소를 다른 이름으로 새로 선언해주고 싶을 때 사용하면 유용하다.

const array = [1, 2];
const [one, two] = array;

console.log(one);
console.log(two);

const array = [1];
const [one, two = 2] = array;

console.log(one);
console.log(two);

• 만약 객체의 깊숙한 곳에 들어있는 값을 꺼내고 싶다면 비구조화 할당 문법을 두번 사용할 수 있다.

const deepObject = {
  state: {
    information: {
      name: 'velopert',
      languages: ['korean', 'english', 'chinese']
    }
  },
  value: 5
};

const { name, languages } = deepObject.state.information;
const { value } = deepObject;

const extracted = {
  name,
  languages,
  value
};

console.log(extracted); // {name: "velopert", languages: Array[3], value: 5}

• 위의 extracted는 key의 이름으로 선언된 값이 존재한다면 바로 매칭시켜주는 것으로 다음과 같은 의미이다.

const extracted = {
  name: name,
  languages: languages,
  value: value
}

• 두번째 방법으로는 한번에 모두 추출할 수 있다.

const deepObject = {
  state: {
    information: {
      name: 'velopert',
      languages: ['korean', 'english', 'chinese']
    }
  },
  value: 5
};

const {
  state: {
    information: { name, languages }
  },
  value
} = deepObject;

const extracted = {
  name,
  languages,
  value
};

console.log(extracted);

spread와 rest

spread

• 이 문법을 사용하면 객체 혹은 배열을 펼칠 수 있으며 기존의 것을 건드리지 않고 새롱누 객체를 만들때 유용하게 쓰인다.

const slime = {
  name: '슬라임'
};

const cuteSlime = {
  ...slime,
  attribute: 'cute'
};

const purpleCuteSlime = {
  ...cuteSlime,
  color: 'purple'
};

const animals = ['개', '고양이', '참새'];
const anotherAnimals = [...animals, '비둘기'];
const numbers = [1, 2, 3, 4, 5];

const spreadNumbers = [...numbers, 1000, ...numbers];
console.log(spreadNumbers); // [1, 2, 3, 4, 5, 1000, 1, 2, 3, 4, 5]

Rest

• spread와 비슷하게 생겼지만 역확은 매우 다르며 객체, 배열, 그리고 함수의 파라미터에서 사용이 가능하다.

const purpleCuteSlime = {
  name: '슬라임',
  attribute: 'cute',
  color: 'purple'
};

//배열의 비구조화 할당을 통하여 원하는 값을 밖으로 꺼내고 나머지 값을 rest안에 넣는다.
//color를 제외하고 들어있다.
const { color, ...rest } = purpleCuteSlime;


const numbers = [0, 1, 2, 3, 4, 5, 6];

const [one, ...rest] = numbers;

• 객체와 배열에서 사용할때는 비구조화 할당 문법과 함께 사용되기도 한다.

function sum(...rest) {
  return rest.reduce((acc, current) => acc + current, 0);
}

const numbers = [1, 2, 3, 4, 5, 6];
const result = sum(...numbers);
console.log(result);

단축 평가 논리 계산법

const dog = {
  name: '멍멍이'
};

function getName(animal) {
  return animal && animal.name;
}

const name = getName(dog);
console.log(name); // 멍멍이

• A && B 연산자를 사용하게 될 때에는 A 가 Truthy 한 값이라면, B 가 결과값이 되고 A 가 Falsy 한 값이라면 결과는 A 가 된다.

const namelessDog = {
  name: ''
};

function getName(animal) {
  const name = animal && animal.name || '이름이 없는 동물입니다.'
}

const name = getName(namelessDog);
console.log(name); // 이름이 없는 동물입니다.

• A || B 는 만약 A 가 Truthy 할경우 결과는 A 가 되고 A 가 Falsy 하다면 결과는 B 가 된다.

삼항 연산자

• 삼항연산자의 사용법은 다음과 같다.

조건 ? true일때 : false일때

const array = [];
let text = array.length === 0 ? '배열이 비어있습니다' : '배열이 비어있지 않습니다.';

console.log(text);

Template Literals

• 템플릿 리터럴은 일반 문자열과 비슷해 보이지만, ‘ 또는 “ 같은 통상적인 따옴표 문자 대신 백틱(backtick) 문자 `를 사용한다.

• 일반적인 문자열에서 줄바꿈은 허용되지 않으며 공백(white-space)를 표현하기 위해서는 백슬래시()로 시작하는 이스케이프 시퀀스(Escape Sequence)를 사용하여야 한다. ES6 템플릿 리터럴은 일반적인 문자열과 달리 여러 줄에 걸쳐 문자열을 작성할 수 있으며 템플릿 리터럴 내의 모든 white-space는 있는 그대로 적용된다.

• 템플릿 리터럴은 + 연산자를 사용하지 않아도 간단한 방법으로 새로운 문자열을 삽입할 수 있으며, 문자열 인터폴레이션(String Interpolation)이라 한다.

• 문자열 인터폴레이션은 ${ … }으로 표현식을 감싸며 문자열 인터폴레이션 내의 표현식은 문자열로 강제 타입 변환된다.

Tagged Templates

• Tagged Template은 템플릿 리터럴로 감싸진 내용들을 인자로 하여 함수에 대입할 수 있게 해준다.

• Tagged Template은 템플릿 리터럴 앞에 함수 이름을 표기해주기만 하면 된다. expression interpolation을 기준으로 문자열들이 분할되어 배열 형태로 함수의 첫번째 parameter로 전달되고, 두번째 파라미터부터는 expression interpolation에 들어간 값이 전달된다.

const first = 'Ung-mo';
const last = 'Lee';

// ES5: 문자열 연결
console.log('My name is ' + first + ' ' + last + '.');
// "My name is Ung-mo Lee."

// ES6: String Interpolation
console.log(`My name is ${first} ${last}.`);
// "My name is Ung-mo Lee."

---

벨로퍼트와 함께하는 모던 자바스크립트
Temaplate Literals
템플릿 리터럴(Template Literal)과 스타일드 컴포넌트(styled-component)