자바스크립트 필수 문법 정리

Junhu·2021년 4월 12일

JavaScript

자바스크립트

목록 보기

1/1

템플릿 리터럴
템플릿 리터럴이란 자바스크립트에서 문자열을 입력하는 방식입니다. 기존에는 var str = 'Hello ES6'와 같은 방식으로 사용하였으나 ES6에서는 백틱(back-tick)이라는 기호(`)를 사용하여 정의합니다.
```
const str = \`Hello ES6\`;
```
위와 같이 백틱을 이용하게 되면 여러 줄에 걸쳐 문자열을 정의할 수도 있고, 자바스크립트의 변수를 문자열 안에 바로 연결할 수 있는 이점이 생깁니다.
ES6에서는 템플릿 리터럴을 이용하면 아래와 같이 간편하게 문자열과 변수를 함께 사용할 수 있습니다.
```
var language = 'Javascript';
var expression = `I love ${language}!`;
console.log(expression); // I love Javascript!
```
${}를 이용하면 위와 같이 변수의 값을 대입할 수 있을 뿐만 아니라 간단한 연산도 할 수 있습니다.
```
  var language = 'Javascript';
  var expression = `I love ${language.split('').reverse().join('')}!`;
  console.log(expression); // I love tpircsavaJ!
```
위 코드는 language의 문자열 순서를 역으로 바꾸는 코드입니다.

object[key]와 object.key의 차이
제일 큰 차이는 property를 변수로 접근 가능하느냐
[] 표현은 변수로 접근 가능하지만 . 표현은 바로 객체의 속성에 접근합니다. 아래를 보면 이해가 갈겁니다.
```
var a = {
 b : 1,
 c : 2
}
var b = ‘c’
console.log(a[b] + ‘ vs ‘ + a.b) // 2 vs 1
```
console.log 에서 a[b]와 a.b로 접근 했습니다. 헌데 b는 변수로 c라는 값을 가지고 있습니다. a[b]에서는 b가 변수가 되어 실제로 객체 a의 속성 c의 값인 2를 출력하는 반면, a.b에서는 b가 변수가 아닌 실제 속성 b에 접근하여 1을 출력하게 됩니다.
자 이로 인해, 제가 맨 위에서 언급했던 loop에서 object.key 값이 undefined가 된 이유를 알 수 있습니다. JS에서 개발을 하다보면 객체의 loop를 돌아 각 property에 접근하는 경우가 있습니다.
```
  var a = {
    b  : 1,
    c  : 2
  }
  for (key in a) {
   console.log(a.key) // undefined, undefined
   console.log(a[key])// 1,2
  }
```
for문과 같이 객체에 속성 개수만큼 loop를 돌 떄 변수를 사용하는데 a[key]를 사용하면 key는 실제 속성값으로 변경되지만, a.key는 객체 a의 속성 key라는 문자열을 찾기에 undefined가 됩니다.

전개 구문(spread syntax)
전개 구문(Spread Syntax)는 ECMAScript6(2015)에서 새로 추가된 문법으로 간단하게 이 문법은 문법 이름 그대로 객체 혹은 배열들을 펼칠 수 있게 해 준다.
```
    문법
    // 펼칠 대상이 객체인 경우
    {...obj}

    // 펼칠 대상이 배열인 경우
    [...arr]
    // 혹은
    {...arr}
```

전개 구문의 문법 자체는 정말 간단하다. 그저 배열이나 객체 앞에 점 세 개를 붙여주면 된다.
단, 위 코드에서 확인할 수 있는 것처럼 펼쳐진 객체나 배열을 담을 바구니가 필요하다.

객체는 객체로, 배열은 객체나 배열로 담아낼 수 있다.

예시로 바로 살펴보자.

[ 1. 펼칠 대상이 객체인 경우 ]

const myObject1 = {
    laptop: 'MacBook Pro',
    tablet: 'iPad Pro 11'
}

const myObject2 = {...myObject1};

console.log(myObject1); // {laptop: "MacBook Pro", tablet: "iPad Pro 11"}
console.log(myObject2); // {laptop: "MacBook Pro", tablet: "iPad Pro 11"}

console.log(myObject1 === myObject2); // false

위 코드 중 6번째 줄, myObject2에 할당하는 값을 보면 전개 구문을 활용하고 있다.

앞에 점 3개를 붙여서 myObject1을 펼친 것이다.

그러면 당연히 myObject2는 myObject1과 똑같은 모양의 프로퍼티를 갖게 되지만, 마지막 줄에서 보는 것과 같이 두 객체를 비교할 경우 false가 출력되면서 서로 다른 주소 값을 가진 독립적인 객체임을 확인할 수 있다.

  const myObject1 = {
      laptop: 'MacBook Pro',
      tablet: 'iPad Pro 11'
  }

  const myObject2 = {
      ...myObject1,
      phone: 'Galaxy Note 10'
  };
  console.log(myObject1); // {laptop: "MacBook Pro", tablet: "iPad Pro 11"}
console.log(myObject2); // {laptop: "MacBook Pro", tablet: "iPad Pro 11", phone: "Galaxy Note 10"}

전개 구문을 활용하면 이렇게 다른 객체의 프로퍼티를 복사해오면서 추가로 프로퍼티를 작성할 수도 있다.

펼칠 대상이 배열인 경우

const myArray1 = ['Canna', 'Cuzz', 'Faker', 'Teddy', 'Effort'];

const myArray2 = [...myArray1];

console.log(myArray1); // ["Canna", "Cuzz", "Faker", "Teddy", "Effort"]
console.log(myArray2); // ["Canna", "Cuzz", "Faker", "Teddy", "Effort"]
console.log(myArray1 === myArray2); // false

배열도 동일하게 전개구문을 활용해서 배열을 펼쳐 새로운 배열을 만들 수 있고, 두 배열을 비교하면 false가 출력되면서 서로 다른 독립적인 배열이 되는 모습도 확인할 수가 있다.

const myArray = ['Canna', 'Cuzz', 'Faker', 'Teddy', 'Effort'];

const myObject = {...myArray};

console.log(myArray); // ["Canna", "Cuzz", "Faker", "Teddy", "Effort"]
console.log(myObject); // {0: "Canna", 1: "Cuzz", 2: "Faker", 3: "Teddy", 4: "Effort"}

만약 펼친 배열을 중괄호로 감싸서 객체로 만든다면, 각 요소는 프로퍼티 값이 되고, 배열의 index가 프로퍼티 네임이 된다.

나머지 매개변수로의 활용
전개 구문은 함수의 나머지 매개변수로도 활용할 수 있다.

매개변수에 전개 구문을 활용하면, 함수를 호출할 때 넘쳐나는(?) 인자들을 하나의 배열로 모아주는 매개변수로 활용할 수 있다.

function myFunction(name, ...members) {
    return {name: name, members: members}
}

const myTeam1 = myFunction('T1', 'Canna', 'Cuzz', 'Faker', 'Teddy', 'Effort');
const myTeam2 = myFunction('Damwon', 'Nuguri', 'Canyon', 'ShowMaker', 'Ghost', 'BeryL');

console.log(myTeam1); // {name: "T1", members: Array(5)}
console.log(myTeam2); // {name: "Damwon", members: Array(5)}

위 코드에서도 알 수 있듯, 첫 번째 인자는 자연스럽게 name 파라미터에 전달이 되고, 나머지 함수를 호출할 때 전달한 인자들은 members라는 하나의 배열로 전달되어 함수 내에서 활용될 수 있는 모습을 확인할 수가 있다.

Junhu

개발자

자바스크립트 필수 문법 정리

자바스크립트

0개의 댓글