[JavaScript] 배열(개요, 출력, 내장 메서드, 동적 성질, 주요 메서드 예제), 이중 반복문 루프 종료 방법

1. 배열

• 자바의 ArrayList, 파이썬의 list와 유사하다.
• 여러 자료형을 저장할 수 있다.
• 인덱스와 요소를 정보를 가진다.
• 동적 성질을 가진다.
• 여러 내장 메서드가 있다.

 

  1.1 배열의 출력

• 콘솔 창을 보면 정보가 다 나온다.
• document.write로 웹상에 출력하는 arr는 요소들만 나온다.

  1.2 배열의 출력2

 

• 요소값 출력은 java, python과 비슷한 결과가 나온다.
• 자바 스크립트 배열은 객체가. 값도 있고 내장 메서드도 있다.

 

  1.3 내장 메서드

 

배열 주요 내장 메서드 설명하는 글 링크

https://diary-developer.tistory.com/25

 

 

  1.4 배열의 동적 성질

 

• 자바 스크립트의 배열은 자바와 다르게 동적 성질을 가진다. 
• 객체로 취급되어 new 키워드로 생성자 호출도 가능하다.
• 배열은 선언 후 값을 수정하거나 배열의 길이를 추가하는 것도 가능하다.

 

  1.5 ==와 ===의 차이점

자바스크립트에서는 ==와 === 두 가지 종류의 동등 연산자를 제공합니다. 차이점은 다음과 같습니다:

• == (동등 연산자): 값이 같으면 true를 반환하지만, 타입이 다를 경우 자동으로 타입을 변환하여 비교합니다.
• === (엄격한 동등 연산자): 값과 타입이 모두 같을 때만 true를 반환합니다.

 

 

  1.6 배열 예제 - 대수의 법칙 확인

• 반복 횟수가 500회 일때와 1억회 일때의 차이
• 모수가 많아지면 확률은 균등하게 수렴한다.

 

 

  1.7 concat, push 메서드

 

concat 메서드

• 용도: 하나 이상의 배열이나 값을 기존 배열에 연결하여 새 배열을 만듭니다.
• 원본 배열 변경: concat은 원본 배열을 변경하지 않습니다. 대신, 기존 배열과 추가된 배열이나 값들이 합쳐진 새로운 배열을 반환합니다.
• 반환 값: concat은 새로운 배열을 반환합니다. 이 새 배열은 원본 배열과 메서드에 전달된 인자(배열 또는 값)를 합친 결과입니다.
• 사용 예시:

var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];
var newArray = array1.concat(array2);
// newArray는 ['a', 'b', 'c', 'd', 'e', 'f']입니다. array1과 array2는 변경되지 않습니다.

push 메서드

• 용도: 하나 이상의 요소를 배열의 끝에 추가합니다.
• 원본 배열 변경: push는 원본 배열에 직접 요소를 추가합니다. 즉, 원본 배열을 변경(modify)합니다.
• 반환 값: push는 배열의 새로운 길이를 반환합니다.
• 사용 예시:

var fruits = ['apple', 'banana', 'cherry'];
fruits.push('date');
// fruits 배열은 이제 ['apple', 'banana', 'cherry', 'date']입니다. push 후의 배열 길이 4를 반환합니다.

주요 차이점 정리

• 원본 배열의 변경 여부: concat은 원본 배열을 변경하지 않고 새 배열을 반환하는 반면, push는 원본 배열을 변경합니다.
• 반환 값: concat은 합쳐진 새 배열을 반환하고, push는 변경된 배열의 새로운 길이를 반환합니다.
• 용도: concat은 여러 배열이나 값을 새로운 배열로 합치는 데 사용되며, push는 기존 배열에 하나 이상의 요소를 추가하는 데 사용됩니다.

 

 

  1.8 pop 메서드

용도

• 배열의 마지막 요소를 제거하고 싶을 때 사용합니다.
• 배열에서 마지막 요소를 추출하면서 동시에 그 배열의 크기를 줄이고자 할 때 유용합니다.

반환 값

• 제거된 요소를 반환합니다.
• 배열이 비어 있을 경우, pop은 undefined를 반환합니다.

예시

var fruits = ['apple', 'banana', 'cherry'];
var lastFruit = fruits.pop();
console.log(lastFruit);
// 'cherry' 출력
console.log(fruits);
// ['apple', 'banana'] 출력

이 예시에서는 fruits 배열의 마지막 요소인 'cherry'를 제거하고 이를 lastFruit 변수에 저장합니다. pop 메서드는 'cherry'를 반환하며, 원본 fruits 배열은 이제 'apple'과 'banana'만 포함하게 됩니다.

특징

• pop 메서드는 원본 배열을 직접 변경합니다. 배열의 길이가 줄어들며, 마지막 요소가 배열에서 제거됩니다.
• 배열이 비어 있는 경우 undefined를 반환합니다. 이는 pop 메서드를 호출하기 전에 배열이 비어 있는지 여부를 확인하지 않아도 되게 만듭니다.
• pop 메서드는 배열의 끝에서 작동하는 반면, 배열의 시작에서 작동하는 shift 메서드와 대비됩니다. shift 메서드는 배열의 첫 번째 요소를 제거하고 반환합니다.

 

  1.9 배열 순회 메서드 forEach

 

fotEach는 매개변수에 콜백함수를 넣으면 배열의 각 요소마다 콜백함수를 실행한다. 

https://www.freecodecamp.org/korean/news/javascript-foreach-how-to-loop-through-an-array/

 

 

2.  이중 반복문 루프 종료 방법

 

외부 루프 종료하기

외부 루프를 종료하고 싶을 때 일반적으로 사용할 수 있는 몇 가지 방법은 다음과 같습니다:

1. 레이블(Label) 사용하기: 자바스크립트에서 레이블을 사용하여 루프에 이름을 지정하고, break 또는 continue에 레이블을 지정하여 외부 루프를 제어할 수 있습니다.

outerLoop: // 이것이 레이블입니다
for (var i = 0; i < 5; i++) {
  for (var j = 0; j < 5; j++) {
  console.log(`i = ${i}, j = ${j}`);
  if (j === 2) break outerLoop; // 외부 루프 종료
  } }

 

 2. 플래그 변수 사용하기: 루프를 제어하기 위해 외부에 플래그(또는 상태) 변수를 선언하고, 이 변수의 상태 변경을 통해 루프의 실행을 제어할 수 있습니다.

var isBreak = false;
for (var i = 0; i < 5; i++) {
  for (var j = 0; j < 5; j++) {
    if (j === 2) {
      isBreak = true;
      break; // 내부 루프 종료
      }
    if (isBreak) break; // 외부 루프를 종료하기 위한 체크
    }
  if (isBreak) break; }

 

이 방법은 추가적인 변수가 필요하지만, 레이블보다 코드를 읽기 쉽게 만들 수 있습니다, 특히 레이블이 남용되는 경우를 방지할 수 있습니다.