TIL] JavaScript-ES6 syntax
🍭 ES6 문법 맛보기!
🥞 arrow function
function
를 표현할 때 쓸 수 있는 새로운 표현식
으로 ES6
에서 새로 도입된 문법이다.
. ES5
function() {}
. ES6
() => // 간단한거는 괄호도 생략가능
() => () // return을 입력하지 않아도 return 됨
() => {} // return을 입력해야 함
. ES5
const getName = function(name, age) {}
. ES6
const getName = (name, age) => {}
const getName = name => {}
* parameter가 1개 일때는 소괄호도 생략가능하다.
함수가 실행내용이 딱히 없이 return만 한다면 return 키워드와 중괄호도 생략 가능하다.
. ES5
function getName(name) {
return name;
}
. ES6
const hi = name => { return name };
const hi = name => name;
*중괄호와 return문이 생략될 경우, 화살표 오른쪽에는 리턴될 "값"만 쓰여야 한다.
🍘 arrow method의 활용
arrow function
은 callback 함수
(인자도 전달되는 함수)로 사용할 때 가장 많이 사용
한다. arrow method를 활용하기 위해 array method를 간단히 설명하겠다.
.Array.map()
: map method는 배열을 반복
하는데 callback 함수에서 return한 값으로 각 요소를 수정해준다. map method의 return 값은 수정된 값으로 다시 생성된 배열
이다.
🍘 assignment
moreThan100 함수에 숫자로 구성된 배열을 인자로 넘겨드립니다.
100 보다 크거나 같으면, true를
100 보다 작으면 false로 요소를 변경하여
새로운 배열을 return해주세요.
const moreThan100 = nums => {
let newArr = nums.map(n => {
if (n >= 100) {
return true;
} return false;
})
return newArr;
}
.Array.forEach
: for문 대신 사용하는 반복 method
으로 map과 다르게 return하는 것이 없다
.
🌮 literal template
sting 안에 변수를 삽입
할 때 사용한다. literal template는 backtic(`) 문자로 감싸인 형태
로 쓰이며, 그 안에 변수를 삽입할 때는 ${ }
형태를 쓴다. 작은 따옴표('')/큰 따옴표("")의 구분이 없으며, 별도의 연산자 없이 간단하게 문자열을 삽입할 수 있다. 가장 큰 장점으로는 코드의 가독성
이 좋다는 것이다.
const myPet = 'armadillo';
console.log(`I own a pet ${myPet}.`);
›I own a pet armadillo.
작은 따옴표('')/큰 따옴표("")
로 감싼 string의 줄바꿈
을 하려면 \n
으로 바꿔줘야 한다. 하지만 literal template
은 string을 입력한대로 줄바꿈
이 된다.
. 기존
let detail = '자세히\n'+'보아야\n'+'이쁘다';
console.log(detail);
let detail = `자세히
보아야
이쁘다
. literal template
내코드..`;
console.log(detail);
🍹 string method
그동안 string에서 특정 string을 찾기 위해서는 indexOf를 사용했었지만 이제는 새로운 3가지의 method가 생겼다. 이 method를 사용했하면 특정 문자열이 있을때는 true, 아닐때는 false를 나타낸다.
. startsWith
. endsWith
. includes
const email = 'https://velog.io';
console.log(email.startsWith('ht'));
console.log(email.endsWith('.io'));
console.log(email.includes('://'));
›true
›true
›true
특정한 문자열을 반복하고 싶으면 repeat 함수를 사용하면 된다.
'#'.repeat(3);
›'###'
JavaScript 개발자라면 알아야 할 ES6 문법 Top 10
- Default Parameters in ES6
- Template Literals in ES6
- Multi-line Strings in ES6
- Destructuring Assignment in ES6
- Enhanced Object Literals in ES6
- Arrow Functions in ES6
- Promises in ES6
- Block-Scoped Constructs Let and Const
- Classes in ES6
- Modules in ES6 + import/export를 의미함
[출처] - JavaScript 개발자라면 알아야 할 ES6 문법 Top 10 (영문)
Author And Source
이 문제에 관하여(TIL] JavaScript-ES6 syntax), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@link717/TIL-JavaScript-ES6-syntax저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)