[JS] 배열

곤·2022년 10월 5일
JavaScript
0

JavaScript

목록 보기
5/25

22.10.05.수

배열

대괄호를 이용해 여러 개의 값을 리스트 형태로 나열한 자료구조
원시 타입은 한번에 한 데이터 but 배열은 쉼표를 기준으로 한번에 여러 데이터를 저장할 수 있는 집합
원시 타입은 값 자체를 복사해서 저장한다 const에서 수정할 수 없지만 객체자료형일 경우 값이 저장된 주소를 저장 ?? 그 주소 값은 변경가능

요소, 원자, 원소(element) :
[] 배열 안을 구성하는 각각의 값 (여러 자료형이 들어갈 수 있다)
인덱스(index) :
열에서 요소의 위치, 각 값이 가지는 번호
다수의 메소드를 통해 값에 접근한다

특징
1. 요소 값 수정 가능, 인덱스로 요소의 값을 호출
2. JavaScript의 배열은 배열 타입으로 존재하지 않고 객체 타입으로 존재
3. 값의 참조가 인덱스로 이루어짐

배열 방법
일반적 []
let fish = ["정어리", "고등어", "참치"]
배열안 배열 ([].[])
let fruit = (["메론", "수박"], ["포도", "체리"]);
키와 value가 있을때 {}
let myobj = { val1: 10, val2: 30 }

배열의 생성자 함수
let myarray = []; 쏘 간단!
let myArray = new Array(5);
let myArray2 = new Array(5,3,2);

myArray2[0] // 3
인덱스로 값 접근 가능하고 값도 바꿀 수 있다
중간에 값이 비어있는 배열도 만들 수 있고 접근도 가능하다 (undefined)
"hello"[2];
문자열도 값에 접근할 수 있지만 값을 바꿀 순 없다 (불변성 immutable)
console.log([1,2,3,4][2]);

리터럴? 변수에 할당되기 전의 값!
{} 객체 리터럴 (객체 키, 값의 쌍을 프로퍼티라고 부른다)
[] 배열 리터럴 (배열의 크기는 .length로 알 수 있다)
"hello" 문자열의 리터럴
1234 숫자의 리터럴

프로토타입
1. prototype이 안붙은 애들은 Array라는 키워드를 그대로 사용해야 함.
ex ) Array.isArray(), Array.of() 와 같이 사용
2. prototype이 붙은 애들은 Array라는 키워드를 그대로 사용할 필요가 없음.
ex ) myArr.length, myArr.sort() 와 같이 사용
우리가 오늘 배운, 정리할 대부분의 메소드는 prototype에 속한다.

요소 값 호출, 변경, 타입 확인

  • 값 호출
const cafe = ['coffee', 'cake', 'tea', 'cookie']
console.log(cafe[0]) 
// coffee
  • 값 변경
const cafe = ['coffee', 'cake', 'tea', 'cookie']
cafe[0] = 'tea'
console.log(cafe)
// ['tea', 'cake', 'tea', 'cookie']
  • 값 타입 확인
const cafe = ['coffee', 'cake', 'tea', 'cookie']
typeof cafe
typeof(cafe)
// object
  • 프로퍼티 length
    프로퍼티 : 속성 값
    메소드 : 기능 단위
const cafe = [ 'coffee', 'cake' ]
cafe.length 
// 2

메소드

unshift() : 맨 앞에 요소 추가 <-> push() : 맨 뒤에 요소 추가

const cafe = ['coffee', 'cake', 'tea']
const count = cafe.unshift('bread');
console.log(cafe); 
// (4) ['bread', 'coffee', 'cake', 'tea']
console.log(count); 
// 4

unshift에서 반환하는 것은 배열의 길이
"반환한다"는 것은 값을 뽑아낸다, 값을 넘겨준다는 의미

const cafe = ['coffee', 'cake', 'tea', 'cookie']
cafe.push('bread')
console.log(cafe); 
// (4) ['cake', 'tea', 'cookie', 'bread']

shift() : 맨 앞 요소 삭제 <-> pop() : 맨 뒤 요소 삭제

