[ES6] arrow function
- ES는 ECMA Script의 줄임말
- ECMA Script는 JavaScript를 표준화시키고, 규격화하기 위해 만들어진 것
이름이 없는 함수
//ES5
function() {}
//ES6
() => {}- 이름이 없는 함수의 기본적인 표현
- ES6에서는 function이라는 키워드가 빠지고 소괄호만 남음
- =>(arrow)가 추가 됨
이름이 있는 함수
//ES5
function getName() {}
//ES6
const getName = () => {}- 호출할 때는 둘 다 getName()으로 호출
- ES6는 getName이라는 변수에 저장
- function(함수)는 변수에 저장할 수 있는 하나의 식
//ES5
//Function Declaration
function getName() {}
//ES5
//Function Expression
const getName = function() {}- ES5에서도 함수를 변수에 저장할 수 있다.
인자
//ES5
const getName = function(name) {}
//ES6
const getName = (name) => {}
const getName = name => {}
//ES5
const getName = function(name, age) {}
//ES6
const getName = (name, age) => {}- 인자가 하나일 때 소괄호 생략 가능
- 인자가 두 개일 때는 생략 불가
return
//ES5
function getName(name) {
return name;
}
//ES6
const hi = name => { return name };
const hi = name => name;
//ES5
function getFullName(first, family) {
return first + family;
}
//ES6
const hi = (first, family) => { return first + family };
const hi = (first, family) => first + family;- 함수의 실행내용이 딱히 없이 return만 하면 return 키워드 생략 가능
[ES6] template literals
const name = `김개발`;- 원래 string을 작성할 때 ""(따옴표)를 사용했지만 ES6문법 에서는 back tick으로 string을 감싸고 사용할 수 있다.
const name = '김개발';
const hi = `안녕하세요. 저는 ${name} 입니다.`;- back tick으로 감싸면 그 안에 변수를 넣어 표현할 수 있다.
- 변수를 사용하려면 ${} 으로 변수를 감싸줘야 한다.
엔터 처리(개행, bradk line)
let detail = '자세히
보아야
이쁘다';
let detail = '자세히\n'+'보아야\n'+'이쁘다';- ES5에서 위의 코드는 문법 오류이다. 따옴표로 감싼 string은 개행 처리를 하지 않고, 아래 방법 처럼 처리 해줘야 한다.
let detail = `자세히
보아야
이쁘다
내코드..`;
console.log(detail);- ES6 문법인 template literal에서는 string을 입력한대로 개행이 된다.
string method
문자열 찾기
- string에서 특정 string을 찾기 위해서 indexOf를 사용 했는데 3가지 method가 추가 되었다.
startWith endsWith includes
- true나 false를 반환
- ()안에 검색할 문자열 (필수 / 대소문자 구분), 검색 시작 위치 (선택 / 없으면 전체 문자열)
ex) .starWith('a', 3)
const email = 'yealee.kim87@gmail.com';
console.log(email.startsWith('ye')); // true
console.log(email.endsWith('com')); // ture
console.log(email.includes('@gmail')); // true특정 문자열 반복
'#'.repeat(3); // ###
array methods
- arrow function을 가장 많이 사용할 때는 callback 함수로 사용할 때
- callback 함수란? 인자로 전달되는 함수라고 생각하시면 됩니다.
Array.map()
- map 메서드는 배열을 반복
- callback 함수에서 return한 값으로 매(each)요소를 수정
- map 메서드의 return 값은 수정된 값으로 다시 생성된 배열
🤔Deep Dive into JavaScript's Array Map Method
const arr = [1, 2, 3];
const squares = arr.map(x => x * x);
const squares = arr.map(function (x) {
return x * x; // [1, 4, 9]
});- 두번째 줄에서 map함수에 인자로 넘어간 함수를 그 아래 함수처럼 표현할 수 있다.
- Array 타입의 데이터를 요소 갯수 만큼 반복, 반복할 때 마다 실행할 함수를 parameter로 전달된다.
- callback 함수에서 array의 요소를 인자(x)로 받는다.
- 요소를 수정하고 싶은대로 로직을 구현하고 return 하면, 해당 index의 요소가 return 된 값으로 치환된다.
Array.forEach()
- forEach는 for 대신 사용하는 반복문
- map과의 차이점? forEach는 함수 자체가 return 하는 것이 없다는 것
forEach 함수를 탈출하고 싶을 때 return을 사용 - map은 요소가 수정된 새로운 배열이 return / forEach는 아무것도 return 되는 것이 없다.
- forEach로 전달되는 callback 함수에서도 return하는 것이 없다.
단지 for문 대시 사용하는 반복 method
let startWithNames = [];
let names = ['a', 'ab', 'cbb', 'ada'];
names.forEach(el => {
if (el.startsWith('a')) {
startWithNames.push(el);
}
}); // ststartWithNames = ["a", "ab", "ada"]let hasC = false;
let arr = ['a', 'b', 'c', 'd'];
arr.forEach(el => {
if (el === 'c') {
hasC = true;
return;
}
});- forEach도 함수이므로, 중간에 반복문을 탈출하고 싶으면 return; 을 해주면 된다.
let idxOfC = -1;
let arr = ['a', 'b', 'c', 'd'];
arr.forEach((el, idx) => {
if (el === 'c') {
idxOfC = idx;
return;
}- forEach문에서 현재 index를 알고 싶으면 두번째 인자로 받을 수 있다.
🎯[문제]
moreThan100 함수에 숫자로 구성된 배열을 인자로 넘겨
100 보다 크거나 같으면, true를
100 보다 작으면 false로 요소를 변경하여
새로운 배열을 return해주세요.
ex)
nums(input) => [100, 9, 30, 7]
return => [true, false, false, false]
const moreThan100 = nums => {
let arr = nums.map(
i => { if (i < 100) {
return false;
}
return true;
}
)
return arr;
}
moreThan100([100, 9, 30, 7]);🎯[문제]
formatDate 함수에 날짜가 담긴 배열을 전달
날짜의 data type은 string이며,
보내는 날짜 타입은 'YYYY-MM-DD' 입니다.
해당 날짜의 형식을 'YYYY년 MM월 DD일' 로 바꿔서
새로운 배열을 return 해주세요.
ex)
dates(input) => ['2019-03-21', '2019-04-21', '2019-05-21']
return => ['2019년 03월 21일', '2019년 04월 21일', '2019년 05월 21일']
const formatDate = dates => {
let str = dates.map(function(arr){
let date = arr.split('-');
console.log(`${date[0]}년 ${date[1]}월 ${date[2]}일` )
return `${date[0]}년 ${date[1]}월 ${date[2]}일`;
}
)
return str;
}
formatDate(['2019-03-21', '2019-04-21', '2019-05-21']);Object(3)
객체의 키를 변수로 접근하기
- 객체의 특정 키의 값을 가져오는 것이 가능하고, 반대로 객체에 특정 키를 만들고 값을 할당하는 것도 가능
-
information 이라는 개체를 만듦
const information = { name: '김개발' } -
여기에 키를 생성, 그 키에 값을 할당하려고 한다.
키와 값을 변수를 통해 받아온다면?const verb = 'developes'; const project = 'facebook'; -
verb의 값을 키로 사용해야 하고, project의 값을 그 키의 값으로 사용한다고 했을때,
information[verb] = project // [A] information.developes = 'facebook' // [B]
- A와 같이 할당 가능
- B의 방식으로도 할당이 가능하지만, 이 경우 키와 값은 항상 정해져 있게 된다.
📌 변수 verb와 project가 가지는 값에 따라 다른 키와 다른 값을 갖는게 가능
객체 순회하기
- 객체는 순서가 없고 키를 통해서만 접근해야 한다.
객체에 있는 모든 키에 한번씩 접근해야 한다면?
- 객체도 배열처럼 순회가 가능
- 배열과 다르게 정해진 순서가 없기 때문에, 어떤 순서에 따라 접근하게 될지 알 수 없다.
- 그렇기 때문에 객체의 순회는 순서가 보장되지 않은 순회라고 한다.
const arr = ['coconut', 'banana', 'pepper', 'coriander']
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
}- 배열에서 이런 반복문을 사용할 수 있었던 것은
배열이 length라는 키를 가지고 있고, 인덱스를 통해 각 배열요소에 접근할 수 있었기 때문 - 객체는 length 키가 없고, 인덱스도 없기 때문에 이런식의 반복문은 사용 불가
1. Object.keys()
- Object.keys 메소드는 객체가 가지고 있는 키들의 목록을 배열로 리턴하는 메소드
- 객체의 내장 메소드가 아니라 객체 생성자인 Object가 직접 가지고 있는 메소드
const obj = {
name: 'melon',
weight: 4350,
price: 16500,
isFresh: true
}
Object.keys(obj) // ['name', 'weight', 'price', 'isFresh']- Object.keys 메소드가 리턴하는 값이 배열이기 때문에 이걸로 우리가 반복문을 사용할 수 있다.
const keys = Object.keys(obj) // ['name', 'weight', 'price', 'isFresh']
for (let i = 0; i < keys.length; i++) {
const key = keys[i] // 각각의 키
const value = obj[key] // 각각의 키에 해당하는 각각의 값
console.log(value)
}- ES6 문법에서 Object생성자의 메소드인 Object.values, Object.entries와 같은 메소드 사용 가능
- Object.values는 객체의 값으로 이루어진 배열 리턴
- Object.entries는 객체의 키와 값의 쌍으로 이루어진 길이 2짜리 배열로 이루어진 배열을 리턴
각 배열에서 인덱스 [0] 값은 각각의 키 / 인덱스 [1] 값은 해당 키에 해당하는 값
const values = Object.values(obj)
// values === ['melon', 4350, 16500, true]
const entries = Object.entries(obj)
/*
entries === [
['name', 'melon'],
['weight', 4350],
['price', 16500],
['isFresh', true]
]
*/- Object.entries가 가장 유용하게 사용된다.
2. for-in
- 객체를 순회하는 두번째 방법은 for-in문
- 반복문인 for문과 같은 종류의 문법 / 객체와 배열을 위해 특별히 존재하는 ES6 에서 추가된 문법
📌 객체 순회 외에도, 일반적인 배열을 순회할때도 유용하게 사용된다.
for (let i in arr) {
console.log(i)
console.log(arr[i])
}- for문에서 자주 사용하는 (let i = 0; i < arr.length; i ++) 문법을 위의 코드 처럼 간단하게 나타낼 수 있다.
const obj = {
name: 'melon',
weight: 4350,
price: 16500,
isFresh: true
}
for (let key in obj) {
const value = obj[key];
console.log(key);
console.log(value);
}- 객체를 가지고 for-in 문을 사용하면, for-in 문의 인덱스에 해당하는 변수가,
숫자가 아닌 객체의 각각의 키에 해당하는 문자열을 할당받게 된다.
🎯[문제]
getExamResult 함수를 구현해주세요.
인자 scores 는 다음과 같은 객체입니다.
객체의 요소의 갯수 및 키의 이름들은 달라질 수 있습니다.
객체의 값은 다음 9가지 문자열 중에서 하나를 가지고 있습니다. ('A+', 'A', 'B+', 'B', 'C+', 'C', 'D+', 'D', 'F')
scores는 객체
{
'생활속의회계': 'C',
'논리적글쓰기': 'B',
'독일문화의이해': 'B+',
'기초수학': 'D+',
'영어회화': 'C+',
'인지발달심리학': 'A+'
}
requiredClasses는 문자열로 된 배열
['영어회화', '기초수학', '공학수학', '컴퓨터과학개론']
1. scores 객체가 가지고 있는 키들은 새로운 객체에 포함되어야 합니다.
단, 그 값들은 다음 원리에 따라 숫자로 바뀌어 할당되어야 합니다.
A+ => 4.5
A => 4
B+ => 3.5
B => 3
C+ => 2.5
C => 2
D+ => 1.5
D => 1
F => 0
2. requiredClass 배열의 요소로는 존재하지만, scores의 키로는 존재하지 않는 항목이 있다면,
해당 요소는 새로운 객체의 키가 되고, 값으로 0을 가져야 합니다.
위에서 예시로 묘사된 객체와 배열이 인자로 들어왔다면,
다음과 같은 객체과 리턴됩니다. (요소간 순서는 다를수 있지만, 채점에 무관합니다.)
ex) {
'생활속의회계': 2,
'논리적글쓰기': 3,
'독일문화의이해': 3.5,
'기초수학': 1.5,
'영어회화': 2.5,
'인지발달심리학': 4.5,
'공학수학': 0,
'컴퓨터과학개론': 0,
}
const getExamResult = (scores, requiredClasses) => {
const result = {};
let obj = {
'A+': 4.5,
'A': 4,
'B+': 3.5,
'B': 3,
'C+': 2.5,
'C': 2,
'D+': 1.5,
'D': 1,
'F': 0
};
for (let i=0; i < requiredClasses.length; i++) {
let key = requiredClasses[i];
result[key] = 0;
}
for (let j in scores) {
let grade = scores[j];
result[j] = obj[grade];
}
return result;
}이 문제도 엄청 오래 풀었던 문제 😩
- 먼저 for문을 돌면서 requiredClasses 배열에 있는 요소 하나 하나를 변수 key에 저장한다.
result 라는 빈 객체에 값을 모두 0으로 만들어 저장한다.
result = {
'영어회화': 0,
'기초수학': 0,
'공학수학': 0,
'컴퓨터과학개론': 0
}- 두번째 for문을 돌면서 scores 객체에 있는 key에 해당하는 value를 변수 grade에 저장한다.
('C', 'B', 'B+', 'D+', 'C+', 'A+')
scores의 key를 1번의 result 객체에 key로 저장하면서 그 value 값으로 obj 객체의 obj[grade]를 저장한다.
처음에 문제를 풀 때 결과의 객체 처럼 key를 넣고 나서 value를 영문 학점으로 할당하고 그 할당 한 값을 obj객체를 또 for문을 돌면서 같은지 비교해야 된다고 생각했다. 불필요한 단계를 넣어 생각해서 더 복잡했던 것 같다.
객체[key] = 값; 으로 객체에 키를 생성하고 값을 할당할 수 있고,객체[key]로 값을 바로 바로 찾을 수 있다는 개념이 부족해서 시간이 많이 걸린 것 같다.
