[JavaScript] 자바 스크립트 기본 함수

 

 

 

 

리스트

let ar = [
    {
        n:'호랑이',
        a: 10,
    },
    {
        n:'코끼리',
        a: 20,
    },
    {
        n:'독수리',
        a: 30,
    }
]

console.log(1);
console.log(ar);
console.log(2);

for(const v of ar){
    console.log(v);
}

// { n: '호랑이', a: 10 }
// { n: '코끼리', a: 20 }
// { n: '독수리', a: 30 }

console.log(3);
console.log(ar);
console.log(4);

 

 

typeof

let ar = [80, 20, 10, 15];
console.log(ar, typeof(ar));

let br = ar.toString();
console.log(br, typeof(br));

let st01 = '80,20,10,15';
console.log(st01, typeof(st01));

// [ 80, 20, 10, 15 ] object
// 80,20,10,15 string
// 80,20,10,15 string

 

• 변수 타입 확인

 

 

push & pop

let ar = [80, 20, 10, 15]

// pop()*  // 원본 데이터가 손상되는 함수라는 의미
let num = ar.pop();
console.log(ar, num);    // [80, 20, 10] 15

// push()*
num = ar.push(20);
console.log(ar, num);    // [80, 20, 10, 20] 4   // size

 

• 원본 데이터가 손상이 되는지 안되는지의 여부가 중요하다.
• push : 배열의 맨 뒤에 값 추가
• pop : 배열의 맨 끝의 값 제거

 

shift & unshift

// shift
let ar = [10, 20, 30]
// shift()*                            // 원본 데이터가 변경된다.
console.log(ar.shift());               // 10
console.log(ar);                       // [20, 30]
console.log(ar.unshift(40));           // 3
console.log(ar);                       // [40, 20, 30]
console.log(ar.unshift(50, 60 ,70));   // 6
console.log(ar);                       // [50, 60, 70, 40, 20, 30]

 

• shift : 배열의 맨 앞에 값 추가
• unshift : 배열의 맨 앞의 값 제거

 

concat

// concat
let ar = [80, 20, 10, 15]
let br = ar.concat(40);
console.log(ar);               // [80, 20, 10, 15]
console.log(br);               // [80, 20, 10, 15, 40]
 
let cr = [40, 50, 60];
let dr = ar.concat(cr);
console.log(dr);               // [80, 20, 10, 15, 40, 50, 60]

 

• 배열에 새로 들어오는 값을 연결시켜서 새로운 배열을 반환

 

join

// join
let ar = ['tiger', 'lion', 'cat'];
console.log(ar.join());
console.log(ar.join(''));
console.log(ar.join(' + '));

// tiger,lion,cat
// tigerlioncat
// tiger + lion + cat

 

• 배열의 모든 요소들을 연결

 

 

sort

// sort
let ar = [52, 273, 103, 32];
function func(a, b) {
    // return (a > b) ? +1 : -1;
    return a - b;
}
ar.sort(func);
console.log(ar);      // [ 32, 52, 103, 273 ]


let ar = [
    {n:30, a:'삼성'},
    {n:20, a:'롯데'},
    {n:10, a:'현대'},
];
function func1(a, b) {
    return a.n - b.n;
}
function func2(a, b) {
    let c = a / 10 + a % 10;
    let d = b / 10 + b % 10;
    return c - d;
}
ar.sort(func1);
console.log(ar);     // [ { n: 10, a: '현대' }, { n: 20, a: '롯데' }, { n: 30, a: '삼성' } ]
ar.sort(func2);
console.log(ar);     // [ { n: 30, a: '삼성' }, { n: 20, a: '롯데' }, { n: 10, a: '현대' } ]

 

• sort : 배열 정렬

 

slice

// slice *                    // 원본 데이터가 변경된다.
let ar = [10, 20, 30, 40, 50, 60];
// s <= x < e
let br = ar.slice(2, 4); 
console.log(br);              // [30, 40]

 

• slice : 배열 자르기
• dictionary 또는 배열의 경우 원본 데이터가 변경된다. (얕은 복사)

 

 

splice

