1. template literals

ES6 에서 새롭게 추가된 문법 중 하나가 template literal입니다. 원래 String을 작성할 때 따옴표를 사용했었지만, 이제 백틱(back tick)으로도 string을 작성할 수 있습니다. 그리고 back tick으로 작성할 때 그 안에 변수를 넣어서 표현할 수 있습니다.

const name = '김개발';
const hi = `안녕하세요. 저는 ${name}입니다.`; //백틱으로 작성

// 변수를 사용하려면 위와 같이 ${}으로 변수를 감싸줘야 합니다.

따옴표로 감싼 string에서 엔터 처리(개행, break line)를 하려면 아래처럼 구현해야 합니다.

// 따옴표로 감싼 개행처리 방법
const detail = '자세히\n보아야\n예쁘다';

console.log(detail);


// 백틱 감싼 개행처리 방법
const detail = `자세히 
보아야
예쁘다

내코드..`;

console.log(detail);

2. string method

string에서 특정 string을 찾기 위해 indexOf 를 사용했었습니다. 그러나 ES6에서 추가된 다음의 메서드들을 indexOf 대신해 활용할 수 있게 되었습니다.

• startsWith
• endsWith
• includes
  *true or false로 출력한다.

const email = 'wecode@gmail.com';


console.log(email.startsWith('we'));
// 시작첫글자에 'we'라는 글자가 있기 때문에 true

console.log(email.endsWith('com'));
// 마지막에 'com'라는 글자가 있기 때문에 true

console.log(email.includes('@gmail'));
// '@gmail'라는 글자가 포함되있기 때문에 true

특정 문자열을 반복하고 싶으면 repeat 함수를 활용할 수 있습니다.

const email = 'wecode@gmail.com';

console.log(email.repeat(3)); 
// wecode@gmail.comwecode@gmail.comwecode@gmail.com
// str.repeat(n) – repeats the string n times.

Assignment

사용자의 이름에 맞게 문구가 변화하는 handleEdit 함수를 구현해 주세요.

• 쇼핑몰 회원가입에서 한 번 쯤은 아래와 같은 문구를 보셨을 겁니다. 이러한 문구는 이름 부분만 바뀌고 나머지 부분은 고정된다는 특징을 보입니다. 여기서 이름 부분을 변수화하여 그때 그때 상황에 맞게 변화가 반영되게 작성하면 된다고 추측할 수 있습니다.
  "환영합니다. 위코드님! 회원가입 기념으로 쿠폰을 적립해 드렸습니다."

• 그렇다면 사용자에 맞게 이름이 변경되어 안내 문구를 출력하는 handleEdit함수를 만들어 봅시다.

• 이 함수는 nickname, interests라는 두 string을 인자로 받습니다. nickname은 유저의 닉네임을, interests는 유저의 관심사를 의미합니다.

• interests에는 여러 관심사를 적을 수 있습니다. 이때, 콤마(,)를 통해 관심사를 구분합니다.

• nickname과 interests가 인자로 문제없이 잘 들어왔다면, 유저 정보를 효율적으로 관리하기 위해서 Object에 이 정보를 담아서 관리합니다.

• 예를 들어 입력 값이 nickname = "위코드" , interests = "축구,야구,농구" 라고 했을 때,

• 아래와 같은 Object를 반환하도록 구현해 주세요.

{
  nickname: "위코드",
  interests: ["축구","야구","농구"],
  bio: "제 닉네임은 위코드입니다. 취미는 축구,야구,농구입니다."
}

function handleEdit(nickname, interests){
	let crewInfo = {
    	nickname : nickname,
        interests : interests,
        bio : '제 닉네임은 '  + nickname + '입니다. 취미는 ' + interests + '입니다.'
    }
    return crewInfo
}

console.log(handleEdit('kim', ['축구, 야구, 농구']))