ES6 = ECMA Script 2015
-
ES
ECMA Script(JavaScript를 표준화 위해 탄생)줄임말
JavaScript를 표준화시키고, 규격화하기 위해 만들어진 것
ES6에는 정말 편리한 함수들이 많이 생겼고, 처음보는 문법들도 많이 생김. 그래서 ES6를 사용하려면 공부가 필요함 -
arrow function
//ES5
function() {}
//ES6
() => {}
ES6에서는 function이라는 키워드가 빠지고 소괄호만 남음
그리고 => (arrow) 가 추가됨
이름이 있는 함수를 만들 때
//ES5
function getName() {}
//ES6
const getName = () => {}
ES6는 함수를 getName 이라는 변수에 저장함.
사실 function(함수)는 변수에 저장할 수 있는 하나의 식.
그래서 ES5일 때도 마찬가지로 변수에 저장할 수 있었음.
쓰임새가 다를 때가 있지만, 함수를 정의할 때는 일단 편한 방법
으로.
호출할 때는 둘 다 같음.
getName()
인자 받기
인자 1개
//ES5
const getName = function(name) {}
//ES6
const getName = (name) => {}
const getName = name => {}
인자 2개
//ES5
const getName = function(name, age) {}
//ES6
const getName = (name, age) => {}
인자가 하나일 때는 소괄호 생략이 가능.
인자가 두 개일 때는 생략할 수 없음.
return
//ES5
function hi(text) {
text += '하세요';
return text;
}
//ES6
const hi = text => {
text += '하세요';
return text;
};
만약 함수가 실행내용이 딱히 없이 return만 한다면 return 키워드와 중괄호가 생략가능.
//ES5
function getName(name) {
return name;
}
//ES6
const hi = name => { return name };
const hi = name => name;
중괄호와 return문이 생략될 경우, 화살표 오른쪽에는 리턴될 "값"만 쓰여야 함.
다른 코드 들어가면 안됨.
//ES5
function getFullName(first, family) {
return first + family;
}
//ES6
const hi = (first, family) => { return first + family };
const hi = (first, family) => first + family;template literals, string method
-
ES6 에서 추가된 문법
-
template literal
back tick으로
string 감쌀 수 있음.
변수를 넣어서 표현할 수 있음.( ${}으로 변수를 감싸줘야 함. )
엔터 처리(개행, break line)가능 -
startsWith()메소드
endsWith()메소드
includes()메소드 -
repeat:특정 문자열 반복
const name = `김개발`; const hi = `안녕하세요. 저는 ${name} 입니다.`; //ES5 let detail = '자세히\n'+'보아야\n'+'이쁘다'; console.log(detail); //ES6 let detail = `자세히 보아야 이쁘다 내코드..`; console.log(detail); const email = 'yealee.kim87@gmail.com'; console.log(email.startsWith('ye')); console.log(email.endsWith('com')); console.log(email.includes('@gmail')); console.log('#'.repeat(3));Assignment
handleEdit 함수를 구현해 주세요.
쇼핑몰 회원가입에서 한 번 쯤은 아래와 같은 문구를 보셨을 겁니다.
환영합니다. 위코드님!
회원가입 기념으로 쿠폰을 적립해 드렸습니다.
환영합니다. 위코드님!
회원가입 기념으로 쿠폰을 적립해 드렸습니다.
이러한 문구에서는 이름 부분만 계속 바뀌고 나머지 부분은 고정됩니다. 그럼, 이름 부분을 변수로 관리 하겠죠?
그렇다면 handleEdit 라는 이름을 가진 함수를 구현해 봅시다.
이 함수는 nickname, interests 라는 두 string을 인자로 받습니다. nickname은 유저의 닉네임을, interests 는 유저의 관심사를 의미합니다.
interests 에는 여러 관심사를 적을 수 있습니다. 그 때 그 관심사의 구분을 콤마(,)를 이용합니다.
nickname 과 interests 가 문제 없이 잘 들어왔다면 유저 정보를 효율적으로 관리하기 위해서 Object에 이 정보를 담아서 관리할 겁니다.
예를 들어 입력 값이 nickname = "뚜비" , interests = "방탈출,테니스,멍 때리기" 라고 했을 때
아래와 같은 Object를 리턴하도록 구현해 주세요.
⚠️ 주의
interests 는 배열입니다.
interests 를 적을 때 콤마(,) 뒤에 스페이스는 지워주세요.
{
nickname: "뚜비",
interests: ["방탈출","테니스","멍 때리기"],
bio: "제 닉네임은 뚜비입니다. 취미는 방탈출,테니스,멍 때리기입니다."
}const handleEdit = (nickname, interests) => { let handle = { nickname: nickname, interests: interests.split(','), bio: `제 닉네임은 ${nickname}입니다. 취미는 ${interests}입니다.` } return handle; } console.log(handleEdit("한영현", "축구,농구,배구"));
-
array methods
arrow function을 가장 많이 사용할 때는 callback 함수(인자로 전달되는 함수)로 사용할 때
- Array.map()
배열을 반복해줌.
callback 함수에서 return한 값으로 매(each) 요소를 수정해줌.
return 값은 수정된 값으로 다시 생성된 배열
const arr = [1, 2, 3];
const squares = arr.map(x => x * x);
두번째 줄에서 map 메서드에 인자로 넘어간 함수를 원래대로 표현하면 아래와 같음.
const squares = arr.map(function (x) {
return x * x;
});
Array 타입의 데이터를 요소 갯수 만큼 반복.
반복할 때마다 실행할 함수를 parameter로 전달함.
그러면 이 callback 함수에서 array의 요소를 인자(x)로 받음.
해당 요소를 수정하고 싶은대로 로직을 구현하고 return해주면,
해당 index의 요소가 return 된 값으로 치환됨.-
Array.forEach()
for 대신 사용하는 반복문(반복 method)
map은 요소가 수정된 새로운 배열이 return 되었다면
forEach 함수 자체가 return 하는 것도 아무것도 없음.
그래서 forEach 로 전달되는 callback 함수에서도 return하는 것 없음.
forEach 함수를 탈출하고 싶을 때 return 사용.let startWithNames = []; let names = ['a', 'ab', 'cbb', 'ada']; names.forEach(el => { if (el.startsWith('a')) { startWithNames.push(el); } }); let hasC = false; let arr = ['a', 'b', 'c', 'd']; arr.forEach(el => { if (el === 'c') { hasC = true; return; } });forEach에서 현재 index 를 알고 싶으면 두 번째 인자로 받을 수 있음.
let idxOfC = -1; let arr = ['a', 'b', 'c', 'd']; arr.forEach((el, idx) => { if (el === 'c') { idxOfC = idx; return; } });
