[Javascript] 배열과 반복문

seungjin Kim·2023년 3월 9일
JavaScript

Javascript

목록 보기
2/7
post-thumbnail

이 글의 목적

📌 배열과 반복문에 대해서 공부합니다. 자바스크립트에서 배열이라는 자료구조를 이용하고 반복문을 통하여 반복되는 행동에 대한 자동화를 만들 수 있습니다.

배열

배열의 구조는 아래와 같습니다. 

let arr = new Array();
let arr = [];
  • [] 브라킷
  • 배열은 자료를 엑셀처럼 구조화 하는데 용이합니다.
  • 새로운 변수를 입력하기 용이합니다.
  • switch문 = 복수의 if 조건을 switch문으로 변환 가능

각자의 문법이 어떻게 쓰이는지
예시를 들어가면서 알아보겠습니다.

반복문

 

배열

1. 배열

배열은 순서가 있는 형태의 데이터를 담기에 용이합니다.
데이터의 순서가 없다면 매번 "해당이름"을 출력해야 합니다.

선언

1. 빈 배열 선언하기

let arr = new Array();
let arr = [];
  • 위에서도 잠시 언급했지만 new Array() 문법을 사용해도 배열을 만들 수 있습니다.
  • 대괄호 []를 사용하면 더 짧은 문법으로 배열을 만들 수 있기 때문에 new Array()는 잘 사용되지 않는 편입니다.

2. 요소를 넣어 배열 선언하기

let animals = ["원숭이", "사자", "호랑이"];

3. 다차원 배열(multidimensional array) - 행렬

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

alert( matrix[1][1] ); // 5, 중심에 있는 요소

특성 : idex 순서에서 나오는 특성

1. 각 배열에는 순서가 생기는데 이를 index라고 합니다.

  • index는 0부터 시작합니다.
  • 원숭이는 0번, 사자는 1번, 호랑이는 2번 인덱스
let animals = ["원숭이", "사자", "호랑이"];

2. 특정 요소만 뽑아낼 수 있습니다.

let animals = ["원숭이", "사자", "호랑이"];

alert(animals[0]); //원숭이
alert(animals[1]); //사자
alert(animals[2]); //호랑이

3. 특정 요소를 수정 또는 추가 할 수 있습니다.

let animals = ["원숭이", "사자", "호랑이"];

//2번에 사자를 빼고 고래를 넣자
animals[2] = '고래'; // 사자 대신 고래를 넣습니다.
console.log(animals); // [원숭이, 고래, 호랑이] 가 출력

//3번에 고릴라를 추가하고 싶어
animals[3] = '고릴라'; // 고릴라를 3번에 추가할게
console.log(animals); // [원숭이, 고래, 호랑이, 고릴라] 가 출력

4. length를 사용하면 배열에 담긴 요소가 몇 개인지 알 수 있습니다.

let animals = ["원숭이", "사자", "호랑이"];

console.log(animal.length); // 요소가 3개 있어 3이 출력됩니다.

5. 배열 요소의 자료형에 제약이 없습니다.

  • 이름, 숫자, Boolean, 함수를 넣을 수 있습니다.
// 요소에 여러 가지 자료형이 섞여 있습니다.
let arr = [ '사과', { name: '이보라' }, true, function() { alert('안녕하세요.'); } ];

// 인덱스가 1인 요소(객체)의 name 프로퍼티를 출력합니다.
alert( arr[1].name ); // 이보라

// 인덱스가 3인 요소(함수)를 실행합니다.
arr[3](); // 안녕하세요.

스택 (STACK), 큐(QUEUE) 개념/비교 /활용 예시

[표] 한 눈에 비교하기

큐(QUEUE)스택(STACK)
사전적의미롤에서 '큐'를 돌린다.영어단어 '쌓다'의 의미
구조설명자료가 들어와 차례대로 나간다.자료를 위에서 차곡차곡 쌓는 형태
선출방식FIFO, First In FirstOutLIFO, Last In First Out
설명먼저 들어온 놈이 먼저 나간다책을 빼려면 맨 위에부터 뺴야해
데이터삽입push 로 위부터 쌓는다.push 로 위부터 쌓는다.
unshift 로 맨앞에 쌓는다. (느림)
데이터삭제shift 로 맨 밑에부터 꺼낸다.(느림)pop 로 위부터 빼낸다.
실제사례롤에서 큐 돌릴 때 / 캐치테이블웹 방문기록 / 실행취소(undo)