const cafe = ['coffee', 'cake', 'tea']
cafe.shift();
console.log(cafe); 
// (2) ['cake', 'tea']
const cafe = ['coffee', 'cake', 'tea', 'cookie']
cafe.pop()
console.log(cafe); 
// (3) ['coffee', 'cake', 'tea']

splice() : 특정 요소 위치 시키기 삭제하기

배열.splice(요소를 위치시키고 싶은 인덱스, 제거할 요소 개수, 배열에 추가할 요소)

cafe.splice(1,1,'bread');
console.log(cafe); 
// (3) ['coffee', 'bread', 'tea']

음수는 끝 0부터 세기

cafe.splice(-1,0,'cookie'); 
console.log(cafe); 
// (4) ['coffee', 'bread', 'cookie', 'tea']

slice() : 배열 일부분을 잘라내서 새로운 배열로 반환

.slice(잘라낼 배열의 시작점의 인덱스, 잘라낼 배열의 종료지점 인덱스)

const cafe2 = ["coffee", "cake", "tea", "cookie"]
cafe2.slice(1,3);
// (3) ['cake', 'tea', 'cookie']
const cafe2 = ["coffee", "cake", "tea", "cookie"]
const cafe3 = cafe2.slice(1,3);
console.log(cafe3);
instrument.ts:113 (2) ['cake', 'tea']

문제 : 물고기가 아닌 것 slice로 출력하기

let fish = ["정어리","고등어","돌고래","참치","고래상어","코끼리"]
fish.slice(2,3); 
// ['돌고래']
fish.slice(5); 
// ['코끼리']

reverse() : 순서 거꾸로 (많이 씀!) -> 원본 배열 변형시킨다

const cafe3 = ["coffee", "cake", "tea", "cookie"]
cafe3.reverse();
console.log(cafe3); 
// (4) ['cookie', 'tea', 'cake', 'coffee']

indexOf() : 요소의 인덱스 찾고 싶을 때

const cafe4 = ["coffee", "cake", "tea", "cookie"]
cafe4.indexOf("tea"); 
// 2

만약 배열 안에 찾는 똑같은 요소가 여러개라면 첫번째 인덱스만 출력되고 끝!
찾는 게 없으면 -1

join() : 요소들을 연결해 하나의 값으로 만들기

const cafe5 = ["coffee", "cake", "tea", "cookie"]
cafe5.join("/")); 
// coffee/cake/tea/cookie
cafe5.join(""); 
// coffeecaketeacookie 
cafe5.join("/").split("/"); 
// (4) ['coffee', 'cake', 'tea', 'cookie'] 
	배열 가공했다가 다시 하고 싶으면 split
console.log("hello world".split(" ")); 
// (2) ['hello', 'world']

체이닝 : 메소드 연달아서 연결~

includes() : 특정 요소가 포함되었는지 확인할 때

.incldes(찾는 요소, 어디서 찾고 싶은지 시작하는 인덱스)

const cafe6 = ["coffee", "cake", "tea", "cookie"]
cafe6.includes("bread"); 
// false
cafe6.includes("cake",-3); 
// true

find() : 하나의 요소라도 조건을 만족하는지 확인 (최초 하나 찾으면 종료)

const arr = [1,2,3,4,5,6,7,8,9,10];
console.log(arr.find(i=>i>5)); 
// 6 
arr.find(function(i)){
	return i === 2   
}) 
// 2 (찾는 값이 없으면 undefined)

filter() : 모든 요소가 조건을 만족하는지 확인 (전부 다 찾는다)

const arr = [{
    'name' : 'title1',
    'contents' : 'contents1',
    'dataNum' : 1
}, {
    'name' : 'title2',
    'contents' : 'contents2',
    'dataNum' : 2
}, {
    'name' : 'title3',
    'contents' : 'contents3',
    'dataNum' : 3
}, {
    'name' : 'title4',
    'contents' : 'contents4',
    'dataNum' : 4
}, {
    'name' : 'title5',
    'contents' : 'contents5',
    'dataNum' : 5
}];