// splice
let ar = [1,2,3];
// [시작 위치, 삭제 항목 수, 추가 항목 ...]
ar.splice(1, 0, 10, 20, 30);
console.log(ar);             // [ 1, 10, 20, 30, 2, 3 ]
ar.splice(1, 2, 88, 99);
console.log(ar);             // [ 1, 88, 99, 30, 2, 3 ]
let br = [66, 55, 44, 33];
ar.splice(0, 0, br);
console.log(ar);             // [ [ 66, 55, 44, 33 ], 1, 88, 99, 30, 2, 3 ]

 

• splice : 삭제할 요소 개수 및 추가할 요소를 받아서 원본 배열 객체를 직접 수정 및 연결

 

indexOf

// indexOf
let ar = ['tiger', 'cat', 'tiger', 'lion', 'apple'];
console.log(ar.indexOf('lion'));         // 3
console.log(ar.indexOf('dog'));          // -1
console.log(ar.indexOf('lion', 3));      // 3
console.log(ar.indexOf('cat', 10));      // -1
console.log(ar.indexOf('tiger'));        // 0
console.log(ar.lastIndexOf('tiger'));    // 2

 

• indexOf : 배열 요소 찾기(검색)

 

every

// every
let ar = [1, 2, 10, 39, 20]
let br = [1, 2, 10, 50, 20]
function func(value) {
    return value < 40;
}
console.log(ar.every(func));             // true
console.log(br.every( v => v < 40));     // false
// 간소화 하기 전
// console.log(br.every(
//     (v) => { return v < 40; }
// ));

 

• every : 배열의 모든 요소가 조건을 만족하는지(true / false) 검사

 

some

// some
let ar = [1, 5, 11, 39, 21];
console.log(ar.some(v => v % 2 ==0));  // false

 

• some : 배열의 요소 중 하나만 조건을 통과하면 true

 

filter

// filter
let ar = [1, 6, 11, 39, 21];
let br = ar.filter( v => v < 15 );
console.log(br);      // [ 1, 6, 11 ]

 

• filter : 조건을 설정하고 그 조건에 맞는 배열 요소만으로 새로운 배열 생성하여 반환

 

reduce

// reduce
// 형태 : array.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값);


// sum (덧셈)
var initialValue = 0;
var sum = [{x: 1}, {x: 2}, {x: 3}].reduce(
    (accumulator, currentValue) => accumulator + currentValue.x, initialValue
); 
console.log(sum);         // 6
 
// concat
var flattened = [[0,1],[2,3],[4,5]].reduce(
    (accumulator, currentValue) => accumulator.concat(currentValue),
    []
);
console.log(flattened);   // [ 0, 1, 2, 3, 4, 5 ]

// 객체 내 인스턴스 값의 개수 세기
var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
var countedNames = names.reduce(function (allNames, name){
    if(name in allNames){
        allNames[name]++;
    }
    else{
        allNames[name] = 1;
    }
    console.log(allNames);
    return allNames;
}, {});
console.log(countedNames); // { Alice: 2, Bob: 1, Tiff: 1, Bruce: 1 }

 

• 초기값을 적어주지 않으면 자동으로 0번째 인덱스 값이 초기값으로 설정
•  sort, every, some, find 등도 reduce로 구현이 가능하다.

 

 

속성으로 객체 분류하기

// 속성으로 객체 분류하기
var people = [
    { name: 'Alice', age: 21 },
    { name: 'Max', age: 20 },
    { name: 'Jane', age: 20 }
];

function groupBy(objectArray, property){
    return objectArray.reduce(function (acc, obj){
        var key = obj[property];
        if(!acc[key]){
            acc[key]=[];
        }
        console.log(acc[key]);
        acc[key].push(obj);
        return acc;
    }, {});
}
var groupedPeople = groupBy(people, 'age');
console.log(groupedPeople);

// []   -> 21 처음 들어옴
// []   -> 20 처음 들어옴
// [ { name: 'Max', age: 20 } ]   -> 20 찾음
// {'20': [ { name: 'Max', age: 20 }, { name: 'Jane', age: 20 } ],
//  '21': [ { name: 'Alice', age: 21 } ]}

 

• objectArray  = list 로, 여기서는 people 리스트이다.
• property = key 로, 여기서는 people 리스트의 age 이다.
• acc 는 누적 리스트이고 obj 는 현재 index의 요소이므로 key(= obj[property]) 는 각 index 의 age 를 의미한다.
• 리스트를 인덱스별로 하나씩 접근할 때 누적 리스트에 현재 인덱스의 age 값과 같은 값이 없으면 [] 를 반환하고 push 한다.

 

 

