<JavaScript> template literals, string method

🐥자바스크립트 기초 문제 풀이

학습 목표
dollar sign($)과 back tick(``)으로 문자열 내에 변수를 넣을 수 있다. 다양한 메소드를 이용해서 외부에서 받아온 데이터를 가공하고 그것을 객체 속에 저장할 수 있다.

template literal은 JavaScript ES6에서 추가된 새로운 문법 중 하나이며 내장된 표현식을 허용하는 문자열 리터럴(소스 코드의 고정된 값)이다.

이전 버전에서는 String을 사용할 때 문자를 따옴표(', ")로 감쌌지만 자바스크립트 ES6버전에서부터는 back tick(``) 을 사용할 수 있게되었다.
또 백틱으로 감싸진 문자 안에서 dollar sign($)과 중괄호로 변수를 넣을 수도 있다.

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

위 코드를 console.log로 찍어보면 안녕하세요. 저는 김개발입니다. 라는 결과가 출력된다! 그리고 백틱 안에서는 기존 문법에서 불가능했던 엔터 입력을 통한 개행(break line)처리 또한 가능하다.

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

이런 코드 작성이 가능하다는 것!🤩

string method
ES6에서 추가된 string method 몇 가지를 알아보자!

const email = 'lownk@gmail.com';

console.log(email.startsWith('lo'));
console.log(email.endsWith('com'));
console.log(email.includes('@gmail'));

startsWith메소드는 검사하려는 문자열('lownk@gmail.com')이 자신의 인자 문자('lo')로 시작하는지를 true 또는 false로 가려낸다.
endsWith메소드는 검사하려는 문자열('lownk@gmail.com')이 자신의 인자 문자('com')로 끝나는지를 true 또는 false로 가려낸다.
includes메소드는 검사하려는 문자열('lownk@gmail.com')이 자신의 인자 문자('@gmail')를 포함하고있는지를 true 또는 false로 가려낸다.

Assignment

handleEdit 함수를 구현해 주세요.
쇼핑몰 회원가입에서 한 번 쯤은 아래와 같은 문구를 보셨을 겁니다.

"환영합니다. 위코드님! 회원가입 기념으로 쿠폰을 적립해 드렸습니다."

이러한 문구에서는 이름 부분만 계속 바뀌고 나머지 부분은 고정됩니다. 그럼, 이름 부분을 변수로 관리 하겠죠?
그렇다면 handleEdit 라는 이름을 가진 함수를 구현해 봅시다. 이 함수는 nickname, interests 라는 두 string을 인자로 받습니다. nickname은 유저의 닉네임을, interests 는 유저의 관심사를 의미합니다.
interests 에는 여러 관심사를 적을 수 있습니다. 그 때 그 관심사의 구분을 콤마(,)를 이용합니다.
nickname 과 interests 가 문제 없이 잘 들어왔다면 유저 정보를 효율적으로 관리하기 위해서 Object에 이 정보를 담아서 관리할 겁니다.
예를 들어 입력 값이 nickname = "뚜비" , interests = "방탈출,테니스,멍 때리기" 라고 했을 때
아래와 같은 Object를 리턴하도록 구현해 주세요.

{
nickname: "뚜비",
interests: ["방탈출","테니스","멍 때리기"],
bio: "제 닉네임은 뚜비입니다. 취미는 방탈출,테니스,멍 때리기입니다."
}

⚠️ 주의
interests 는 배열입니다.
interests 를 적을 때 콤마(,) 뒤에 스페이스는 지워주세요.

나의 답안

const handleEdit = (nickname, interests) => {
	//제시해준 두 인자를 받는 handleEdit함수를 만든다
  userInfo = {};
  	//빈 userInfo객체를 하나 만들고
  userInfo.nickname = nickname;
 	//userInfo객체의 nickname이라는 key를 만들고
 	//value로는 인자로 들어온 nickname을 넣어주기!
  userInfo.interests = interests.split(',');
  	//유저가 준 interests배열을 split메소드를 사용해서 콤마(,)로 각각 구분해!
 	//그리고 걔네를 userInfo객체 속 interests라는 key의 value로 넣어!
  userInfo.bio = `제 닉네임은 ${nickname}입니다. 취미는 ${interests}입니다.`
 	//userInfo객체의 bio라는 key를 만들고
    	//value로는 제시해준 줄줄이 문자열을 넣어주기~
  return userInfo;
  	//userInfo객체를 return해주삼
}

정리해보면 userInfo라는 객체 안에 nickname, interests, bio라는 총 세 개의 key들이 들어 간 것이고, 각각의 value에는 받아온 데이터나 제시해준 문자열을 넣어준것이다.