JavaScript 11 week 2 Study Keywords

1. 배열이 필요한 이유와 선언하는 방법
2. (다차원)배열의 값에 접근하고, 추가, 수정, 삭제하는 방법
3. 자주 사용하는 배열 메서드의 종류와 사용하는 방법
4. 반복문이 필요한 이유와 사용하는 방법
5. 배열과 반복문을 함께 자주 사용하는 이유
6. 배열과 반복문을 활용해서 배열의 값을 조작하는 방법

1

배열이 필요한 이유와 선언하는 방법

배열이 필요한 이유

배열은 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형이다. 변수가 필요한 이유와 마찬가지로, 배열이 필요한 이유도 결국 효율성(편의성)때문이라고 생각한다. 숫자, 문자열, 불과 같은 자료는 하나의 값만 가질 수 있어서 여러 개의 자료를 저장하려면 변수를 여러 개 선언해야 하는 불편함이 생길 수 있다.

코딩을 배우기 이전의 나

  let num1 = 7;
  let num2 = 2;
  let num3 = 4;
  let num4 = 3;
  let num5 = 5;
  let num6 = 2;
  let num7 = 4;
  let num8 = 9;
  let num9 = 2;
  let num10 = 3;
  
  let sum = num1 + num2 + num3 + num4 + num5 + 
  num6 + num7 + num8 + num9 + num10;
  
  console.log(sum)
  // 41

코딩을 배운 이후의 나

let num = [ 7, 2, 4, 3, 5, 2, 4, 9, 2, 3 ];
let sum = 0;

for (i=0; i < num.length; i++) {
  sum += num[i]
}

console.log(sum)
// 41

배열을 선언하는 방법 2가지

① let arr1 = [];
② let arr2 = new Array()

---

2

(다차원)배열의 값에 접근하고, 추가, 수정, 삭제하는 방법

배열 값에 접근

• 배열[인덱스]
• 다차원 배열 접근

let arr = [
  [1,2,3],
  [4,5,6],
  [7,8,9],
  [[10,11,12], 13, 14]
];
 
arr[3]; // equals [[10,11,12], 13, 14]
arr[3][0]; // equals [10,11,12]
arr[3][0][1]; // equals 11

배열 요소 추가

• 배열.push(요소) : 배열 맨 뒤에 순서대로 추가됨, 나중에 추가된 요소가 맨 마지막.
• 배열.unshift(요소) : 맨 앞에 요소 추가
• 배열[인덱스] = '값' : 인덱스를 사용해서 원하는 순서에 추가할 수 있고, 순서를 건너뛰어도 가능. 다만, 기존 인덱스랑 바꾸는 경우 추가되는 것이 아니라, 대체되는 것
• 배열[배열.length] = '값' : 배열 마지막 인덱스에 추가
• 배열.splice(인덱스, 삭제할 개수, 요소)

배열 요소 수정

• 배열[인덱스] = '값' : 이 경우 기존에 있던 값은 삭제되고 새로운 값이 채워짐

배열 요소 삭제

• 배열.pop() : 맨 뒤에 있는 요소 제거
• 배열.shift() : 맨 앞에 있는 요소 제거
• 배열.slice(시작 인덱스, [종료 인덱스])
  -시작 인덱스를 지정해주지 않으면 0부터 시작
  -음수 지정 시 끝에서 부터 계산
  -배열의 길이와 같거나 큰 수 지정 시 빈 배열 반환
  -종료 인덱스를 지정해주지 않으면 끝까지 자름
• 배열.splice(인덱스, 인덱스부터 제거할 요소의 개수, 추가할 요소N)
  : 제거되는 요소가 배열로 리턴
• 배열.splice(배열.indexOf(요소), 1)

---

3

자주 사용하는 배열 메서드의 종류와 사용하는 방법

(내가 직접 써본 메소드)

