🚦 ES6 = ECMA Script 2015

javascript 를 표준화 시키려고 탄생함
문법 보완이 필요하면서 문법 확장시키고 표준화하고 규격화 하기 위해 만들어 진 것.
현재 es10 까지 나왔고 주로 es6 가 쓰인다 2015 라고도 함

arrow function(화살표 함수) 이라고 하는 거

function 을 표현하는 방법이 완전히 달라짐(생김새만 바뀐 것)

이름 없는 함수 표현

ES5
function(){}

ES6
() => {}

이름 있는 함수

ES5
function getName(){}

ES6
const getName = () => {}

호출 할 때는 둘 다 같다

ES6 방식의 경우 인자 하나를 받을 때는, 괄호 생략 가능

//ES5
const getName = function(name) {}

//ES6
const getName = (name) => {}
const getName = name => {}

함수가 실행내용이 딱히 없이 리턴만 한다면 return 키워드와 중괄호가 생략가능.
이렇게 생략될 때는, 화살표 오른쪽에 리턴될 값만 쓰여야 된다.

ex1)
//ES5
function getName(name) {
  return name;
}

//ES6
const getName = name => { return name };
const getName = name => name;

ex2) 
//ES5
function getFullName(first, family) {
  return first + family;
}

//ES6
const getFullName = (first, family) => { return first + family };
const getFullName = (first, family) => first + family;

ES6 template literals

back tick 으로도 string 감쌀 수 있다.

const name = `김개발`

이렇게 감싸면 그 안에 변수를 넣어서 표현 할 수 있다.

const name = '김개발';
const hi = `안녕하세요. 저는 ${name} 입니다.`;


//원래는 (ES5에서는)
const hi = '안녕하세요. 저는 ' + name + ' 입니다.';
//이렇게 썼다. 

원래는 변수 있는 부분만 작은 따옴표 했었는데 백틱쓰면 이건 편하네.

변수로 쓰려면 ${}으로 변수 감싸줘야함

개행(줄바꿈) 처리

따옴표로 감쌌을 때는 개행 처리가 안됐다.
따옴표로 감싼 string 에서 개행 하려면, string 이랑 같이 따옴표 안에 /n 을 쓰면 된다.

let detail = '자세히\n'+'보아야\n'+'이쁘다';

근데, template literal (백틱 쓰는 es6) 에서는 입력한대로 개행이 된다.

let detail = `자세히 
보아야
이쁘다`

IndexOf 는 특정 문자열의 위치를 찾는 메소드 였는데,

ES6 에서 3개의 비슷한 메소드가 추가됨

string.startsWith('a')   // a로 시작하는가 ? // true or false 로 나옴
string.endsWith('a')  // a로 끝나는가? // true or false 
string.includes('a') // a를 포함하는가? // true or false 

ex)
const email = 'yealee.kim87@gmail.com'; 

console.log(email.startsWith('ye')); //true 
console.log(email.endsWith('com'));  //true
console.log(email.includes('@gmail'));// true

특정 문자열 반복하고 싶을 때

// '#'.repeat(반복횟수)
console.log('string'.repeat(3));   // stringstringstring

split()

string.split(separator, limit)

문자열을 separator로 잘라서, limit 크기 이하의 배열에 잘라서 저장해서 리턴함

separator : 필수아님, 이 단위로 문자열 잘라서 리턴함. 아무것도 안넣으면 문자열 전체를 배열에 넣음

limit : 필수아님, 최대 분할 개수 (몇등분할 것인가)
document.writeIn은 document.write 이랑 같은데 줄바뀜이 된다.

// 1. separator 안넣으면, 

const str = "apple banana orange";

const arr = str.split();

document.writeln(arr); // apple banana orange
document.writeln(arr.length); // 1    

//  apple banana orange가 한 덩이로 배열에 담긴다. 

//2. 단어 별로 자르기 (separatror 가 " " 일 때)

const str = "apple banana orange";

const arr = str.split(" ");

document.writeln(arr.length); // 3
document.writeln(arr[0]); // apple
document.writeln(arr[1]); // banana
document.writeln(arr[2]); // orange         // 3단어로 나뉘어서 배열에 담긴다.



// 
3. separator로 ""(length가 0인 문자열)을 전달하면,



const str = "a b c";

const arr = str.split("");

document.writeln(arr.length); // 5
document.writeln(arr[0]); // a
document.writeln(arr[1]); // ' '(space)
document.writeln(arr[2]); // b
document.writeln(arr[3]); // ' '(space)
document.writeln(arr[4]); // c  

//문자열을 각각의 문자별로 잘라서, 한 글자씩(공백 포함) 배열에 저장하여 리턴한다.


4. 특정 구분자(",")로 나눠서 자를 때 


const str = "apple,banana,orange";

const arr = str.split(",");

document.writeln(arr.length); // 3
document.writeln(arr[0]); // apple
document.writeln(arr[1]); // banana
document.writeln(arr[2]); // orange

5. limit 지정할 때,

const str = "apple,banana,orange";

const arr = str.split(",", 2);

document.writeln(arr.length); // 2
document.writeln(arr[0]); // apple
document.writeln(arr[1]); // banana
document.writeln(arr[2]); // undefined

// 길이 리밋이 2여서, 앞에서부터 2등분만 된다.

여기서는 , split 함수를 이용해서 interest 로 쓰이는 값들을 나눠서 배열로 넣는 게 핵심이다.
인자 넣을 때, 인자가 문자면 따옴표 넣어야 되는거 당연한건데 헷갈리지 말자.

const handleEdit = (nickname, interests) => {

const a = { nickname : nickname ,
            interests : interests.split(",") ,
            bio : `제 닉네임은 ${nickname}입니다. 취미는 ${interests} 입니다.`
      
          }
  return a 
}
console.log(handleEdit("대영", "밥먹기,책읽기,운동하기"));