[JavaScript] 배열 (1)

카테고리 : 프로그래밍 언어
태그: javascript · 배열 · for · for of · for in · toString · join · push · pop · unshift · shift · isArray · concat · slice · splice
등록일: 2023년 03월 27일
최근 업데이트: 2023년 03월 27일

---

• 1. 배열: 리스트와 비슷한 객체로서 순회와 변형 작업을 수행하는 메서드
• 2. 배열 순환 For문 활용
• 3. toString,join
• 4. push,pop,unshift,shift
• 5. isArray,concat,slice,splice

1. 배열: 리스트와 비슷한 객체로서 순회와 변형 작업을 수행하는 메서드

[Array - JavaScript

MDN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array)

버스타기 : Array를 사용

사람이 많다 : 데이터가 많다(3개 이상)

줄 세움 (나열) => 처리속도가 빠름

처리속도가 빠름 : 삭제,수정,추가가 용이(유지보수가 좋다)

---

{
  /* 기본 배열 출력 */

  let arr =[];
  arr[0]= '홍길동';
  arr[1]= 20;
  arr[2]= '서울시 강남구';
  arr[3]= '010-0000-0000';

  console.log('이름:',arr[0])
  console.log('나이:',arr[1])
  console.log('주소:',arr[2])
  console.log('번호:',arr[3])
  console.log('갯수:',arr.length)
}

=> 결과값

[Running] node "/workspaces/codespaces-blank/index.js"
이름: 홍길동
나이: 20
주소: 서울시 강남구
번호: 010-0000-0000
갯수: 4

[Done] exited with code=0 in 0.056 seconds

{
  /* 초기값 */

    const menuList = ['Room0','Room1','Room2','Room3'];

    //for문으로 출력

    for(let i=0; i<menuList.length; i++){
      let menuitem =menuList[i];
      console.log(i,'번째방:',menuitem)
    }
    console.log('------------------------------')

    // for of문
    let cnt = 0;
    for(let menu of menuList){
      let menuItem = menu;
      console.log(cnt,'번째방:',menuItem);
      cnt++;
    }
    console.log('------------------------------')

    //for in 문
    for(let idx in menuList){ // index번호를 가져옴
      let menuItem = menuList[idx];
      console.log(idx,'번째방',menuList)
    }
}

=> 결과값

[Running] node "/workspaces/codespaces-blank/index.js"
0 번째방: Room0
1 번째방: Room1
2 번째방: Room2
3 번째방: Room3
------------------------------
0 번째방: Room0
1 번째방: Room1
2 번째방: Room2
3 번째방: Room3
------------------------------
0 번째방 [ 'Room0', 'Room1', 'Room2', 'Room3' ]
1 번째방 [ 'Room0', 'Room1', 'Room2', 'Room3' ]
2 번째방 [ 'Room0', 'Room1', 'Room2', 'Room3' ]
3 번째방 [ 'Room0', 'Room1', 'Room2', 'Room3' ]

[Done] exited with code=0 in 0.053 seconds

---

2. 배열 순환 For문 활용

/* 배열 순환으로 이름 조회 */

{
  /* 초기값 */
  let name = ['강호동','유재석','신동엽','이수근','김희철']
  let len = name.length;
  let username = prompt('이름 조회','조회할 이름을 입력해주세요');

  //for문: 조회가 되면 break로 끝내기

  for(let i=0; i<len; i++){
    if(username==name[i]){
      console.log(username,'을 찾았습니다')
      break
    }
  }

  //for of문
  for(let namelist of name){
    if(namelist==username){
      console.log(username,'을 찾았습니다')
      break
    }
  }

  //for in문
  for(let idx in name){ // 인덱스번호 출력
    if(name[idx]==username){
      console.log(username,'을 찾았습니다')
      break
    }
  }
}

=> 결과값

[Running] node "/workspaces/codespaces-blank/index.js"
강호동 을 찾았습니다
강호동 을 찾았습니다
강호동 을 찾았습니다

[Done] exited with code=0 in 0.053 seconds

---

3. toString,join

/* toString,join 활용 */

{
  let name = ['강호동','유재석','신동엽','이수근','김희철']
  let str  = name.toString();
  let str1  = name.join('+');
  let str2  = name.join('-');
  let str3  = name.join(' ');
  let str4  = name.join('');

  console.log('str:',str);
  console.log('str의 타입은?',typeof(str))

  console.log('str1:',str1);

  console.log('str2:',str2);

  console.log('str3:',str3);

  console.log('str4:',str4);
}

=> 결과값
[Running] node "/workspaces/codespaces-blank/index.js"
str: 강호동,유재석,신동엽,이수근,김희철
str의 타입은? string
str1: 강호동+유재석+신동엽+이수근+김희철
str2: 강호동-유재석-신동엽-이수근-김희철
str3: 강호동 유재석 신동엽 이수근 김희철
str4: 강호동유재석신동엽이수근김희철

[Done] exited with code=0 in 0.052 seconds

---

4. push,pop,unshift,shift

1): push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.(원본이 바뀜)

[Array.prototype.push() - JavaScript

MDN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/push)

2): pop() 메서드는 배열에서 마지막 요소를 제거하고 그 요소를 반환합니다.

