[JavaScript #15] Basic of JavaScript - ES6 문법

arrow function

• ES6에 추가된 함수로 기존 function() 함수를 변형했다.

//ES5
function getName() {}

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

getName();

인자

//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 hi(text) {
  text += '하세요';
  return text;
}

//ES6
const hi = text => { 
  text += '하세요';
  return text 
};

// 함수 실행 내용 없이 return만 하면 return 키워드와 중괄호 생략 가능
//ES5
function getName(name) {
  return name;
}

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

• 중괄호와 return문이 생략될 경우, 화살표 오른쪽에는 리턴될 "값"만 쓰여야 한다.

String methods

특정 string을 찾기 위한 indexOf 메서드 외 기능

• startsWith
• endsWith
• includes
• repeat

const email = 'abcdefg45@gmail.com';

console.log(email.startsWith('ab')); //true
console.log(email.endsWith('com')); //true
console.log(email.includes('@gmail')); //true
console.log(email.repeat(3)); //abcdefg45@gmail.comabcdefg45@gmail.comabcdefg45@gmail.com (3번 반복)

Assignment

쇼핑몰 회원가입에서 한 번 쯤은 아래와 같은 문구를 보셨을 겁니다.

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

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

그렇다면 handleEdit 라는 이름을 가진 함수를 구현해 봅시다.

• 이 함수는 nickname, interests 라는 두 string을 인자로 받습니다.
• nickname은 유저의 닉네임을, interests 는 유저의 관심사를 의미합니다.
• interests 에는 여러 관심사를 적을 수 있습니다. 그 때 그 관심사의 구분을 콤마(,)를 이용합니다.
• nickname 과 interests 가 문제 없이 잘 들어왔다면 유저 정보를 효율적으로 관리하기 위해서 Object에 이 정보를 담아서 관리할 겁니다.
• 예를 들어 입력 값이 nickname = "뚜비" , interests = "방탈출,테니스,멍 때리기" 라고 했을 때 아래와 같은 Object를 리턴하도록 구현해 주세요.
  ⚠️ 주의
  interests 는 배열입니다.
  interests 를 적을 때 콤마(,) 뒤에 스페이스는 지워주세요.

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

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

split() 메서드

• 특정문자를 기준으로 문자열을 나누거나 구분하는 함수
• 하나의 텍스트를 기준점을 분리하여 여러개의 값을 가진 배열로 변환 후 반환
  변수명.split('기준점')
• 전화번호, 개인정보 등 숫자에서 '-'기준으로 구분하는 경우,
• 하나의 문장에서 스페이스바를 기준으로 단어를 분리하는 경우,
• ip 주소를 '.'으로 구분하여 나타내는 경우 등 유용하게 사용할 수 있다.