pop / push, shift / unshift 이 뭐야?

  • push - 맨 끝에 요소를 추가합니다.
  • pop - 스택 끝에 요소를 추출합니다.
  • shift - 맨 밑 요소를 꺼내 제거한 후, 모든 요소들을 앞으로 밀어줍니다.
  • unshift - 맨 앞에 쌓는다. 모든 요소들의 순서(index) 뒤로 밀린다.

배열 주의사항

배열은 순서가 있는 자료구조로, 자바스크립트 엔진은 이런 특성을 고려하여 배열을 신중하게 조정하고, 처리하므로 배열을 사용할 땐 이런 목적에 맞게 사용해햐 합니다.

  • 자바스크립트의 배열은 순서대로 읽는 구조로 효율화.
  • 배열에서 순서의 중간을 빼먹거나 하면 좋지 않다.
  • 요소를 역순으로 채우는 경우도 좋지 않다.

 

반복문 for

기본구조
조건을 ()안에 넣으면 {}를 실행합니다.

// 기본구조
for (조건) {실행문}

실행예시
선언은 let으로 보통 합니다. (변수할당의 변화가 있을 때 대비)

// 실행예시
let arr = ["사과", "포도"]; 
for (i = 0; i < arr.length; i++) { // i가 arr.length까지 i++(계속 더하며) 반복된다.
	alert(arr[i]); // arr[i] 번째 객체를 반복하여 알럿노출
} // arr.length 번째까지 무한반복 -> 이후 종료

of : 배열요소에서 반복 작업을 간단한 조건으로 실행 가능

  • let으로 새로운 객체로 할당하여 진행
  • 값만 얻을 수 있음 (배열의 순서(index)는 얻을 수 없음.)

// 실행예시
let fruits = ["사과", "포도"]; 
for (let friut of fruits) { // i가 arr.length까지 i++(계속 더하며) 반복된다.
	alert(fruit); // arr[i] 번째 객체를 반복하여 알럿노출
} // arr.length 번째까지 무한반복 -> 이후 종료

in : 반복문을 실행할 수 있음.

let arr = ["사과", "오렌지", "배"];

for (let key in arr) {
  alert( arr[key] ); // 사과, 오렌지, 배
}

 
주의사항 : in 은 모든 프로퍼티를 읽기 때문에, 메서드를 읽을 수 있습니다.

  • key : value로 이루어진 모든 프로퍼티 대상으로 순회함
  • 메서드나 함수에도 프로퍼티가 존재함.
  • 모든 메서드를 읽으면서 내려가 문제가 생길 수 있음

주의사항 : in 은 배열에는 되도록 쓰지 말 것.

  • 객체를 읽는데에 최적화 되어 있음.
  • 배열에 사용하면 객체에 사용하는 것보다 10~100배 느림
  • 배열에는 되도록 쓰지 말 것.

length
1. length 프로퍼티는 배열 내 요소의 갯수가 아닙니다.
= 가장 큰 인덱스에 +1을 더한 값

let fruits = [];
fruits[123] = "사과";

alert( fruits.length ); // 124

fruits[123]은 123번째에 사과를 넣어주었고,
length는 가장 큰 index 값 = "사과"에 +1 을 하여 124 출력

2.배열을 줄이면 되돌릴 수 없습니다.

let arr = [1, 2, 3, 4, 5];

arr.length = 2; // 요소 2개만 남기고 잘라봅시다.
alert( arr ); // [1, 2]

arr.length = 5; // 본래 길이로 되돌려 봅시다.
alert( arr[3] ); // undefined: 삭제된 기존 요소들이 복구되지 않습니다.

이런 특징으로 arr.length = 0; 을 이용해서 배열을 비울 수 있음

tooString
배열엔 toString 메서드가 구현되어 있어 이를 호출하면 요소를 쉼표로 구분한 문자열이 반환됩니다.

let arr = [1, 2, 3];

alert( arr ); // 1,2,3
alert( String(arr) === '1,2,3' ); // true

배열과 메서드

