split() 메소드는 괄호 내에 지정한 구분자(seperator)를 기준으로 string 객체를 여러개의 문자열로 나누어준다. 문자열에서 구분자가 등장하면, 해당 부분은 삭제되고 남은 문자열이 배열로 반환된다.
str.split(seperator, limit)-
seperator : 원본 문자열에서 끊어야 할 부분을 나타내는 문자열
separator가 두 글자 이상일 경우 그 부분 문자열 전체가 일치해야 끊어진다. 또한 separator가 빈 문자열일 경우, str 내 각각의 문자가 배열의 원소 하나씩으로 변환된다. -
limit(opt) : 끊어진 문자열의 최대 개수를 나타내는 정수
이 매개변수를 전달하면split()메서드는 주어진 separator가 등장할 때마다 문자열을 끊지만 배열의 원소가 limit개가 되면 멈춘다. 남은 문자열은 새로운 배열에 포함되지 않는다.
Question #1
handleEdit 함수를 구현해 주세요.
- 이 함수는 nickname, interests 라는 두 string을 인자로 받습니다.
nickname은 유저의 닉네임을, interests 는 유저의 관심사를 의미합니다.
interests에는 여러 관심사를 적을 수 있으며 관심사의 구분은 콤마(,)를 이용합니다. - nickname과 interests가 문제 없이 잘 들어왔다면 유저 정보를 효율적으로 관리하기 위해서 Object에 이 정보를 담아서 관리합니다.
⚠️ 주의
interests는 배열입니다.
interests를 적을 때 콤마(,) 뒤에 스페이스는 지워주세요.
예시)
{
nickname: "뚜비",
interests: ["방탈출","테니스","멍 때리기"],
bio: "제 닉네임은 뚜비입니다. 취미는 방탈출,테니스,멍 때리기입니다."
}Answer of #1
=포함된 이론=
- template literal
string을 작성할 때 따옴표를 사용하지 않고 백틱(`)을 활용하여 표현 가능
그럴 경우 string과 변수를 +연산자를 통해 연결하지 않고 ${}를 활용하여 변수 포함 가능
백틱 사용 시 줄바꿈(개행)도 입력한대로 가능- string method
startsWith(): 괄호 내의 string으로 시작하는 문자열
endsWith(): 괄호 내의 string으로 끝나는 문자열
includes(): 괄호 내의 string을 포함한 문자열- 화살함수
일반 함수를 아래와 같이 비교적 단순한 방식으로 표현let 함수명 = (인자) => { return 값 };
문제의 답으로 입력한 코드.
const handleEdit = (nickname, interests) => {
handleObject = {};
handleObject.nickname = nickname;
handleObject.interests = interests.split(',');
handleObject.bio = `제 닉네임은 ${nickname}입니다. 취미는 ${interests}입니다.`;
return handleObject;
}해당 문제의 답을 찾으며 가장 고전했던 부분은, 예시처럼 interest로 받은 string 값을 배열로 전환하여 저장하는 것이었다. 검색 결과 split() 메소드를 활용하여 간단하게 해결할 수 있었다. 또한 콤마를 통해 구분하여 작성되는 interest의 특성을 반영하여 split()의 seperator로 콤마를 설정하면 문제 해결!
Question #2
formatDate 함수를 구현해 주세요.
- 날짜가 담긴 배열을 인자로 받습니다.
- 날짜의 data type은 string이며, 보내는 날짜 타입은 'YYYY-MM-DD' 입니다.
- 해당 날짜의 형식을 'YYYY년 MM월 DD일' 로 바꿔서, 새로운 배열을 return 해주세요.
Answer of #2
=포함된 이론=
array(배열)의 반복문으로 사용되는 메소드 2가지
- array.map()
map()메소드는 배열을 반복해주는데, callback 함수에서 return한 값으로 매 요소를 수정해 준다.const arr = [1, 2, 3]; const squares = arr.map(x => x * x);
- array.forEach()
forEach()메소드는map()메소드와 비슷한 역할을 하나 어떤 값도 return하지 않는다는 점에서 차이를 갖는다. 일반적으로 for문 대신 사용되며,forEach함수를 탈출하고 싶을 때 return을 사용한다.let hasC = false; let arr = ['a', 'b', 'c', 'd']; arr.forEach(el => { if (el === 'c') { hasC = true; return; } });
문제의 답으로 입력한 코드.
const formatDate = dates => {
let arr = dates.map(value => {
let date = value.split('-');
return `${date[0]}년 ${date[1]}월 ${date[2]}일`;
})
return arr;
}위의 답에서도 기존 날짜 형식 (YYYY-MM-DD)를 새로운 형태로 배치하기 위해서는 split() 메소드를 사용하여 각 요소를 나눠주어야 한다. 그렇게 생성된 배열 date [YYYY, MM, DD]는 map() 메소드 내의 callback function에서 활용된다.
또한 해당 예시에서는 변경된 날짜의 값을 return해주어야 하기 때문에, array에서 반복문으로 사용되는 2가지 메소드 중에서 map() 메소드가 더 잘 맞는 것을 알 수 있다.
방금 배운 이론을 적용하는 것은 어렵지 않으나,
split()메소드를 잘 이해하지 못함으로써 위의 두 가지 문제에서 고전을 하였다. 이전에 배운 내용들을 잘 기억하고 활용할 수 있는 것이 중요할 듯!
