[TIL Vanilla JS] ES6 함수

TIL 날짜 : 2021-09-14 (화)

삼항연산자

if문을 사용한 조건식

const data = [1,2];

if (data.length === 0){
    console.log('빈 배열입니다.')
else{
    console.log('배열이 차있습니다')
}

삼항연산자를 사용한 조건식

data.length === 0 ? console.log('빈 배열'):console.log('배열이 차있음');

-> if문보다 간결하게 조건식을 쓸 수 있습니다.

Push

const dataA = [1,2,3];
dataA.push(5,'abc')
console.log(dataA);

result

(5) [1, 2, 3, 5, 'abc']

배열 마지막 순서에 데이터를 추가합니다.

pop

const dataB = [1,2,3];
console.log(dataB.pop());
console.log(dataB);

result

3

배열 마지막 순서의 데이터를 가져옵니다.

shift

const dataC = [1,2,3];
dataC.shift();
console.log(dataC);

result

(2) [2, 3]

배열의 첫번째 아이템을 삭제하고 뒤에 있는 아이템들을 앞으로 당깁니다.

concat

const dataTest01 = [1,2];
const dataTest02 = ['dave',3];
const dataTest03 = dataTest01.concat(dataTest02);
console.log(dataTest03)

result

(4) [1, 2, 'dave', 3]

배열 2개를 서로 합칩니다.

join

const dataD = [1,2,3,4,5,6];
let dataD02 = dataD.join('-');
console.log(dataD02);

result

1-2-3-4-5-6

아이템 사이에 특정 문자열 (+ , - , * , /) 등을 넣어서 배열을 연결합니다.
참고링크 : https://mainia.tistory.com/4266

reverse

const dataE = [1,2,3,4,5,6];
dataE.reverse();
console.log(dataE);

result

(6) [6, 5, 4, 3, 2, 1]

배열의 순서를 역순으로 변경합니다.

slice

const dataF = [1,2,3,4,5,6];
let dataF02 = dataF.slice(3,6);
console.log(dataF02);

result

(3) [4, 5, 6]

~ 부터 ~ 까지 배열의 일부분을 반환합니다.

slice , splice?

slice 함수는 배열의 일부분을 반환하는 함수이고, splice는 배열 안에 있는 특정 아이템을 삭제 시키는 함수로, 서로 비슷한 특징 때문에 쉽게 헷갈릴 수 있습니다.

forEach

const dataG = [1,2,3,4,5,6];
dataG.forEach(item =>{
    console.log(item);
});

result

1
2
3
4
5
6

for문을 대체해서 간단히 배열의 각 아이템을 가져올 수 있습니다.
참고링크 : https://meanbymin.tistory.com/57

map

const dataH = [1,2,3,4,5,6];
const dataH02 = dataH.map(item => item * 2)
console.log(dataH02);

result

(6) [2, 4, 6, 8, 10, 12]

참고링크 : https://mjn5027.tistory.com/80

indexOf

const dataIdx = [1,2,'dave',6];
console.log(dataIdx.indexOf('dave'));

result

2

해당 데이터의 인덱스 번호를 찾을 수 있습니다.

findIndex

const myArray = [
    {
        id: 1,
        name: 'dave lee'
    },
    {
        id: 2,
        name: 'Alex'
    }
];
console.log(myArray.findIndex(item => item.name === 'Alex'));

result

1

배열의 아이템이 객체일경우, 특정위치의 데이터 인덱스 번호를 찾을 수 있습니다.

find

console.log(myArray.find(item => item.name === 'Alex'));

result

{id: 2, name: 'Alex'}

인덱스 번호가 아닌 객체 자체를 가져오고 싶을 때는 find 함수를 사용합니다.

filter

let myArraySecond = [1,2,3,4,5,6,7,8,9,10];
let even = myArraySecond.filter(item => item % 2 === 0);
console.log(even);

result

(5) [2, 4, 6, 8, 10]

배열에서 특정 조건에 맞는 아이템만 추출할 수 있습니다.