[Array.prototype.pop() - JavaScript

MDN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/pop)

3): unshift() 메서드는 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환합니다.

[Array.prototype.unshift() - JavaScript

MDN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift)

4): shift() 메서드는 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다. 이 메서드는 배열의 길이를 변하게 합니다.

[Array.prototype.shift() - JavaScript

MDN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/shift)

/* push,pop,unshift,shift 활용 */

	/* (1). push 활용 */

  let color = ['red','green','blue','yellow','orange'];
  color.push('purple'); // 맨뒤 배열 purple 추가
  color.push('pink'); // 맨뒤 배열 pink 추가
  console.log(color);

=>결과값

['red','green','blue','yellow','orange','purple','pink']

--------------------------------------------------------------------

/* (2). pop 활용 */

  color.pop(); //맨뒤 배열 삭제
  console.log(color);
  console.log("")

=> 결과값

[ 'red', 'green', 'blue', 'yellow', 'orange', 'purple']

--------------------------------------------------------------------

/* (3). unshift 활용 */

  color.unshift('hotpink'); // 맨앞 배열 추가
  console.log(color)

=> 결과값

['hotpink', 'red', 'green', 'blue', 'yellow', 'orange', 'purple']

--------------------------------------------------------------------

/* (4). shift 활용 */

  color.shift(); // 맨 앞 배열 삭제
  console.log(color);

=> 결과값

['red', 'green', 'blue', 'yellow', 'orange', 'purple']

--------------------------------------------------------------------

/* (5). 배열 데이터 수정 */
  //수정
  color[0]='라임';
  color[1]='블루';
  console.log(color);

=> 결과값

[ '라임', '블루', 'blue', 'yellow', 'orange', 'purple' ]

---

5. isArray,concat,slice,splice

1): Array.isArray()메서드는 인자가 Array인지 판별합니다.(반환은 Boolean값)

[Array.isArray() - JavaScript

MDN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray)

2): concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다.

[Array.prototype.concat() - JavaScript

MDN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/concat)

• 기존배열을 변경하지 않습니다.

• 추가된 새로운 배열을 반환합니다.

  3): slice() 메서드는 어떤 배열의 begin 부터 end 까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다.

[Array.prototype.slice() - JavaScript

MDN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)

• 원본 배열은 바뀌지 않습니다.

  4): splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

[Array.prototype.splice() - JavaScript

MDN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)

/* isArray,concat,slice,splice 활용 */

	/* (1). isArray 활용 */

	let color = 'red,green,pink,skyblue,hotpink';

  /* string을 배열로 변경 */
  let arr = color.split(',');

  console.log(Array.isArray(color)) // 배열인지 판별 false
  console.log(Array.isArray(arr)) // 배열인지 판별 true

=>결과값

[Running] node "/workspaces/codespaces-blank/index.js"
false
true

[Done] exited with code=0 in 0.054 seconds

--------------------------------------------------------------------

/* (2). concat 활용 */

	const arr1 = [100,200,300,400];
	const arr2 = [10,20,30,40,50];
  const arr3 = [1,2,3,4,5];
  console.log(arr1);

  let arrToConcat = arr1.concat(arr2,arr3);
  console.log('arrToConcat?',arrToConcat);

=> 결과값

[Running] node "/workspaces/codespaces-blank/index.js"

배열의 초기값 출력 [ 100, 200, 300, 400 ]

arrToConcat? [100, 200, 300, 400, 10, 20 ,30 ,40 ,50 ,1 ,2 ,3 ,4 ,5]

[Done] exited with code=0 in 0.057 seconds

--------------------------------------------------------------------

/* (3). slice 활용 */

	let arr = [10,20,30,40,50,60];
  let str = arr.slice(1,3); // slice(시작인덱스~,마지막 배열)
  let str1 = arr.slice(3); //slice(시작인덱스부터~)
  let str2 = arr.slice(1,-2);
  let str3 = arr.slice(-1); // slice(음수면 뒷자리부터)
  console.log(`${str}`);
  console.log(`${str1}`);
  console.log(`${str2}`);
  console.log(`${str3}`);

=> 결과값

[Running] node "/workspaces/codespaces-blank/index.js"
20,30
40,50,60
20,30,40
60

[Done] exited with code=0 in 0.056 seconds['hotpink', 'red', 'green', 'blue', 'yellow', 'orange', 'purple']

--------------------------------------------------------------------

/* (4). splice 활용 */

	let data = [10,20,30,40,50,60];
  data.splice(1,3); //  splice(시작인덱스,배열숫자) 배열을 삭제용
  console.log(data);

  let data1 = [10,20,30,40,50,60];
  data1.splice(1,0,'홍길동','강호동','김철수');
  //splice(시작인덱스번호,배열자릿수 ,)
  console.log(data1);

  let data2 = [10,20,30,40,50,60];
  data2.splice(2,2,'a','b','c','d');
  console.log(data2);

=> 결과값

[Running] node "/workspaces/codespaces-blank/index.js"
[10, 50, 60]

[10, '홍길동','강호동', '김철수', 20, 30, 40, 50, 60]

[10, 20, 'a', 'b', 'c', 'd', 50, 60]

[Done] exited with code=0 in 0.059 seconds

---