📌 ES6
현재 가장 대중적으로 사용되고 있는 javascript 문법
- 변수 선언 :
let,const - 비동기 처리 :
Promise
ES6 문법을 사용하면 실제로 더 편하게 코딩을 할 수 있다. 대부분의 메이져 브라우저, Node.js 서버 개발 등 다양한 분야에서 ES6 문법을 채택하고 있다.
💡 하지만 그렇다고 ES6를 100% 다 지원하는 건 아니다. 브라우저마다 지원하는 정도가 다르고 옛날 브라우저는 ES6 지원도가 낮아서 ES6로 코드를 짰다가 동작이 안 될 수도 있다.
그래서 우리가 ES6 최신 문법으로 코드를 짜더라도 브라우저를 위해서 옛날 버전의 javascript로 변환시켜주는 작업이 필요하다. 이를 바로 Babel이라는 Transpiling(트랜스파일링) 도구을 사용한다.
최신 프론트엔드를 개발하시는 분들이라면 거의 모두 Babel을 사용하여 웹을 개발한다.📖 Template Literal
일반적으로 string 자료형을 조합할 때 + 연산자를 사용한다. 그러나 문자열을 더하는 과정이 많아지면 + 연산자가 많아지고 띄어쓰기 같은 작업을 하기가 번거롭다. 이때 Template Literal(템플릿 리터럴)을 사용하면 더 쉽게 만들 수 있고 가독성이 높아진다.
특히 프론트엔드 같이 데이터를 조합해서 DOM에 적용하는 경우가 많은 경우 유용하게 사용된다.
✔️ 기존
const hello ="안녕";
const introduce = "나는 그랩이야!"
const age = 5;
//기존 방식
const text = hello + "! " + introduce + " 그리고 "+ age +"살이야."➰ Template Literal 방식
벡틱 안에 변수를 넣을 때 ${}를 사용한다.
const newText = `${hello}! ${introudce} 그리고 ${age}살이야`📖 Desturcturing(구조 분해 할당)
객체와 배열에 들어있는 값을 가져올 때 Desturcturing 기능을 사용하면 손쉽게 값을 뽑아낼 수 있다.
✔️ 기존
const grab = {
name : '그랩',
age : 27
};
const people = ['민수','철수']
//기존
var name = grab.name;
var age = grab.age;
var minsoo = people[0];
var chulsoo = people[1];➰ Destructuring 방식
var {name, age} = grab;
console.log(name); //그랩이 출력된다.
const [minsoo, chulsoo] = people;📖 map, forEach
map과 forEach 메소드는 사실 ES5 에서 나온 문법이지만 중요하므로 같이 다루겠다.
map, forEach는 배열에서 기본으로 제공해주는 메소드로 배열을 가공할 때 많이 사용된다. 기본적으로 배열을 다룰 때 for 를 사용했다면 이제 map, forEach로 넘어갈 차례다.
✔️ 기존
var products = [{
name : '농구공',
price : 50000
},{
name : '축구공',
price : 50000
}]
for(var i=0; i < products.length;i++){
var name = products[i].name;
console.log('제품 이름 : ' + name);
}➰ Array Method 방식
이들의 콜백 함수에는 첫 번째 인자에는 배열에서 조회하는 값 , 두 번째 인자에는 순서(index)가 들어간다.
map, forEach 메소드는 모두 배열을 조회한다는 기능은 동일하다. 다만 forEach는 별다른 return이 없는 반면 map은 새로운 배열을 반환(return)한다.
//첫번째 파라미터에는 값, 두번째 파라미터에는 순서(index)가 들어간다.
products.forEach(function (product, index) {
console.log((index + 1) + '번째 호출');
console.log(product);
})
//동일하게 조회한다.
products.map(function(product, index){
console.log((index + 1) + '번째 호출');
console.log(product);
});
//productNames는 각 product의 name이 들어간 배열이다.
var productNames = products.map((product, index) => {
return product.name;
});
//React에서는 다음과 같은 방식으로 데이터가 담긴 배열을 화면에 표시한다.
var productElements = products.map((product,index) =>{
return (
<div>
<span>{product.name}</span>
...
</div>
)
})💡 이 외에도 배열 메소드는 filter, reduce 등의 배열 전용 메소드가 있다.
📖 Lambda Function(람다 함수)
function을 표현하는 새로운 방식인 Lambda 식은 () ⇒ {} 형식을 사용한다. 최근 javascript를 사용하는 코드에서는 function을 이용할 때 Lambda 식으로 정의한다. arrow function 이라고도 많이 부른다.
함수를 선언할 때 람다식을 자주 사용하는데 함수를 축약해서 표현하므로 코드가 더 깔끔하며 return 구문을 생략할 수도 있다는 게 좋다.
✔️ 기존
//함수 선언식
function getName(name){
return `${name} 입니다`
}
//함수 표현식
const getName = function(){
...
}➰ 람다 함수 방식
const getName = () => {
}
//람다식의 return 문을 생략할 수도 있다.
const getName = (name) => `${name} 입니다`💡 사실 Lambda 식과 기존 함수랑은 차이가 있다. 우리가 배우지 않았던 this라는 개념을 사용할 때 다르게 동작한다.
📖 conditional ternary operator(3항 연산자)
3항 연산자는 if 조건문을 단축 형태로 사용할 수 있다.
✔️ 기본
const language = 'javascript';
if(language === 'javascript'){
console.log('재밌다')
}else{
console.log('재미없다')
}➰ 3항 연산자 방식
condition ? exprIfTrue : exprIfFalse 구문으로 condition이 true라면 exprtIfTrue가 실행되고 아니라면 exprtIfFalse가 실행된다.
language === 'javascript' ? console.log('재밌다') : console.log('재미없다')
//아래와 같이 많이 활용된다.
const isJavascript = language === 'javascript'? true : false
//result에 true가 들어온다.📖 export, import
기존에 html에서는 <script> 태그를 활용해서 자바스크립트 파일(라이브러리)를 불러왔다. 그러나 ES6에서는 모듈을 불러오는 방식으로 import 를 사용한다.
✔️ 기존
//외부 라이브러리를 불러온다.
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
//hello.js를 불러온다.
<script src="./hello.js"></script>➰ import 방식
import axios from 'axios'; //다운받은 axios 라이브러리를 불러온다.
import App from './App.js' //hello.js 파일을 불러온다.
import Potato from "./main" //import를 할때 모듈명은 자유롭게 설정이 가능하다.반면 모듈을 내보내서 다른 곳에서 사용할 수 있게 만들 수도 있다. 이 때는 export를 사용한다. 기본적으로 import를 하기 위해선 아래와 같이 export가 되어있어야 한다.
//App.js 파일
function App(){
return <h1>hello</h1>
}
export default App; //App 함수를 외부에서 사용할 수 있도록 export 하는 것💻 여러 객체 export & import 하기
위 코드에서 export 옆에 붙은 default 는 한가지 객체만 import하겠다는 것을 의미한다. 하나의 파일에 여러개의 객체를 export할 수도 있다.
function funcA(){
//...
}
function funcB(){
//...
}
const varC = 'hello';
export {
a : funcA,
b : funcB,
c : varC
}import 할 때는 {} 를 이용한다.
import {a, b, c} from './App.js'💡 짜인 모듈을 export, import 하는 것은 모든 프로그래밍 언어의 기본이므로 꼭 숙지하고 있어야 한다.
