Array는 이전 글을 읽고 참조하시면 됩니다. 이 포스트에선 자바스크립트 String, Object 유용한 함수를 소개합니다.
String
split
문자열을 분할하여 배열로 만들기
const date = `2020/02/23`;
const result = date.split('/');
console.log(result); // ["2020", "02", "23"]
split하여 분할 후, 다시 합치려면 join을 사용.
concat
문자열에 다른 문자열을 연결하여 새로운 문자열을 만듭니다
const str1 = `Hello.`;
const str2 = `World!`;
const result = str1.concat(str2);
console.log(result); // > "Hello.World!"
startsWith
문자열 앞 부분이 지정된 문자열로 시작하는지 확인
const str = `Hello.World!`;
const result = str.startsWith('Hel');
console.log(result); // true
includes
문자열에 특정 문자열이 포함되어 있는지 확인
const str = `Tom and Jerry are cat and rat.`;
const result = str.includes('at');
console.log(result); // true
trim
문자열 끝에 있는 공백, 줄 바꿈(LF CR), 공백, 탭 등을 제거
const str = ` Hello！！
`;
const result = str.trim();
console.log(result); // "Hello！！"
padStart
문자열 길이를 지정하고, 특정 문자열로 채우기
/**
* # padStart
*
* targetLength : 문자열 길이.
현재 문자열의 길이보다 짧다면, 현재 문자열 반환
* padString : 문자열.
targetLength 보다 긴 경우 오른쪽부터
그 길이 만큼 잘린다 (없어진다)
*/
'targetString'.padStart(targetLength, padString);
5자리로 지정하고 빈 부분은 앞쪽부터 *로 채움
const targetString = 'abc';
const result = targetString.padStart(5, '*');
console.log(result); // **abc
5자리로 지정하고 빈 부분은 앞쪽부터 12345 문자열에서 가져와 채움
const targetString = 'abc';
const result = targetString.padStart(5, '12345');
console.log(result); // 12abc
targetString + padString이 지정한 자리수보다 긴 경우, padString 오른쪽에서 그 길이만큼 잘립니다.
12345abc->12abc
Object
entries
- 객체를 배열로 변환
- Object {key: value} -> Array [key, value]
- Object 지만 배열을 수정하고 싶을 때 유용한 함수
객체를 배열로 변환
Object.entries 한번에 객체를 배열로 변환
const animals = {
dog: 'wan-wan',
cat: 'nya-n',
fox: 'kon-kon'
};
const result = Object.entries(animals);
console.log(result);
// [
// ["dog", "wan-wan"],
// ["cat", "nya-n"],
// ["fox", "kon-kon"],
// ]
위와 같은 형태로 많이 사용하지만, 아쉬면도 있습니다.
기본적으로 Object.entries 에서 배열로 만든 뒤, map을 활용해 코드의 유연성을 높이는 게 좋습니다.
Object.entries 와 map 결합
const animals = {
dog: 'wan-wan',
cat: 'nya-n',
fox: 'kon-kon',
};
const result = Object.entries(animals).map(([key, value]) => ({
name: key,
cry: value,
}));
console.log(result);
// [
// {
// name: "dog",
// cry: "wan-wan",
// },
// {
// name: "cat",
// cry: "nya-n",
// },
// {
// name: "fox",
// cry: "kon-kon",
// },
// ];
사용하기 쉬운 형태가 되었네요.
: link : 인용 및 참고
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object
정리
- 1년 이상 자바스크립트 코드를 쓰지 않은 상태
- 머리가 리셋 되었기 때문에 새로운 관점에서 코드를 볼 수 있었습니다. (긍정적)
- 휴가는 좋은 겁니다.
끝까지 읽어 주셔서 감사합니다!
