5.Arrays

forEach : 배열 내부의 value들을 각각 대입하여 작동합니다.

const userList = ["user01", "user02"];

function printUserList( list ) {
    userList.forEach((element) => console.log(element));
}

printUserList(userList); //user01 user02

 

길이값 얻기 :  array.length;

배열에 값 추가: array.push(넣을 값);

console.log("userList 길이:" + userList.length); //userList 길이:2
userList.push("user03");
console.log(userList); //[ 'user01', 'user02', 'user03' ]

 

filter : 원하는 값들만 걸러서 배열에 넣을 수 있습니다.

const numbers = [1, 2, 3, 4, 5];

function filtering( numbers ) {
    const filteredNumbers = numbers.filter( (element) => { 
        return element < 3}
    ); // 값이 3이하인 것들만 넣는다.
    return filteredNumbers
}

console.log(filtering(numbers)); //[ 1, 2 ]

 

find: 첫번째로 조건에 부합되는 값 하나를 반환합니다. 조건에 부합되는 값이 없을 시 undefined가 반환됩니다.

const numbers2 = [9, 5, 14, 3, 11];
const numbers3 = [9, 8, 7, 6];

const largerThan10 = (numbers) => {
    return numbers.find(function(number) {
        return number >= 10;
    });
}

console.log(largerThan10(numbers2)); //14
console.log(largerThan10(numbers3)); //undefined

 

filter() 와 find()의 차이점

filter는 항상 배열을 반환하고 find는 조건에 부합되는 값 하나를 리턴합니다.

const numbers2 = [9, 5, 14, 3, 11];
const numbers3 = [9, 8, 7, 6];

const largerThan10 = (numbers) => {
    return numbers.find(function(number) {
        return number >= 10;
    });
}

const largerThan10s = (numbers) => {
    return numbers.filter(function(number) {
        return number >= 10;
    });
}

console.log(largerThan10(numbers2)); //14
console.log(largerThan10(numbers3)); //undefined
console.log(largerThan10s(numbers2)); //[ 14, 11 ]

 

map() : 새로운 배열을 생성하여 반환합니다.

const arr = [1, 2, 3, 4, 5];

const modifyNumber = (numbers) => {
    return numbers.map((number) => {
        return number * 2
    });
}

console.log(modifyNumber(arr)); //[ 2, 4, 6, 8, 10 ]


//map 예시 2
const users = [{
    id: 1,
    name: "Sam Doe"
}, {
    id: 2,
    name: "Alex Blue"
}];

const html = `<ul>
    ${users.map(user => `<li>${user.name}</li>`).join("")}
    </ul>`;
const html2 = `<ul>
    ${users.map(user => `<li>${user.name}</li>`).join()}
    </ul>`;
console.log(html); // <ul> <li>Sam Doe</li><li>Alex Blue</li> </ul>

//>>join 구분자에 ""를 넣어주지 않으면 default값인 ,로 string이 된다.
console.log(html2);// <ul> <li>Sam Doe</li>,<li>Alex Blue</li> </ul>

 

includes(찾을 값) : 찾을 값을 포함하고 있는지 여부를 boolean으로 반환합니다.

const groceries = ["Apple", "Peach", "Tomato"];

console.log(groceries.includes("Tomato")); // true
console.log(groceries.includes("Bread")); // false

 

join("구분자") : 배열을 구분자로 연결한 문자열로 반환합니다.

const groceries = ["Apple", "Peach", "Tomato"];

console.log(groceries.join()); // Apple,Peach,Tomato >> default = ","
console.log(groceries.join("; ")); // "Apple; Peach; Tomato"
console.log(groceries.join(" . ")); // "Apple . Peach . Tomato")

알아두면 좋은 함수

.every(param => 조건) :  배열의 모든 값의 조건 충족여부 조회하여 boolean으로 리턴합니다.

.some(param => 조건) : 배열의 값중 하나라도 조건 충족여부를 조회하여 boolean으로 리턴합니다.

const numbers = [1, 2, 3, 4, 5];

const someOver3 = numbers.some(number => number >= 3);
const everyOver3 = numbers.every(number => number >= 3);

console.log(someOver3, everyOver3); //true false

 

.splice(시작위치, 종료위치) : 기존배열에서 시작~종료위치 만큼 값을 꺼내어 새로운 배열을 반환합니다.

기존배열에서 꺼내진 값은 삭제됩니다.

const items = ["item1", "item2", "item3"];
const deletedItem = items.splice(1, 2); //splice(시작위치, 종료위치);

console.log(items); //[ 'item1' ]
console.log(deletedItem); //[ 'item2', 'item3' ]

.reduce(reducer, 시작값): 배열의 값들을 연산해 하나의 값으로 리턴합니다.

forEach와의 차이점은 reduce는 결과값을 return 할 수 있고 forEach는 결과값을 return 할 수 없습니다.

const numbers = [1, 2, 3, 4, 5];

const reducedNumbers = numbers.reduce((total, current) => {
    return total+ current;
}, 0);

//-------------------------------------------------------------------------------

let sum = 0
const forEachSum = numbers.forEach(number => {
    return sum += number;
})

console.log(forEachSum); //undefined
console.log(reducedNumbers); //15