자바스크립트 유용한 함수들

 

1. map 함수

배열 각각의 요소를 순회하면서 각 요소에 대해 코드를 시행할 수 있다. 배열에 대해 for문 같은 역할을 할 수 있다.

continue, break가 필요할 때는 for문을 사용하고, 이미 있는 배열은 map을 사용.

let A = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

A.map(v => v * 2).       //배열 A를 순회하면서 시행함.

let rs = A.map((v) => v * 2);        // 반환하는 값을 새로운 변수에 넣을 수 있다.

 

map 함수는 리턴값을 쓸 수 있어서 위와 같이 결과값을 변수에 넣을 수 있다. 즉, 깊은 복사를 할 수 있다.

이차원배열을 깊은 복사하려면 모든 배열이 풀려야 한다. 배열이 안에 있는 채로 배열을 복사하면 얕은복사가 된다.

let A = [[1,2,3], [4,5,6], [2,4,6]];

let B = A.map(v => v.map(w => w))      // 2차원 배열 풀어서 B에 넣기

주의할 것은 화살표 함수를 사용할 때 중괄호를 안쓰면 리턴을 안써도 되지만, 중괄호를 썼으면 return 을 써야한다.

 

---

2. forEach 함수

forEach 함수는 배열 각각의 요소를 순회하면서 각 요소에 대해 코드를 시행하는 map 함수와 비슷한 기능을 한다.

map 함수와 forEach 함수의 차이점은 forEach 함수에는 리턴값이 없다는 것이다.

forEach의 결과를 변수에 넣을 수 없다.

let A = [1,2,3,4,5,6,7,8,9,10];

A.forEach(v => {console.log(v * 2)});     // v 는 임의의 변수이다.

let B = [];

A.forEach(v => {B.push(v * 2)});

 

반환할 필요가 없으면 forEach가 더 유용하다.

let tmp = {
    name:'aa',
    age:10,
}

Object.keys(tmp).forEach(
	key => {console.log(tmp[key])}
)

 

---

3. filter 함수

let A = [1,2,3,4,5,6,7,8,9,10];

A.filter(v => v % 2 ==0);            // [2, 4, 6, 8, 10]

A.filter((v,i) => i % 2 ==0)         //[1, 3, 5, 7, 9]

배열.filter( 조건 ) : 조건이 참인 것만 남고, 거짓인 것은 걸러진다.

filter함수에서도 첫번째 인자는 요소, 두번째 인자는 인덱스가 된다.

 

---

4. reduce 함수

배열의 요소 2개(인덱스 0, 인덱스 1)를 가져와서 코드를 계산하고, 그 값을 a에 넣고 다음 요소(인덱스 2)를 b에 가져오고 코드를 반복한다.

A = [1,2,3,4,5,6,7,8,9,10];

A.reduce((a,b) => a+b);          //55

reduce는 인자를 2개 줘야한다.

A.reduce((a,b) => a+b, 5);     // 뒤에 초기값을 넣으면 처음 a에 그 값이 들어간다.

 

---

 

5. 형변환

let A = '100'

let B = A + 1            //'1001'. 문자열에 +를 사용하면 디폴트는 문자열.

1. 문자열 -> 숫자

① parseInt() : 문자열을 정수로 변환

② parseFloat() : 문자열을 실수로 변환

 

2. Number() : 데이터 타입을 숫자로 형변환.

let A = ['1','2','3','4','5']

console.log(...A.map(v => Number(v)));        // 배열에 든 문자열을 숫자로 형변환

console.log(Number(true));                    // boolean인 true를 숫자로 형변환

console.log(Number(A));                     // 배열 A를 형변환하면 NaN값이 나옴

console.log(typeof(Number(A)));              // 하지만 typeof를 해보면 number가 나온다.

 

3. 배열을 객체로 만들기

let A = ['Elice','Timer','A','B'];
A.map(v => {
    return {
        name:v
    }
})

let B = A.map( (v,i) => {          // 첫번째는 요소, 두번째는 인덱스로 정해져있음.
    return {
        name:v,
        index:i
    }
})

 

4. 숫자를 진법으로 변환

let A = 10;

A.toString(2);   // 2진법으로 바꿔줌.

 

---

6. split 함수

  : 해당 문자열을 기준으로 나눠서 배열에 넣음.

str = '<h1>안녕하세요</h1><div>반갑</div>'

str.split('>').map((tag, i) => {
    if(i==1) return tag.split('<')[0];
    else if(i==3) return tag.split('<')[0];
})

배열.join('') => 배열을 쉼표없이 붙여서 출력가능.

 

---

7. indexOf 함수

문자열이나 배열 중 특정 문자의 인덱스를 반환하는 메서드.

indexOf( 문자열 ) : 없으면 -1을 반환한다. 있으면 인덱스를 반환한다.

includes( 문자열 ) : 있으면 true, 없으면 false를 반환. 위치는 반환안함.

let A = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

console.log(A.indexOf(5));    // 4

console.log(A.indexOf(0));    // -1

console.log(A.includes(5));   // true

let B = 'hello world';

console.log(B.includes('o'));    // true

 

---

8.  ...  스프레드 연산자

...array 는 array 배열의 값을 배열형태가 아니라 펼쳐서 출력한다.

let A = [1, 2, 3, 4, 5];

let B = [6, 7, 8];

let C = [...A, ...B];      // A.concat(B) 와 같음

객체에도 적용할 수 있다.

let student = {
    name: 'elice',
    lang: ['C', 'Python', 'JavaScrript']
}

let temp = {
    company: 'Elice'
}

let newObj = {                  // student, temp 두 객체를 합쳐준다.
    ...student,
    ...temp,
}

 

스프레드 연산자를 사용하여 배열이나 객체를 복사하면 깊은 복사가 가능하다.