JS 배열 (PurpleCode Study)

김지원·2020년 10월 26일
JavaScriptMapSpreadfilterforeachreduce배열비구조화 할당
0

JavaScript

목록 보기
1/21

//2020.10.26 배열 강의

배열 선언

const arr1 new Array(1,2,3);
const arr2 =[1,2,3]

간단한 수정 추가
const array = [1,2,3,4,5];
array[0] = 0; //수정
array[5] = 6; //추가

요소의 갯수 확인
console.log(array.length);

배열 추가, 삭제

자료구조

  • stack

    • pop(): 배열 끝 요소를 제거하고, 제거한 요소를 반환함.
    • push(): 배열 끝에 요소를 추가함.

  • queue (사용 잘 안됨)

    • shift(): 배열 앞 요소를 제거하고, 제거한 요소를 반환함.
    • unshift(): 배열 앞에 요소를 추가함.

EX)

const student =["김지원", "이성현", "송현주"];

student.push("이재준"); //추가
student.pop(); //마지막 인자가 나감 "송현주"
console.log(student); //["이재준","김지원","이성현"]

backend에서 초기화 하는 api 호출: 결과 값 ["김지원", "이성현", "송현주"]
front-end에서 state: ["김지원","이성현","송현주"]
추가 api 호출 ["이재준"]
DB저장 성공 시 "이재준" 반환
state.push(res.data);

forEach

  • forEach 어떤 작업을 반환을 하지 않음
  • 순회를 하는 내장 함수
  • 반복은 하되 반환을 하지 않을 때 사용

EX 1)

const students =["김지원", "이성현", "송현주"];`
for(let i=0;i<students.length; i++){
    console.log(students[i]);
}

students.forEach(value, index, array)=>{
    console.log("value: "+ value);
    console.log("index: "+ index);
    console.log("array: "+ array);
}

EX 2) 배열 콘텐츠 출력

function logArrayElements(element, index, array) {
  console.log('a[' + index + '] = ' + element);
}

// 인덱스 2는 배열의 그 위치에 항목이 없기에
// 건너뜀을 주의하세요.
[2, 5, , 9].forEach(logArrayElements);
// 기록:
// a[0] = 2
// a[1] = 5
// a[3] = 9

EX 3) "one", "two", "four"를 기록합니다.
forEach()는 반복 전에 배열의 복사본을 만들지 않습니다.

let words = ['one', 'two', 'three', 'four']
words.forEach(function(word) {
  console.log(word)
  if (word === 'two') {
    words.shift()
  }
})
// one
// two
// four

EX 4)

const foodList=[
    {
        name:"떡볶이",
        flavor:"spicy",
    },
    {
        name:"치킨",
        flavor:"fatty"
    },
    {
        name:"초콜릿",
        flavor:"sweet"
    },
    {
        name:"레몬",
        flavor:"sour"
    }
];

const wantFlavor="sweet";

foodList.forEach((value)=> {
 if(wantFlavor === value.flavor){
     console.log("추천:"+value.name);
 }
})

cf )

const forEach = (callback) => {
    for() {
        callback()
    }
}
students.forEach(student => console.log(student));

map

진짜 많이 사용됨 중요 ***

  • 새로운 배열을 반환함
  • map 함수는 기존의 배열을 callbackFunction에 의해 새 배열을 만드는 함수이다. 그러니 기존의 배열이 변하지는 않는다.

EX 1)

const students =["이재준", "송현주", "이성현", "김지원"];

const newArray = stduents.map(student => student + "님");

console.log(newArray);
//["이재준님", "송현주님", "이성현님", "김지원님"]

EX 2)

const list =["1. 개요", "2. 자바스크립트 시작하기", "3.코드 구조", "4. 변수"];
//<li></li>에 다 넣어짐 
const items = list.map(item => `<li>{item}</li>`);
//forEach는 출력밖에 안됨
console.log(items);
//`<li>1. 개요</li>`
//`<li>2. 자바스크립트 시작하기</li>`
//`<li>3. 코드 구조</li>`
//`<li>4. 변수</li>`

EX 3) 섭씨 온도를 화씨 온도로 바꾸기

let celsius = [-15, -5, 0, 10, 16, 20, 24, 32]
let fahrenheit = celsius.map(t => t * 1.8 + 32);
// fahrenheit is [5, 23, 32, 50, 60.8, 68, 75.2, 89.6]

문제

100보다 크거나 같으면 true를 100보다 작으면 false로 변경하여 새로운 배열을 return 하세요

const arr = [100,9,30,7];
const moreThan100 = (x)=> x.map(number => {
        if(number>=100)
            return true;
        else
            return false;
    } )

console.log(moreThan100(arr));

indexOf

const menu = [
    '카페라떼',
    '아이스아메리카노',
    '자몽에이드',
    '쌍화차',
    '초콜릿플레치노'
]

const removeFunc = (array, menuName)=>{
    const index = array.indexOf(menuName);
    array.splice(index,1);
    console.log("남은메뉴는 "+array);
}

removeFunc(menu,'자몽에이드');

비구조화 할당

  • 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언해 줄 수 있다.
const puppy = {
    name:"쪼꼬",
    color:"brown"
}

const { name, color } = puppy;

console.log(name, color);
//쪼꼬 brown

함수의 파라미터에서도 비구조화 할당을 할 수 있다.

var puppy = {
    name:"쪼꼬",
    color:"brown"
}


const change = ({name, color}) =>{
    name = "두부";
    color = "하양색";
};

//비구조화 할당 안하면
const change2 = (obj) =>{
    obj.name="두부";
    obj.color="하양색";
}

const test = (obj) => {
    console.log(obj.name, obj.color);
};

change(puppy);
//안바뀜....ㅠㅠ
test(puppy);

findIndex, find

  • 원소가 배열 또는 객체일 경우에는 indexOf로는 찾을 수 없습니다.
  • 그럴때 사용하는 것이 바로 findIndex입니다.
    EX 1)
const menu = [
    {
        id:1,
        name:"카페라떼",
    },
    {
        id:2,
        name:"아이스아메리카노"
    },
    {
        id:3,
        name:"자몽에이드"
    }
]

const removeMenu = (array, menuName)=>{
    const index = array.findIndex( ({name}) => name === menuName);
    array.splice(index,1);
    console.log("남은메뉴는 "+array);
};
 const findMenu  = (array) =>{
    const first_Menu = array.find(({id})=> id === 1);
    console.log(first_Menu);
 };
removeMenu(menu,'자몽에이드');
//error :(  [object Object],[object Object] 나옴

findMenu(menu);

filter

중요 ***

  • select의 where절 같은 것
  • 특정 조건을 만족하는 값 추출하여 새로운 배열 만드는 함수
const students =[
    {
        id:1,
        name:"이재준",
        age:23,
        skill:"full-stack"
    },
    {
        id:2,
        name:"김내림",
        age:22,
        skill:"front-end"

    }
];

`//front-end 만 출력해주고 싶다.`

