JavaScript 배열 메소드

wonkeunC·2021년 3월 19일

JavaScript Map Pop Sort filter find foreach push 메서드 배열

JavaScript

목록 보기

2/15

JavaScript 문법을 어느 정도 파악한 후 프로그래머스를 풀어 보았다.
대부분 level 1에서 주로 사용되는 문법이 반복문과 배열 그리고 객체를 다루고 있었다.

처음에는 for 반복문으로 모든 문제를 해결하려 했지만 이번에는 ES6 문법을 사용하려고 하였다.
아래 사진은 배열 메소드이다.

배열 메소드에 대해서 알아보자!

pop()

: 배열의 마지막 요소를 제거하고, 제거 된 요소가 반환된다.

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop());

// expected output: "tomato"console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]

push()

: 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다.
const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');
console.log(count);
// expected output: 4

console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows"]

Arrow Function

Arrow Function =>

ES6 문법으로 arrow function을 볼 수 있다. 
이는 function을 사용하는 것 보다 간단하게 함수를 사용할 수 있다.

// 일반 함수
var foo = function () { console.log("foo") }; // foo

// 화살표 함수
var bar = () => console.log("bar"); // bar

// 매개변수가 없는 경우
var foo = () => console.log('bar');
foo(); // bar

// 매개변수가 하나인 경우
var foo = x => x;
foo('bar'); // bar

// 매개변수가 여려개인 경우
var foo = (a, b) => a + b; // 간단하게 한줄로 표현할 땐 "{}" 없이 값이 반환됩니다.
foo(1, 2); // 3

var foo = (a, b) => { return a + b }; 
foo(1, 2); // 3

Arrow Function 과 Object 객체

위 코드는 화살표 함수를 이용해 객체 Object를 다루려고 하는 코드이다. 하지만 이는 에러를 출력한다.
이유는 implicit return 이기 때문이다.
implicit return이란 같은 줄에 뭘 적던지 간에 return된다는 뜻이다.
{}에 ()로 감싸면 객체를 return한다.

find()

: find()를 이용하여 배열안에 특정 값 추출하기.

let email = [
    "dbk03053@naver.com",
    "powsa87@naver.com",
    "dchoi1953@gmail.com",
    "nomad@nomadCode.net"
];

let foundMail = email.find(item => item.includes("@gmail.com"));

console.log(foundMail);
// 출력 : dchoi1953@gmail.com

filter()

: 제공된 함수의 조건을 만족한 모든 elements로 새로운 array를 만든다.
때문에 첫번째 element 뿐만이 아니라 모든 element 를 반환한다.
(조건을 통과한 elements 들을 가지고 새로운 배열을 만듬.)
let emails = [
    "dbk03053@naver.com",
    "powsa87@google.com",
    "dchoi1953@gmail.com",
    "nomad@nomadCode.net"
];

let noGmail = emails.filter(item => !item.includes("@gmail.com"));

console.log(noGmail);

forEach()

: forEach는 각 array의 element 마다 제공된 함수를 실행한다.

// 특정 email의 username 만 얻고 싶을 때.

let emails = [
    "dbk03053@naver.com",
    "powsa87@google.com",
    "dchoi1953@gmail.com",
    "nomad@nomadCode.net"
];

emails.forEach(item => {
	console.log(item.split("@"))
});

let box = [];

emails.forEach(item => {
	box.push(item.spilt("@")[0])
});
console.log(box);

Map()

: map()은 forEach와 비슷하지만 반환된 elements들로 새로운 array배열에 넣는다.

let emails = [
    "dbk03053@naver.com",
    "powsa87@google.com",
    "dchoi1953@gmail.com",
    "nomad@nomadCode.net"
];

let result = emails.map(item => item.split("@")[0]);

console.log(result);

map() 으로 객체 Object를 return 하고 싶을때.

let emails = [
    "dbk03053@naver.com",
    "powsa87@google.com",
    "dchoi1953@gmail.com",
    "nomad@nomadCode.net"
];

let result = emails.map(( item, index ) => ({
	username:item.split("@")[0],
        index:index
}));