🙋 목표: 자바스크립트 기초를 공부하고 부족한 부분을 채우자.

1. template literals

🙌 ES6에서 추가된 문법 중 하나는 template literals이다.

원래 문자형을 작성할 때는 따옴표를 사용했었지만, 이제는 백틱()` 이라는 기호로 문자형을 감싸서 표현할 수 있다.

const chat = `안녕하세요, 반갑습니다.`

그리고 백틱()의 가장 큰 장점은백틱() 과 달러사인($)`그 안에 우리가 선언한 변수를 할당에서 같이 문자형으로 출력할 수 있다.

const age = 11;
const chat = `안녕하세요, 저는 ${age}살 입니다.`;

• 줄바꿈도 가능한 template literal

const chat = `줄바꿈도
가능한
ES6, 
template literals`;

2. string method

ES6에서 추가된 몇 가지 유용한 문자형 메소드가 있다.

이것은 단순이 문자형에서 특정 문자형을 찾기 위해 indexOf 를 사용한 것과 다르다.

• ES6에 추가된 문자형 메소드
  • startsWith()
  • endsWith()
  • includes()

const email = 'office.div1201@gamil.com';

console.log(email.startsWith('office')); //true
console.log(email.endsWith('com')); //true
console.log(email.includes('v1201')) //true

3. Assignment

handleEdit 함수를 구현하자.

• 쇼핑몰 회원가입을 진행하면 쿠폰 적립과 같은 문구가 뜬 적이 있을 것이다.

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

  이러한 문구에서는 이름 부분만 계속 바뀌고 나머지 부분은 고정됩니다. 그럼, 이름 부분을 변수로 관리 하는 것🎯

• 그handleEdit 라는 이름을 가진 함수를 구현하자.

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

• interests 에는 여러 관심사를 적을 수 있다. 그 때 그 관심사의 구분을 콤마(,)를 이용한다.

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

• 예를 들어 입력 값이 nickname = "뚜비" , interests = "방탈출,테니스,멍 때리기" 라고 했을 때 객체를 리턴 할 수 있도록 만들자.

⚠️ 주의

• interests 는 배열이다.

• interests 를 적을 때 콤마(,) 뒤에 스페이스는 지우자🚀

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

  • 해결방법1

    const handleEdit = (nickname, interests) => {
        const handleObj = {}
        handleObj.nickname = nickname
        handleObj.interests = interests.split(',')
        handleObj.bio = `제 닉네임은 ${handleObj.nickname}입니다. 취미는 ${handleObj.interests}입니다.`
    		return handleObj;
    }

  • 해결방법2(개선된 코드🚒)

    const handleEdit = (nickname, interests) => {
        const handleObj = {
            nickname: nickname,
            interests: interests.split(','),
            bio: `제 닉네임은 ${nickname}입니다. 취미는 ${interests}입니다.`
        }
        return handleObj;
    }