"자바스크립트가 너무 어려워요"라고요? ES6를 알면 훨씬 쉬워집니다.
🚀 자바스크립트의 '스마트폰 혁명', ES6
웹 개발 공부를 시작하셨거나 관심이 있는 분들이라면, 인터넷 강의나 책에서
'ES6'라는 단어를 한 번쯤 보셨을 겁니다.
"그냥 자바스크립트면 되지, ES6는 또 뭐야?"라며 머리가 아프셨나요?
쉽게 비유하자면, 기존 자바스크립트(ES5)가 '폴더폰'이라면
ES6는 기능이 대폭 업그레이드된 '최신 스마트폰'입니다.
💡 ES6가 뭔가요?
ECMAScript 2015의 줄임말입니다.
2015년에 자바스크립트 문법이 대대적으로 업데이트되면서, 코드를 더
짧고(Simpler), 더 안전하고(Safer), 더 읽기 쉽게(Readable) 작성할 수 있게
되었습니다.
지금 현업에서 사용하는 모던 웹 개발의 표준이기도
합니다.
복잡한 이론은 빼고, 당장 써먹을 수 있고 코딩을 훨씬 편하게 만들어주는 핵심
문법 5가지를 엄선했습니다.
이것만 알아도 여러분의 코드가 훨씬 세련되어질 것입니다.
1️⃣ 변수의 세대교체: let과 const
과거에는 var라는 키워드로 모든 변수를 만들었습니다.
하지만 var는 같은 이름으로 또 변수를 만들어도 에러를 내지
않는 등, 실수를 유발하기 쉬웠습니다.
ES6에서는 이를 보완하기 위해 let과
const가 등장했습니다.
📦 let (변하는 값)
내용물을 바꿀 수 있는 상자입니다.
게임 점수, 사용자 이름처럼 값이 변해야 하는 경우에
사용합니다.
let score = 10;
score = 20; (가능⭕)
🔒 const (변하지 않는 값)
한 번 넣으면 잠기는 금고입니다.
사이트 주소, 고유 ID처럼 변하면 안 되는 값에
사용합니다.
const pi = 3.14;
pi = 5; (에러발생❌)
실천 팁: 무조건 const를 기본으로 쓰고, 값이
바뀌어야 할 때만 let으로 바꾸세요.
2️⃣ 타이핑을 줄여주는: 화살표 함수 (Arrow Function)
함수를 만들 때마다 function이라고 길게 쓰는 게 귀찮지
않으셨나요?
화살표 함수 =>를 사용하면 코드가 획기적으로 짧아집니다.
function hello(name) {
return "안녕하세요 " + name;
}
// 화살표 함수 (ES6)
const hello = (name) => "안녕하세요 " + name;
단순히 글자 수만 줄어드는 게 아니라, this라는 복잡한 개념을
다룰 때도 훨씬 직관적으로 동작합니다.
최신 리액트(React)나 뷰(Vue) 같은 프레임워크에서는 거의 필수적으로
사용됩니다.
3️⃣ 문자열의 혁명: 템플릿 리터럴 (Template Literals)
자바스크립트에서 문자와 변수를 합칠 때 + 기호를 덕지덕지
붙이느라 고생한 경험, 다들 있으시죠?
이제는 백틱(`) 기호만 있으면 아주 깔끔하게 해결됩니다.
| 불편했던 과거 (ES5) | 편안한 현재 (ES6) |
|---|---|
|
"제 이름은 " + name + "이고, " + age + "살 입니다." |
`제 이름은 ${name}이고, ${age}살 입니다.` |
${ } 안에 변수를 넣기만 하면 끝입니다.
엔터키를 쳐서 줄바꿈을 해도 그대로 인식되기 때문에 HTML 코드를 짤 때도
매우 유용합니다.
4️⃣ & 5️⃣ 데이터를 다루는 마법: 구조 분해 & 스프레드
4. 구조 분해 할당 (Destructuring)
객체나 배열 안에 있는 값을 꺼낼 때, 일일이 변수에 담는 작업을 한 번에
처리해 줍니다.
마치 택배 상자를 열어서 내용물을 착착 정리하는 것과
같습니다.
// 옛날 방식
var name = user.name;
var age = user.age;
// ES6 방식 (한 줄로 끝!)
const { name, age } = user;
5. 스프레드 연산자 (Spread Operator)
점 세 개(...)를 찍으면 배열이나 객체의 껍데기를 벗겨서 내용을
흩뿌려줍니다.
기존 데이터를 복사하거나 합칠 때 혁명적으로 편리합니다.
- 배열 합치기:
const newArr = [...oldArr, 4, 5]; - 객체 복사하기:
const newObj = { ...oldObj };
🎓 요약: 이제 코드가 달라 보일 거예요
처음에는 낯설어 보일 수 있지만, 한 번 손에 익으면 다시는 과거로 돌아가고
싶지 않을 만큼 편리한 기능들입니다.
오늘 소개한 5가지만 코드에 적용해도 여러분은 이미
모던 자바스크립트 개발자입니다.
📝 ES6 핵심 요약 노트
-
변수는 const를 기본으로, 바뀔 때만
let을 쓴다.
- 함수는 화살표(=>)로 간결하게 만든다.
-
문자열 합칠 땐
+대신 백틱(`)을 쓴다.
-
객체 값은 구조 분해 할당으로 한 번에 꺼낸다.
-
배열 복사는 점 3개 ...스프레드로 해결한다.
지금 바로 여러분이 연습하던 코드 파일 하나를 열어서, var를
let으로 바꾸는 것부터 시작해 보세요.
작은 변화가 개발 실력의 큰 차이를 만듭니다.
댓글 쓰기