[JS문법 종합반] 2주차_ES6문법 : ES6문법 소개

타임라인

• 특강 [HTML, CSS 기초]
• 강의 [JS문법 종합반] 2주차
• 특강 알고리즘

---

오늘의 학습내용 :  ES6문법 연습

ES6(ECMAScript 6)는 2015년도 이후 자바스크립트에 찾아온 문법적 변화였다. 과거보다 간결하고 효율적인 코드를 작성하기 위해 ES6 문법이 권장되며, 개중 let, const 변수가 추가된 점이 눈에 띈다. Arrow function도 추가되었다. ES6가 가장 최신 버전이기 때문에 중요하게 다루는 것일까? 딱히 그렇지는 않았다. 기존의 단점을 해결하기 위해 ES6 이후로도 문법은 거듭해서 개정되었다. 다만 ES6 이후 이전에 문제시되었던 부분들을 상당수 해결하면서 각종 기능이 확장되어 개발 방향성을 ES6와 맞춰나갔고, 그에 따라 개정된 문법에도 주목도가 모이게 되었다.

 

◆ let, const

변수 선언을 위해 존재하던 기존의 var를 대체해서 나온 키워드로. let은 재할당이 가능하고 재선언이 불가능하며, const는 재할당, 재선언 모두 불가능하다는 특징이 있다.

let value = "value1"
console.log(value) // let으로 변수 선언하기

const value = "value1"
console.log(value) // const로 변수 선언하기

 

◆ 화살표 함수(Arrow Function)

ES6에서 다양한 기능 개선과 함께 도입된 함수이다. 기존의 function이나 return 키워드로 함수를 만드는 방식보다 간결하고, 보기 쉽게 작성하는 용도로 만들어졌다. 화살표 함수가 자바스크립트에 들어오면서 함수형 프로그래밍 스타일이 강화되고 가독성 좋은 코드를 만들기에 좋은 환경이 마련되었다. 다만 화살표 함수에도 몇 가지 한계가 있는데, 대표적으로 this 메소드를 사용할 수 없다.

// 기존의 함수 작성 방법
function func() {
	return true
}

// Arrow Function 작성 방법
const func = () => true
const func = () => {
	return true
}

 

◆ 삼항 연산자(ternary operator)

삼항 연산자는 참과 거짓을 판단할 조건식을 지정하고, ? 다음에 참/거짓일 시 사용하는 값을 나열한다. 따라서 3개의 피연산자를 받아 작성되며, 간단한 if문을 가독성 좋게 작성하는 용도로 자주 사용된다.

condition ? true인 경우 : false인 경우

 

◆ 구조분해할당(Destructuring)

구조분해할당(de- + structuring) 구문은 문자 그대로 배열이나 객체의 속성을 분해하여 그 값을 각각의 변수에 할당하는 표현식이다. 때로 함수에 객체나 배열을 담아야 하는 경우에 사용하며, 특별히 할당할 값이 없을 때는 초기값(default value)을 설정해 놓을 수 있다.

// (1) 배열의 경우
let [value1, value2] = [1, "new"]; // value1, value2는 변수, 1, "new"는 배열
console.log("1", value1);
console.log("2", value2);

let arr = ["valueA", "valueB", "valueC", "valueD"];
let [a, b, c, d = 4] = arr; // default 값이 없을 때는 undefined가 출력된다.
console.log(a);
console.log(b);
console.log(c);
console.log(d);

// (2) 객체의 경우
let { name, age } = {
    name: "Bob",
    age: 30
};
console.log("name => " + name);  // 객체의 요소였던 name은 string속성이 되어 할당됨. Bob
console.log("age => " + age); // 객체의 요소였던 age는 number속성이 되어 할당됨. 30

 

◆ 단축 속성명(property shorthand)

const name = "Bob";
const age = "30";