스프레드 확장 연산자와 초기값을 이용하여 객체로 이루어진 배열에 담긴 배열을 연결하기

// 스프레드 확장 연산자와 초기값을 이용하여 객체로 이루어진 배열에 담긴 배열을 연결하기
var friends = [{
    name: 'Anna',
    books: ['Bible', 'Harry Potter'],
    age: 21
},{
    name: 'Bob',
    books: ['War and peace', 'Romeo and Juliet'],
    age: 26
},{
    name: 'Alice',
    books: ['The Lord of the Rings', 'The Shining'],
    age: 18
}];

var allbooks = friends.reduce(function(accumulator, currentValue){
    return [...accumulator, ...currentValue.books];
}, ['Alphabet']);

console.log(allbooks);


//[
//  'Alphabet',
//  'Bible',
//  'Harry Potter',
//  'War and peace',
//  'Romeo and Juliet',
//  'The Lord of the Rings',
//  'The Shining'
//]

 

• ...currentValue.books : friends 리스트에서 각 인덱스의 books 요소를 개별 요소로 가져와서 다 더하여 allbooks 에 반환한다.

 

* 스프레드 연산자

// Spread 연산자
const ar = [1, 2, 3, 4, 5];
console.log(ar);              // [ 1, 2, 3, 4, 5 ]
console.log(...ar);           // 1, 2, 3, 4, 5

• 스프레드 연산자는 배열 요소가 개별적인 요소로 반환된다.

 

배열의 중복 제거

// 배열의 중복 제거
let ar = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
let result = ar.sort().reduce((accumulator, current) => {
    const length = accumulator.length;
    console.log("accumulator: " + accumulator);
    console.log("current: " + current);
    console.log("length: " + length);
    if (length === 0 || accumulator[length - 1] !== current) {
        accumulator.push(current);
    }
    return accumulator;
}, []);
console.log(result); // [ 1, 2, 3, 4, 5 ]

 

• 누적 리스트 길이가 0 (=첫 입력) 이거나 현재 index의 요소값과 그 전 요소 값이 다르면 push 하고, 같으면 중복이므로 push 하지 않는다.
• sort() 함수로 ar 배열이 이미 오름차순으로 정렬된 상태이기 때문에 가능하다.

 

 

// map 예제
let result = total.reduce((acc, cur) => {
    acc.push(cur % 2 ? '홀수':'짝수');
    return acc;
}, []);
console.log(result);    // [ '홀수', '짝수', '홀수' ]

 

• reduce 를 사용하는 경우 초기값을 배열로 만들고 push 하면 map 과 같아진다.

 

// filter 예제
let total = [1, 2, 3];
let result = total.reduce((acc, cur) => {
    if(cur % 2 !== 0) { acc.push(cur); }
    return acc;
}, []);
console.log(result);    // [ 1, 3 ]

 

• reduce 를 사용하는 경우 조건부로 push 하면 filter 와 같아진다.

 

 

예제

객체 배열 중 property 값으로 나이 max, min 구하기

// age 최대, 최소값 구하기
var people = [
    { name: 'Alice', age: 25 },
    { name: 'Max', age: 23 },
    { name: 'Jane', age: 21 },
];

var max = people.reduce(
    (max, current) => {
        return current.age >= max.age ? current : max;
    }, people[0]
)

var min = people.reduce(
    (min, current) => {
        return current.age < min.age ? current : min;
    }, people[0]
)
console.log("max: ", max); // max:  { name: 'Alice', age: 25 }
console.log("min: ", min); // min:  { name: 'Jane', age: 21 }

 

• people의 age 값 최대 최소 구하기
• min, max 구하는 공식은 어렵지 않은데 초기값 설정이 중요하다.
• 초기값을 0 으로 잡아줄 경우 min 의 경우에 return 0 이 되어버리기 때문에 데이터 값 비교를 할 때 0 이 아닌 첫 번째 인덱스의 값과 비교하도록 초기값을 people[0] 으로 잡아주고 people[0].age 로 꺼내 사용하였다.

 

 

 

 

 

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Array.prototype.reduce() - JavaScript | MDN

 

 

 

 

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."