• arr.join(separator) : 배열의 모든 요소를 연결해서 하나의 문자열로. 구분자란 , / | " 등
• str.split(separator) : string을 array로. 구분자
• arr.reverse() : 원본 배열의 순서를 거꾸로 변환
• 배열.splice(인덱스, 삭제할 개수, 요소)
• 배열.slice(시작 인덱스, [종료 인덱스])
• filter() : 머리를 터지게 했던
• includes() : 배열에 value가 있으면 true를, 그렇지 않으면 false를 반환함
• 맨 앞에 올 배열.concat(뒤에 붙일 배열)
• parseInt( string, n ) : string을 n진법의 숫자로 바꿔줌
• parseFloat( string ) : 실수로 변환
• Math.floor(number) : 어떤 수보다 크지 않은 최대의 정수를 반환 = 내림
• Math.ceil() : 어떤 수보다 작지 않은 최소의 정수를 반환 = 올림
• Math.round() : 어떤 수와 가장 가까운 정수를 반환 = 반올림
• arr.pop() : 맨 뒤에 있는 요소 제거
• arr.shift() : 맨 앞에 있는 요소 제거
• arr.push(요소) : 배열 맨 뒤에 순서대로 추가
• 배열.unshift(요소) : 맨 앞에 요소 추가

---

4

반복문이 필요한 이유와 사용하는 방법

반복문이 필요한 이유

반복문도 역시 변수, 배열의 필요성과 마찬가지로 효율성(편의성)을 위해 사용하는 것 같다. 반복문이야말로 신세계.

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
console.log(6);
console.log(7);
console.log(8);
console.log(9);
console.log(10);
//...
console.log(100);

위 아래는 같은 결과

for ( let i = 1; i <=100; i++) {
  console.log(i)
}

while 반복문 사용방법

while (condition) {
  // 반복해서 실행할 코드
  // '반복문 본문(body)'이라 불림
}

• condition(조건)이 truthy 이면 반복문 본문의 코드가 실행
• if 조건문과 형태가 매우 비슷.
• 차이점 : if 조건문이 문장을 한 번만 실행하는 반면,
  while 반복문은 불 표현식이 true면 계속해서 문장을 실행함
• 예시

// while문을 이용하여 1 부터 100까지 더하고 그 결과를 출력하시오.

let a = 0;
let b = 0;

while (b<=100) {
  a = a + b;
  b++;
}

console.log(a)

// 5050

for 반복문 사용방법

for ( 초기화문; 조건문; 반복이 될 때마다 실행되는 코드(증감식) {
   수행할 동작
}

for (begin; condition; step) {
  // ... body ...
}

begin : 반복문에 진입할 때 단 한 번 실행
condition : 반복마다 해당 조건이 확인됨, false이면 반복문을 멈춤
body : condition이 truthy일 동안 계속해서 실행
step : 각 반복의 body가 실행된 이후에 실행, 증감식에서 i += 2 이렇게 표현하면 2씩 증가.

• 반복문이 시작될 때 아무것도 할 필요가 없으면 begin 생략 가능
• step도 생략 가능
• 모든 구성요소를 생략할 수 있고, 이러면 무한반복문이 됨
• 구성요소 생략 시 주의 점 : 두개의 세미콜론(;;)을 꼭 넣어주어야 함
• 예시

let ourArray = [];
for (let i=10; i > 0; i -= 2) {
  ourArray.push(i);
}

console.log(ourArray)

// [10, 8, 6, 4, 2]

---

5

배열과 반복문을 함께 자주 사용하는 이유

배열의 가치는 많은 양의 데이터를 배열이라는 한 공간에 담아서 인덱스 값으로 필요할 때마다 그 데이터 요소를 꺼내 사용하는 것에 있다. 하지만 데이터가 셀 수 없을 정도로 많아질 경우 인덱스로 값을 활용하는 것은 어려울 수 있다. 이때 반복문을 사용한다면 원하는 배열의 값에 효율적이고 체계적으로 접근할 수 있다. 이런 점에서 반복문은 배열과, 배열은 반복문과 함께 사용할 때 그 효용이 더 커진다.

---

6

배열과 반복문을 활용해서 배열의 값을 조작하는 방법

배열이 있으면 for 반복문과 배열[인덱스] 문법을 활용하여 배열의 값에 쉽게 접근할 수 있고 원하는 값으로 얼마든지 조작할 수 있다.

function makeSquare () {

  let arr = new Array(10)
  console.log(arr) 
  // [undefined, undefined, undefined, undefined, undefined, 
  undefined, undefined, undefined, undefined, undefined]

  
  for (let i = 0; i < 10; i++) {
    arr[i] = i * i;
  }

  return arr;
}

console.log(makeSquare())
// [0, 1, 4, 9, 16, 25, 36, 49, 64, 81]

---

위의 많은 메소드의 예시 확인은
https://velog.io/@maxkmh/JavaScript-06-%EB%B0%B0%EC%97%B4