arr.filter(i => i.dataNum > 3);
//expected output:
	[{
	    'name' : 'title4',
	    'contents' : 'contents4',
	    'dataNum' : 4
	}, {
	    'name' : 'title5',
	    'contents' : 'contents5',
	    'dataNum' : 5
	}]

map() : 배열 내 각각 요소에 대해 주어진 함수를 호출한 결과를 모아서 새로운 배열 만들기

arr.map(callback(currentValue[, index[, array]])[, thisArg])
Array.prototype.map()
callback 새로운 배열 요소를 생성하는 함수! 다음 세 가지 인수를 가집니다.
currentValue 처리할 현재 요소
index Optional 처리할 현재 요소의 인덱스
array Optional map()을 호출한 배열
thisArg Optional callback을 실행할 때 this로 사용되는 값.

arr.map(i => i.name);

이것과

arr.map(function (i) {
return i.name
});

이것이 같다!

const arr = [{
    'name' : 'title1',
    'contents' : 'contents1',
    'dataNum' : 1,
    'data' : [1, 2, 3]
}, {
    'name' : 'title2',
    'contents' : 'contents2',
    'dataNum' : 2,
    'data' : [1, 2, 3]
}, {
    'name' : 'title3',
    'contents' : 'contents3',
    'dataNum' : 3,
    'data' : [1, 2, 100]
}, {
    'name' : 'title4',
    'contents' : 'contents4',
    'dataNum' : 4,
    'data' : [1, 2, 3]
}, {
    'name' : 'title5',
    'contents' : 'contents5',
    'dataNum' : 5,
    'data' : [1, 2, 100]
}];

arr.map(i => i.name);
//expected output: ['title1', 'title2', 'title3', 'title4', 'title5']

arr.map(i => i.name).indexOf('title3');
//expected output: 2

문제 : map메소드를 이용해서 name의 값들을 원소로 하는 새로운 배열을 만들어 봅시다

const studentList = [
            {
                id: 1, name: '원범', score: 'great'
            },
            {
                id: 2, name: '김진', score: 'nice'
            },
            {
                id: 3, name: '혜원', score: 'good'
            },
            {
                id: 4, name: '재현', score: 'too cool for school'
            }
        ]

        const newArray = studentList.map(
            function(i){
            return i.name
        }
        )
        // 콘솔창에 newArray 쳐보면 (4) ['원범', '김진', '혜원', '재현']
               
const newArray2 = studentList.map(
            function(i){
            return i.name + "님";
        }
        )
        // 콘솔창에 newArray2 쳐보면 (4) ['원범님', '김진님', '혜원님', '재현님']

forEach() : 각각 요소를 실행하고 싶을 때. 요소를 하나씩 순환하면서 결과를 순환

(어레이 X 맵보다 먼저 나옴)

const Arr = [1,2,3,4,5,5,6,7,8,9,10]
arr.forEach(function(i){
      return console.log(i)
})
// 1 ..... 10 까지 하나씩 출력

reduce() : 각 요소에 누적해주며 실행하고 싶을 때

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
arr.reduce((누적값, 현재값) => 누적값+현재값)
//55
arr.reduce((누적값, 현재값, index, array) => 누적값+현재값)
// 55
arr.reduce((누적값, 현재값, index, array) => 누적값-현재값)
//-53

concat() : 배열을 합치거나 새로운 요소 추가

const cafe7 = ["coffee"]
console.log(cafe7.concat(["cake"])); 
// (2) ['coffee', 'cake']

sort() : 배열 내 요소를 정렬

(원본 배열 자체가 바뀜 알파벳 오름차순으로)

// 문자열 예시 참조

const numbers = [400, 200, 100];
console.log(numbers.sort()); 
// (3) [100, 200, 400]
const numbers2 = [40, 200, 100000];
console.log(numbers2.sort()); 
// (3) [100000, 200, 40] ????!!! 
문자열로 정렬 비교한다고 함 ....1이 먼저고.. 2가 다음이고 ..!
profile
곤
주니어 프론트엔드 웹 개발자 🐛
이전 포스트

[JS] 변수, 변수의 타입,string,number,boolean

다음 포스트

[JS] 조건문

0개의 댓글