[Javascript] split(), map(), 람다식 함수

 

 

자바스크립트에서 자주 사용하는 함수들을 정리해보겠습니다.

 

1. split()

문자열을 separator로 잘라서 배열로 저장해주는 함수

 

string.split(separator, limit);

 

위의 형식과 같이 구분자를 기준으로 잘라 'limit' 크기 이하의 배열에 저장하여 리턴합니다.

 

사용예제

 

1. split(" ") 공백별 구분

 

const str = 'The quick brown fox jumps over the lazy dog.';

const words = str.split(" ");
console.log(words[3]);
// Expected output: "fox"

 

2. split("") 문자별 구분

 

const str = 'The quick brown fox jumps over the lazy dog.'

const chars = str.split("");
console.log(chars[8]);
// Expected output: "k"

 

3. split() 파라미터가 없는 경우

 

const str = 'The quick brown fox jumps over the lazy dog.';

const strCopy = str.split();
console.log(strCopy);
// Expected output: Array ["The quick brown fox jumps over the lazy dog."] 구분자 없음

 

4. split(",") 특정 구분자로 자르는 경우

 

const str = 'red,yellow,green,blue';

const str = str.split(",");
console.log(str[0]);
// Expected output: red

 

5. limit 값을 지정 할 경우

 

const str = 'red,yellow,green,blue';

const str = str.split(",", 3);
console.log(str[0]); //red
console.log(str[1]); //yellow
console.log(str[2]); //green
console.log(str[3]); //undefined

//문자열을 ','로 자르면 총 4개의 배열이 되지만, limit 값(3)으로 인해 3개의 배열만 생성

 

출처:
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/split

https://hajoung56.tistory.com/58

 

 

 

2. map()

map()의 기본 원리: 배열 안의 요소들을 1대1로 짝지어주는 것(매핑하는 것)

 

 

사용예제

 

1.주어진 배열을 그대로 매핑할 경우

 

const oneTwoThree = [1, 2, 3];
let result = oneTwoThree.map((v) => {
  console.log(v);
  return v;
});
// 콘솔에는 1, 2, 3이 찍힘
oneTwoThree; // [1, 2, 3]
result; // [1, 2, 3]
oneTwoThree === result; // false

 

2.각 요소에 +1을 할 경우

 

result = oneTwoThree.map((v) => {
  return v + 1;
});
result; // [2, 3, 4]

 

3.함수 안에 조건이 주어질 경우

 

result = oneTwoThree.map((v) => {
  if (v % 2) {
    return '홀수';
  }
  return '짝수';
});
result; // ['홀수', '짝수', '홀수']

 

4.객체 배열에서 map()을 사용할 경우

 

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];

let userFullnames = users.map(function(element){
    return `${element.firstName} ${element.lastName}`;
})

console.log(userFullnames);
// ["Susan Steward", "Daniel Longbottom", "Jacob Black"]

출처:

https://www.zerocho.com/category/JavaScript/post/5acafb05f24445001b8d796d

https://www.freecodecamp.org/korean/news/javascript-map-method/

 

 

 

3. 람다식 (화살표 함수)

 

람다식 함수는 전통적인 함수의 간편한 표현법입니다.

기존의 함수 표현식에서 function 키워드를 지우고,

인자를 받는 매개변수의 괄호()와 코드블럭({}) 사이에 화살표(=>)를 넣습니다. 

 

따라서 람다식의 풀네임은 'arrow function expression 화살 표함수 표현' 입니다. 

 

예시

let func = function(arg1, arg2, ...argN) {
  return expression;
};
 
// 축약버전 : 화살표 함수
let func = (arg1, arg2, ...argN) => expression

 

사용예제

인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수 있습니다.

 

let double = n => n * 2;

 

하지만 인수가 하나도 없을 땐 괄호를 생략할 수 없습니다.

 

// 일반 함수
const foo = function () { console.log("foo") }; // foo
 
// 화살표 함수
const foo = () => console.log("foo"); // foo

 

본문이 여러 줄로 구성되었다면 중괄호를 사용해야 하고, 반드시 return 으로 결과를 반환해야 합니다.

 

let sum = (a, b) => {  // 중괄호는 여러 줄로 구성되어 있음을 알려준다.
  let result = a + b;
  return result; // 반드시 return 지시자로 결과값을 반환해주어야 한다.
};
 
console.log(sum(3, 4)); // 7
 
let sum = (a, b) => a + b; //

출처: https://link2me.tistory.com/2168