[javascript] 배열 array 기본기

공부하면서 정리한 내용입니다
참고한 내용은 맨 아래의 링크를 확인해주세요

---

[ 대괄호 ] 를 사용

조금 특별한 객체의 한 종류 (typeof object)
묶음, 특히나 순위나 순서가 있는 묶음에 사용된다.
객체에서 propertyName의 부분은 생략 되지만 index가 위치한다.

let courseRanking = [   //배열이름
  '내용1',               //요소 element
  '내용2',
  '내용3'
]

Indexing & Method

0부터 시작하고 propertyName과 동등한 역활을 한다.
요소를 불러올 때 사용

console.log(배열이름[indexNumber]);

let animal = ['사자', '코알라', '기린', '개미핥기', '노루'];

● 객체 요소의 개수확인

console.log(animal.length); 
console.log(animal['length']);

● 추가 및 수정
index가 이미 있는 것은 수정되고, 없는 것은 추가된다.
사이에 비어있는 index는 비어있는 채로 요소화 되어진다.

animal[5] = '반달곰';
animal[7] = '독수리';
animal =  ['사자', '코알라', '기린', '개미핥기', '노루', '반달곰', ampty, '독수리'];

● 삭제하기
1. Delete : 완벽하게 삭제되지 않음

delete animal[3];
animal =  ['사자', '코알라', ampty, '개미핥기', '노루', '반달곰', ampty, '독수리'];

2. Splice : 배열의 요소를 완벽하게 삭제하는 방법, 수정 추가도 가능 !

// .**splice(startIndex, deleteCount, item)**

animal.splice(6); //6 index 삭제됨
animal =  ['사자', '코알라', ampty, '개미핥기', '노루', '반달곰']

animal.splice(1); //1 index 부터 모든 요소 삭제됨
animal = ['사자']

animal.splice(1, 2); //1 index부터 2개의 요소를 삭제
animal = ['사자', '개미핥기', '노루', '반달곰']

animal.splice(1, 2, '삵', '캥거루') // 1 index부터 2개의 요소삭제, 2개의 요소를 추가
animal = ['사자', '삵', '캥거루', '개미핥기', '노루', '반달곰']

//배열의 첫 요소를 삭제 : .shift()
animal.shift();

//배열의 마지막 요소를 삭제 : .pop()
animal.pop();

//배열의 첫 요소로 값 추가: .unshift(value)
animal.unshift('코끼리');

//배열의 마지막 요소로 값 추가: .push(value)
animal.push('다람쥐');

// 배열에서 특정값 찾기 
sample.indexOf(value);      //앞에서부터 탐색
sample.lastIndexOf(value);  //뒤에서부터 탐색

1. 만약 포함되어 있다면, value가 있는 인덱스가 리턴됩니다.
2. 포함되어 있지 않다면, -1이 리턴됩니다.
3. 여러 번 포함되어 있으면, 처음 발견된 인덱스가 리턴됩니다.

// 배열에서 특정 값이 있는지 확인하기 
sample.includes(value);  // boolean

// 순서 뒤집기
sample.reverse();

forEach | filter | map | reduce

forEach : 한개씩 돌면서 무언가 하기, return value는 없음.

let isArr = [1, 2, 3];

Array.from(isArr).forEach(value => newArr.push( value ) )

filter : 조건에 맞는것만 새로운 배열로. return value는 새 배열.
map : 한개씩 돌면서 연산한 결과를 새로운 배열로. return value는 새 배열
reduce : 한개씩 돌면서 이전 연산한 결과를 조합하여 사용하기. return value는 reuce 함수안에서 설정한 대로.

find

let result = Array.from(buttons).find(**button** => button.name === "버튼");

isArray

Array.isArray(isArr)

반복문 사용하기

let animal = ['사자', '코알라', '기린', '개미핥기', '노루'];

for (let element of animal) {
	  console.log(element);
}

다차원 배열 multidimensional array

let twoDimensional = [[1, 2], [3, 4]];

console.log(twoDimensional[0]);    //0 index인 [1, 2]를 출력
console.log(twoDimensional[0][1]); //0 index의 1 index 2를 출력

파라미터도 배열로 적용가능

function(...param){
		console.log("result", param) // result [ p1, p2, .... ]
}

표기법

let myString = 'string';

//요소 접근
console.log(myString[3]);        //대괄호표기법   //r출력
console.log(myString.charAt(3)); //charAt 메소드 //r출력

//문자열 길이
console.log(myString.length);    //6출력

//요소 탐색
console.log(myString.indexOf('i'));     //앞부터 탐색
console.log(myString.lastIndexOf('i')); //뒤부터 탐색

//대소문자 변환
console.log(myString.toUpperCase()); //대문자
console.log(myString.toLowerCase()); //소문자

//양 끝 공백 제거
console.log(myString.trim());   

//부분 문자열 접근 slice(start, end)
console.log(myString.slice(0,2)); //st출력
console.log(myString.slice(3));   //ing출력 (두번째를 생략하면 start이후 모두 출력)
console.log(myString.slice());    //전체출력

문자열과 배열의 비교

• 공통점
  1. length 속성을 가짐
  2. 대괄호 표기법으로 접근 할 수 있음
  3. for of 반복문에 활용 가능
• 차이점
  1. string / array 자료형이 다름

  let myString = 'Codeit';
  let myArray = ['C', 'o', 'd', 'e', 'i', 't'];
  

  1. mutable / immutable 할당된 값의 일부 수정유무

  // 배열은 mutable
  let myArray = ['C', 'o', 'd', 'e', 'i', 't'];
  myArray[0] = 'B';
  console.log(myArray);
  
  // 문자열은 immutable
  let myString = 'Codeit';
  myString[0] = 'B';
  console.log(myString);
  

배열을 객체로 변환하기

orginArr = ["value1", "value2", ...];
arrObj =  orginArr.reduce((makeArr, value, index) => {

	  ( **makeArr[value]=''**, "여기에들어가는 파라미터는 뭔지모르겠음");
	  console.log("makeArr", makeArr)
	  console.log("value", value)
	  console.log("index", index)
	  return makeArr;

}, {});

▶기본형과 참조형 비교하기

---

Reference

1) 마지막 콤마 제거하는 법

[Javascript] 문자열에서 마지막 콤마 제거하기

2) isArray()

Array.isArray() - JavaScript | MDN

3) forEach, filter, map, reduce 활용법

자바스크립트 배열에서 forEach, filter, map, reduce 활용법