요소를 더하거나 지우는 메서드 (7개)
push
pop
shift
unshift
splice
splice(
contact

원하는 요소 찾기 메서드 (5개)
indexOF/lastIndexOf(item,pos)
includes(value)
find/filter(func) - func의 반환 값을 true로 만드는 첫 번째/정체 요소를 반환함
findIndex

배열전체순회하기
forEACH(func) 모든 요소에 func를 호출함. 결과는 반환되지 않음

배열 변형하기
map(func)
sort(func)
reverse()
split/jion
reduce

splice
1. 특정 요소를 지웁니다.

2. 특정 요소를 지우고 추가합니다.

3. 삭제된 요소를 변수에 넣어 반환도 가능합니다.

slice
특정 배열을 반환시켜 줍니다.

concat
배열끼리 합쳐줍니다.

forEach와 map
map, forEach 메소드는 모두 배열을 조회한다는 기능은 동일합니다. 다만 forEach는 별다른 return이 없는 반면 map은 새로운 배열을 반환(return)합니다.

forEach
배열을 반복하는데, forEach는 함수를 인수로 받습니다.

  • 함수? (item, index, arr)를 의미

  • 정해진 값을 불러오지만, 반복되는 작업이면 forEach로 해결 가능

map
map은 배열 요소 전체를 대상으로 함수를 호출하고,
함수 호출 결과를 배열로 반환해줍니다.

//productNames는 각 product의 name이 들어간 배열이다
var productNames = products.map((product, index) => { 
     return product.name;
});

//React에서는 다음과 같은 방식으로 데이터가 담긴 배열을 화면에 표시합니다.
var productElements = products.map((product,index) =>{ 
	return (
		<div>
			<span>{product.name}</span>
			...
		</div>
	)
})

indexOf와 lastIndexof
배열에서 특정 값을 찾아냅니다.

find와 findIndex
find는 값을 찾아내고 findIndex는 조건에 맞는 Index 값을 찾아낸다.

let result = arr.find(function(item, index, array) {
  // true가 반환되면 반복이 멈추고 해당 요소를 반환합니다.
  // 조건에 해당하는 요소가 없으면 undefined를 반환합니다.
});

사용예제

filter
filter는 만족하는 모든 요소를 배열로 변환
find는 만족하는 조건의 단 '하나의 값' 을 찾아낸다.

sort
배열의 요소를 정리해줍니다

  • 숫자는 숫자 순으로
  • 문자는 사전 편집 순으로

compare
두 인자를 비교

reverse
역순으로 정렬시켜주는 메소드

split
문자열을 나눠서 배열로 만들어 줍니다.

join
배열이 쉼표로 구분되서 합쳐진다.

중간에 "ㅋ"처럼 문자열을 입력할 수 있다.

반복문

while 반복문

let i = 0;
while (i < 3) { // 0, 1, 2가 출력됩니다.
  alert( i );
  i++;
}

do while
조건이 맨 마지막에 온다.
한번이라도 실행하고 싶을 때

break - 해당 조건 만족 시 종료
continue - 조건 다음부터 실행

for (let i = 0; i < 10; i++) {

  // 조건이 참이라면 남아있는 본문은 실행되지 않습니다.
  if (i % 2 == 0) continue;

  alert(i); // 1, 3, 5, 7, 9가 차례대로 출력됨
}

labelName : for - 중첩 반복문을 빠져나오기 위해 사용
break labelName;

④⑤


① "3"
② "바나나"
③ "32"

console.log(array.length) = 4
console.log(array.push(5)) = [1,2,3,4,5]
[오답] push()를 진행하면 요소의 갯수를 반환함으로 5이다.


① 비파괴적처리 - split은 복사하기 때문에 비파괴
② 파괴적처리 - 원본 데이터에 감이 추가됨
③ 비파괴적처리 - 원본의 변화없이 map 함수 실행
④ 비파괴적처리 - trim이 원본의 공백을 삭제하지 하지 않음

#for in 반복문
0
1
2
3

#for of 반복문
사과
배
귤
바나나

[오답[
for에서 const로 선언하면 안된다. let으로 해야한다.

  • let은 재선언이 불가, 할당 가능
  • const는 재선언, 할당도 불가하기 때문에 변수를 추가할 수 없어서 사용하면 안된다.
    arry = [3, 6, 9]

let output = 1

for(i=1; i<101; i++){
	output.push(ouput * i);
}

console.log(`1~100의 숫자를 모두 곱하면, &{output}입니다.`)

[오답풀이] 대입연산자 개념

let output = 1 //output은 1이라고 선언

for(let i=1; i<101; i++){
	output *=i // *= i를 곱한후 output에 대입
}

console.log(`1~100의 숫자를 모두 곱하면, &{output}입니다.`)

for (let = i; i <=5 ; i++) {
	console log(2n-1)	
}

13579 2n-1
7531

profile
seungjin Kim
코드 한 줄
이전 포스트

[Javascript] if/switch 조건문

다음 포스트

[Javascript] 함수 표현식

0개의 댓글