자바스크립트 공부1 - ES6 문법 정리

const, let

Javascript 변수 선언 방식에는 let과 const가 있습니다.

let으로 정의된 변수는 나중에 다시 다른 값을 할당할 수 있습니다.

let name = "Jane";
console.log(name); // Jane

name = "Lily";
console.log(name); // Lily

 

const로 정의된 변수는 한번 할당한 값을 변경할 수 없습니다.

나중에 다시 할당할 필요가 없는 변수에 사용합니다.

const language = "Javascript";
console.log(language); // Javascript

language = "Python" // ❌ Type error: this will break your script

---

화살표 함수 ()=>{}

Javascript에서 함수를 작성하는 방법은 여러가지가 있습니다.

기존 방법

function sum(a, b) {
    return a + b;
}

const sum = function(a, b) {
    return a + b;
}

화살표 함수 사용

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

const double = (value) => {
    return value * 2;
}

console.log(double(2)); // 4

 

화살표 함수 이점

1. 글로 쓰는 것 보다 짧음

2. 암묵적 반환을 통해 이점을 얻을 수 있음

 

 

반복함수 forEach나 필터함수 filter를 쓸 때 유용합니다.

 

반복함수 forEach
기존 방법

const grades = [12, 13, 15];

grades.forEach(function(grade) {
    console.log(grade);
});

// 12, 13, 15

 

반복함수 forEach 
화살표 함수 사용

 

매개 변수가 하나일 때는 괄호가 없어도 됩니다.

grades.forEach(grade => {
    console.log(grade);
});

 

매개 변수가 여러개 일때는 괄호로 묶어야 합니다.

grades.forEach((grade) => {
    console.log(grade);
});

 

필터함수 filter
기존 방법

const numbers = [4, 5, 6, 12, 15];

const numbersAboveSix = numbers.filter(function(number) {
    return number > 6;
});
console.log(numbersAboveSix); // [12, 15]

필터함수 filter
화살표 함수 사용

const numbersAboveSix = numbers.filter(number => {
    return number > 6;
});

console.log(numbersAboveSix); // [12, 15]

---

템플릿 리터럴 `Hello ${name}`

Javacript에서 문자열을 입력하는 방식입니다.

'' 작은따옴표나 "" 큰 따옴표 문자열과 달리 ``백틱(Backtick)을 사용하면 여러줄에 걸쳐 사용 될 수도 있고 +를 이용하지 않고

변수를 중간에 넣을 수 있습니다.

let text = `안녕하세요.
웹퍼블리셔입니다.
반갑습니다.`

let language = "English";
`I am learning ${language}`; // I am learning English;

---

디스트럭처링(Destructuring)

const { name } = props

 

배열이나 객체의 구조를 분해하여 여러 변수에 쉽게 할당할 수 있게 해주는 기능입니다.

코드의 가독성을 높이며, 특히 함수에서 반환된 복잡한 데이터 구조를 간결하게 처리하는 데 유용합니다.

배열 디스트럭처링

const animals = ['dog', 'cat', 'mouse'];

const [first, second, third] = animals;

console.log(first);  // 'dog'
console.log(second); // 'cat'
console.log(third);  // 'mouse'

• 값 건너뛰기

const [first, , third] = animals;
console.log(first);  // 'dog'
console.log(third);  // 'mouse'

• 기본값 지정

const [first, second, third = 'defaultAnimal'] = ['dog', 'cat'];
console.log(third);  // 'defaultAnimal'

객체 디스트럭처링

객체의 속성을 변수에 할당할 수 있습니다. 객체의 속성 이름과 변수 이름이 같아야 합니다.

const user = { name: 'Jane', age: 15 };

const { name, age } = user;

console.log(name);  // 'Jane'
console.log(age);   // 15

• 별칭지정

const { name: userName, age: userAge } = user;
console.log(userName);  // 'Jane'
console.log(userAge);   // 15

• 중첩 객체

const person = { name: 'Jane', address: { city: 'Seoul', country: 'Korea' } };
const { address: { city } } = person;
console.log(city);  // 'Seoul'

함수 매개변수에서 사용

객체를 인자로 받을 때 유용합니다.

function userInfo({ name, age }) {
  console.log(`Name: ${name}, Age: ${age}`);
}

const person = { name: 'Jane', age: 15 };
userInfo(person); // Name: Jane, Age: 15

배열 교환도 가능

let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2, 1

---

스프레드 연산자(Spread operator)

...arr , ...obj

 

기존에 변수에 할당되어 있는 배열이나 객체를 새로운 변수에 할당하여 복제하거나 합치는 작업을 할 때 사용합니다.

병합
기존 방법

const numberGroup1 = ['1', '2'];
const numberGroup2 = ['3', '4'];

const numberGroupAll = numberGroup1.concat(numberGroup2);

console.log(numberGroupAll); // ['1', '2', '3', '4']

스프레드 연산자 사용

const numberGroup1 = ['1', '2'];
const numberGroup2 = ['3', '4'];

const numberGroupAll = [...numberGroup1, ...numberGroup2];

console.log(numberGroupAll); // ['1', '2', '3', '4']

 

얕은 복사를 하기 때문에 참조형 데이터는(객체, 배열) 메모리 주소만 복사됩니다.

원본도 같이 변경이 됩니다.

const original = [{ name: 'Lily' }];
const copy = [...original];
copy[0].name = 'Jane';
console.log(original[0].name); // 'Jane' → 원본도 변경됨

 

Vuex 사례

mapGetters 사용 예

import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['doneTodosCount', 'activeItems'])
  }
}

직접 호출

export default {
  computed: {
    doneTodosCount() {
      return this.$store.getters.doneTodosCount;
    },
    activeItems() {
      return this.$store.getters.activeItems;
    }
  }
}