const obj1 = { name: name, age: age }
const obj = { name, age }; // 배열처럼 보이지만 객체다. key와 value가 똑같으면 생략할 수 있다.

 

◆ 전개구문(Spread)

전개구문은 객체나 배열들을 펼칠 수 있게 하는 문법이다. (...)연산자를 배열 앞에 사용하여 개별 요소를 다른 배열 혹은 함수의 인자로 펼쳐 넘길 수 있다. 또한 객체에 전개구문을 사용할 시 객체의 속성을 넘기는 것도 가능하다.

let arr = [1, 2, 3];
console.log(arr);
console.log(...arr); // 배열 안에 있던 요소들을 풀어냄

// 전개 구문 사용례
let array = [1, 2, 3]
let newArray = [...array, 4]; // array 배열 안에 있던 요소를 풀어서 새로운 배열 안에 사용할 수 있다.
// [...array, 4] = [1, 2, 3, 4]

 

◆ 나머지 매개변수(rest parameter)

나머지 매개변수는 함수의 인수 전달 시 마지막으로 사용하며, 전달된 인수들의 목록을 배열로 합친다.

function example(a, b, c, ...args) {
    console.log(a, b, c,);
    console.log(args);      // 그냥 args를 사용하면 [4, 5, 6, 7]의 배열 형태
    console.log(...args);   // ...args를 사용하면 4 5 6 7 로 spread 된 형태
};

 

◆ Template literals

ES6에서 새로 도입한 문자열 표기법으로, ' ', " "와 같은 따옴표 대신 ` `(백틱, backtick)과 ${ }로 표현한다. 백틱은 일반적인 따옴표처럼 기능하면서도, 여러 줄로 이루어진 문자열(멀티 라인)과 문자 보간기능을 사용할 수 있게 한다.

console.log(`Hello World ${3 + 3}`);
console.log(`Hello World ${testValue}`);
console.log(
    `Hello
        World
            Nice to meet you`
); // 멀티라인을 지원하기 때문에 개발자로서 텍스트를 원하는 대로 꾸미기 편하다.

 

질문 & 더 알아보기

호이스팅이 뭐지?

JavaScript 호이스팅(Hoisting)은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 뜻한다. (출처: MDN Web Docs) 스크립트 내 변수의 선언 순서와는 관계없이 마치 끌어올려진 것과 같다는 표현인데, 자바스크립트 엔진이 먼저 전체 코드를 한 번 스캔하고 실행 컨텍스트에 미리 기록해 두면서 발생한다. let과 const는 var가 지닌 여러 문제점 - 재할당, 재선언이 가능하여 지나치게 유연한 변수 선언에서 비롯되는 여러 코드 실행 오류와 호이스팅 문제 - 를 일정 부분 보완하기 위해 ES6 문법부터 도입된 변수 선언 키워드이다.

 

오늘의 소감

자바스크립트 문법을 시작한 지 이제 겨우 사나흘밖에 지나지 않았는데 벌써 머리가 어지럽다. 먼저 공부해 본 팀원의 말로는 JS 전까지는 아주 쉽다고, 겁먹지 말고 도전하라고 했는데 말 그대로 JS문법에 진입하기 전까지만 웃으며 학습할 수 있는 것이었다. 강의가 끝날 때마다 programmers 코딩테스트를 통해 각종 자바스크립트 문제를 풀었는데, 분명 조금 전에 배운 구문과 연산자였는데도 막상 과제에 적용하려고 하면 생각한 대로 코딩할 수가 없어서 자신감이 떨어지고 있었다. 오후에 알고리즘 특강을 들으며 알고리즘 문제에 접근하는 방법과 풀이를 떠올리는 과정을 머릿속에서 어떻게 정리해 보면 좋을지, 수준에 맞는 문제를 어떻게 찾아서 풀 것인지 등 막 배우기 시작한 수강생을 위한 좋은 공부 습관을 상세하게 소개받을 수 있어 큰 도움이 되었다.