const frontStudents = students.filter(({skill}) => skill === "front-end");

console.log(frontStudents);
//[{ id: 2, name: '김내림', age: 22, skill: 'front-end' }]

데이터를 삭제할때 사용됨
backend에 student 이재준을 삭제해라..!
DB에서 이재준을 삭제함. 그리고 삭제가 완료하면 이재준의 ID를 반환해줌 =>1
frontend에서는 id 값을 받아옴
= 1이라는 값

const state =[
    {
        id:1,
        name:"이재준",
        age:23,
        skill:"full-stack"
    },
    {
        id:2,
        name:"김내림",
        age:22,
        skill:"front-end"

    }
];

 state = state.filter(student => student.id !==1);
//상태에서 id가 1인것 삭제 
 console.log(state);

splice

  • 어떤 항목들을 제거 할때 사용
    stduents.splice(0,1)
    어떤 인덱스부터 지울지, 몇개 지울지

slice

  • 두개로 쪼개줌

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

const sliceNumbers = numbers.slice(0,2); //[1,2]

concat

  • 두가지 배열 하나의 배열로 합쳐준다.

const arr1 = [1,2];
const arr2 = [3,4];

const mergeArr = arr1.concat(arr2);

spread 연산자 사용해서 배열 합치기

const mergeArr = [...arr1, ...arr2];

배열의 엘리먼트를 함수의 인수로 사용하고자 할때 apply() 를 사용하였다.

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction.apply(null, args);

spread 연산자 사용하면

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);
function myFunction(v, w, x, y, z) { }
var args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);

간결해진 배열 합치기

var parts = ['shoulders', 'knees']; 
var lyrics = ['head', ...parts, 'and', 'toes']; 
// ["head", "shoulders", "knees", "and", "toes"]

배열 복사

var arr = [1, 2, 3];
var arr2 = [...arr]; // arr.slice() 와 유사
arr2.push(4); 

// arr2 은 [1, 2, 3, 4] 이 됨
// arr 은 영향을 받지 않고 남아 있음

join

  • 배열 안의 값들을 문자열 형태로 합쳐주는 함수
  • 파라미터로는 구분자를 넣어주면 되고, 넣지 않으면 기본값인 쉼표로 설정된다.

EX)
명시된 키와 함께 읽기 가능한 string 으로 유저 테이블 출력

let users = [
  { id: 11, name: 'Adam', age: 23, group: 'editor' },
  { id: 47, name: 'John', age: 28, group: 'admin' },
  { id: 85, name: 'William', age: 34, group: 'editor' },
  { id: 97, name: 'Oliver', age: 28, group: 'admin' }
];
users.map(({id, age, group}) => `${id} ${age} ${group} `).join('')
// it returns:
11 23 editor 47 28 admin 85 34 editor 97 28 admin

reduce ***

EX 1) sum 구하기 예제

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

let sum =0;

//forEach 사용시
numbers.forEach(num => (sum += num));

//reduce 사용시
let sum = numbers.reduce((prev,curr) => {
    console.log(prev,curr);
    return prev + curr;
}, 0);

//0은 초기값 안적어주면 기본값은 첫번째 원소
//curr은 배열의 현재 값
//0 1  return 된 0+1이 prev로 들어감
//1 2
//3 3
//6 4

EX 2) 평균 구하기

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

const avg = numbers.reduce((prev,curr,index,array)=>{
    console.log(prev,curr,index,array);
    if(index === array.length-1){
        return(prev+curr)/array.length;
    }
    return prev+curr;
});
//1 2 1
//3 3 2
//6 4 3 
//2.5

//리턴된 값이 prev
//curr은 배열값
console.log(avg);

문제

100보다 크거나 같으면 true를 100보다 작으면 false로 변경하여 새로운 배열을 return 하세요!

const arr = [100,9,30,7];
const newArray=[];
const moreThan100 = (x)=> x.reduce((prev, curr) => {
        if(curr>=100)
            newArray.push(true);
        else
            newArray.push(false);
    },0)

moreThan100(arr);
console.log(newArray);

배열의 구조분해

const students=["이재준","김내림","이성현"];

//변수 이름 맘대로 
//배열이니까 순서가 중요
const [a,b] = students;

console.log(a); //"이재준"

console.log(b)//"김내림"

퀴즈

숫자 배열이 주어졌을 때 10보다 큰 숫자의 갯수를 반환하는 함수를 만들어보세요!

forEach

function countBiggerThanTen(numbers){
    let count = 0;
    numbers.forEach(number => {
        if(number>10)
            count++;
    })
   return count;
}

const count = countBiggerThanTen([1,2,3,5,10,20,30,40,50,60]);
console.log(count);//5

filter
Q. =>이후에 {} 넣으면 왜 안되징..?

function countBiggerThanTen(numbers){
    const num = numbers.filter(number => 
        number > 10
    );
    return num.length
}
const count = countBiggerThanTen([1,2,3,5,10,20,30,40,50,60]);
console.log(count);//5

reduce

function countBiggerThanTen(numbers){
    return numbers.reduce((prev,curr)=>{
        if(curr>10){
            return prev+1;
        }
        return prev;
    },0);
}
const count = countBiggerThanTen([1,2,3,5,10,20,30,40,50,60]);
console.log(count);//5

코드 실행시키는 법

cd 디렉토리명
node 파일명
ex) >cd Purple_study > node array_qz

const와 let와 var

var

// 이미 만들어진 변수이름으로 재선언했는데 
//아무런 문제가 발생하지 않는다.
var a = 'test'
var a = 'test2'
  • let, const는 var와 다르게 변수 재선언 불가능이다.
  • let은 변수에 재할당이 가능하지만,
  • const는 변수 재할당이 불가능하다.
profile
김지원
다음 포스트

JS 변수, 연산자 (PurpleCode Study)

0개의 댓글