자바스크립트 강의 EP_13 | 배열(Array) | ES6+ 최신 문법 | DOM API | BOM API

자바스크립트 배열(Array)은 무엇이며, 어떻게 생성하고 사용하나요?

자바스크립트 배열은 하나의 변수에 여러 개의 값을 순차적으로 저장할 때 사용하며, 대괄호를 활용한 어레이 리터럴 방식과 new 키워드를 사용한 어레이 컨스트럭터 생성자 방식으로 생성 할 수 있습니다.

배열의 값을 다루는 주요 메서드와 문법은 무엇인가요?

• length 속성: 배열의 길이를 가져오거나 마지막 데이터에 접근할 때 사용합니다.
• push() 메서드: 배열의 끝에 값을 추가합니다.
• forEach() 메서드: 배열 안의 값을 순회하며 하나씩 넘겨줍니다.
• pop() 메서드: 배열의 끝에서부터 값을 제거합니다.
• shift() 메서드: 배열의 앞에서부터 값을 제거합니다.
• indexOf() 메서드: 특정 값의 인덱스를 찾아 반환하며, 값이 없으면 -1을 반환합니다.
• splice() 메서드: 특정 인덱스에 있는 값을 제거합니다.
• 구조 분해 할당: 배열의 값을 개별 변수에 편리하게 할당합니다.
• 전개 구문(Spread Syntax): 배열의 데이터를 펼쳐서 새로운 배열을 만들거나 확장합니다.
• 레스트 파라미터(Rest Parameter): 함수 매개변수로 여러 데이터를 배열 형태로 받습니다.
• 깊은 복사: 전개 구문, Array.from() 메서드, slice() 메서드를 활용하여 원본 배열과 독립적인 복사본을 만듭니다.

자바스크립트의 핵심 요소인 배열(Array)을 완벽하게 마스터할 수 있는 강의입니다. 단순히 배열을 선언하고 사용하는 방법을 넘어, push, pop, forEach, splice 등 실무에서 자주 쓰이는 다양한 배열 API를 실제 코드와 함께 상세히 설명합니다. 특히, 구조 분해 할당(Destructuring Assignment), 전개 구문(Spread Syntax), 나머지 매개변수(Rest Parameter)와 같은 ES6+ 최신 문법을 통해 코드를 더욱 효율적이고 간결하게 작성하는 방법을 배울 수 있습니다. 마지막으로, 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)의 개념을 명확히 이해하고 올바르게 배열을 복사하는 방법을 익혀, 예상치 못한 버그를 방지하고 견고한 코드를 작성하는 데 필요한 핵심 지식을 얻게 될 것입니다.

1. 자바스크립트 배열(Array)의 기본 개념 및 생성

1. 배열의 정의: 배열은 하나의 변수에 여러 개의 값을 순차적으로 저장할 때 사용한다.
   1. 일반적인 객체(Object)가 키(key)와 값(value) 형태로 값을 갖는 것과 다르다.
2. 인덱스(Index): 배열에 저장된 값은 순서를 가지며, 이 순서를 인덱스라고 한다.
   1. 인덱스는 0부터 시작한다.
   2. 인덱스를 통해 배열 값에 접근하거나 값을 변경할 수 있다.
3. 배열의 중요성: 배열은 프로그래밍에서 매우 자주 사용되는 핵심 요소이다.
4. 배열 생성 방법: 배열을 생성하는 방법은 두 가지가 있다.
   1. 배열 리터럴(Array Literal) 방식: 대괄호([])를 활용하여 생성한다.
      1. 예시: let fruits = ["사과", "바나나", "딸기"];
      2. 현업에서 대부분 이 방식을 사용한다.
   2. 배열 생성자(Array Constructor) 방식: new 키워드를 사용하여 생성한다.
      1. 예시: let fruits = new Array("사과", "바나나", "딸기");
      2. 참고용으로 알아두면 좋다.

2. 배열 값 접근 및 변경 실습

1. 프로젝트 설정:
   1. array.js 파일을 생성하고 use strict를 선언한다.
   2. index.html 파일에서 스크립트 소스를 array.js로 변경한다.
2. 배열 생성 및 출력:
   1. 리터럴 방식: let fruits = ["사과", "바나나", "딸기"];로 선언 후 콘솔에 출력하면 값이 잘 출력되는 것을 확인할 수 있다.
   2. 생성자 방식: let fruits = new Array("사과", "바나나", "딸기");로 선언 후 콘솔에 출력하면 동일하게 값이 잘 출력되는 것을 확인할 수 있다.
      1. 실무에서는 리터럴 방식을 자주 사용하므로 생성자 방식 코드는 주석 처리한다.
3. 인덱스를 통한 값 접근:
   1. fruits[0]은 "사과"를 가져온다.
   2. fruits[1]은 "바나나"를 가져온다.
   3. fruits[2]는 "딸기"를 가져온다.
4. 인덱스를 통한 값 변경:
   1. fruits[2] = "포도";와 같이 할당 연산자를 통해 값을 변경할 수 있으며, 변경된 값이 잘 출력되는 것을 확인할 수 있다.

3. 자주 사용하는 배열 API (속성 및 메서드)

3.1. 배열 길이 확인 및 마지막 데이터 접근: length 속성

1. length 속성: 배열의 길이를 가져오는 속성이다.
   1. 예시: fruits.length를 출력하면 배열에 들어있는 데이터의 총 개수(예: 3)가 출력된다.
2. length를 이용한 마지막 데이터 접근:
   1. 배열의 마지막 데이터를 가져올 때 length 속성을 활용할 수 있다.
   2. 예시: fruits[fruits.length - 1]을 사용하면 마지막 데이터(예: "파인애플")를 가져올 수 있다.
   3. 주의사항: fruits[fruits.length]와 같이 -1을 하지 않으면, 배열의 길이(예: 6)에 해당하는 인덱스(6번째 방)에 접근하게 되는데, 이 방에는 값이 할당되지 않았으므로 "undefined"가 출력된다.
   4. 따라서 마지막 값에 접근하려면 반드시 length - 1을 사용해야 한다.

3.2. 배열에 값 추가 및 제거: push, pop, shift, unshift 메서드

1. push() 메서드: 배열의 끝에 값을 추가한다.
   1. 예시: fruits.push("귤")을 호출하면 배열 끝에 "귤"이 추가된다.
   2. push는 배열에서 매우 자주 사용된다.
2. pop() 메서드: 배열의 끝에서부터 값을 하나씩 제거한다.
   1. 예시: fruits.pop()을 호출하면 배열 끝의 "귤"이 제거된다.
   2. 두 번 호출하면 "귤"과 "파인애플"이 순서대로 제거된다.
   3. pop() 메서드는 제거된 값을 반환한다.
3. shift() 메서드: 배열의 앞에서부터 값을 하나씩 제거한다.
   1. 예시: fruits.shift()를 호출하면 배열 앞의 "사과"가 제거된다.
   2. 두 번 호출하면 "사과"와 "바나나"가 순서대로 제거된다.
4. unshift() 메서드: 배열의 앞에 값을 추가한다.
   1. 예시: fruits.unshift("수박")을 호출하면 배열 앞에 "수박"이 추가된다.

3.3. 특정 값의 인덱스 찾기: indexOf() 메서드

1. indexOf() 메서드: 특정 값의 인덱스를 찾아 반환한다.
   1. 예시: fruits.indexOf("파인애플")을 호출하면 "파인애플"의 인덱스(예: 4)를 반환한다.
2. 값이 없을 경우: 찾고자 하는 값이 배열에 없을 경우 -1을 반환한다.
   1. 예시: fruits.indexOf("토마토")는 -1을 반환한다.
   2. 이 특성은 프로그래밍에서 자주 활용된다.

3.4. 특정 인덱스의 값 제거: splice() 메서드

1. splice() 메서드: 특정 인덱스에 있는 값을 제거할 때 사용한다.
   1. 사용법: fruits.splice(시작_인덱스, 제거할_개수)
   2. 예시 1: fruits.splice(1, 1)은 1번째 인덱스부터 1개의 값(사과)을 제거한다.
   3. 예시 2: fruits.splice(1, 2)는 1번째 인덱스부터 2개의 값(사과, 바나나)을 제거한다.
2. indexOf()와 함께 활용: indexOf()로 찾은 인덱스를 splice()에 활용하여 특정 값을 제거할 수 있다.
   1. let findIndex = fruits.indexOf("파인애플");
   2. fruits.splice(findIndex, 1);을 호출하면 "파인애플"이 제거된다.

4. ES6+ 최신 문법 활용

4.1. 구조 분해 할당(Destructuring Assignment)

1. 개념: 배열 안에 있는 값을 개별 변수에 편리하게 할당하는 문법이다.
   1. 기존 방식은 각 인덱스에 접근하여 개별 변수에 할당해야 하므로 불편하다.
2. 사용법: 변수를 선언할 때 대괄호([]) 안에 할당받을 변수들을 순서대로 적어준다.
   1. 예시: const [apple, banana, strawberry] = fruits;
   2. 이렇게 하면 apple에는 "사과", banana에는 "바나나", strawberry에는 "딸기"가 할당된다.
3. 값의 개수가 다를 경우:
   1. 할당받을 변수 개수가 배열의 값보다 적으면, 순서대로 매핑되고 나머지는 할당되지 않는다.
   2. 나머지 매개변수(Rest Parameter) 활용: 나머지 값들을 한 곳에 담고 싶을 때 ...변수명을 사용하여 배열로 받을 수 있다.
      1. 예시: const [apple, banana, ...rest] = fruits;
      2. rest 변수에는 "딸기" 이후의 모든 값이 배열 형태로 담긴다.

4.2. 전개 구문(Spread Syntax)

1. 개념: 배열에 담긴 값을 쫙 펼치는문법이다.
   1. 구조 분해 할당이 값을 분해하여 새로운 변수에 할당하는 것과 달리, 전개 구문은 데이터를 단순히 펼치는 것이다.
2. 사용법: ...배열변수명 형태로 사용한다.
   1. 예시: const items = [...fruits];
   2. fruits 배열의 모든 데이터가 items 배열에 동일하게 담긴다.
3. 활용:
   1. 데이터 추가: 펼친 데이터에 다른 데이터를 추가할 수 있다.
      1. 예시: const items = ["abc", ...fruits, "파인애플", "박"];
   2. 배열 병합: 여러 배열을 합칠 때 유용하게 사용된다.
      1. 예시: const items = [...fruits1, ...fruits2];
      2. fruits1과 fruits2의 모든 값이 합쳐져 items에 담긴다.

4.3. 나머지 매개변수(Rest Parameter)

1. 개념: 함수에서 매개변수의 개수가 정해지지 않았을 때, 여러 개의 인자를 배열 형태로받을 수 있도록 하는 문법이다.
   1. 기존 함수는 매개변수 개수에 맞춰 인자를 받아야 한다.
2. 사용법: 함수 매개변수 선언 시 ...변수명 형태로 사용한다.
   1. 예시: function print(...values) { ... }
   2. values는 전달된 모든 인자를 담은 배열이 된다.
3. 활용:
   1. 배열로 받았기 때문에 인덱스로 접근하거나 forEach와 같은 배열 메서드를 활용하여 모든 값을 순회할 수 있다.
   2. 함수 호출 시 print("A", "B", "C", "D", "E")와 같이 무한하게 인자를 확장하여 넘길 수 있다.
   3. 나머지 매개변수는 이렇게 무한히 확장 가능한 파라미터를 배열로 받을 수 있다는 점을 알아두면 된다.

5. 배열 복사 방법: 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)

5.1. 얕은 복사(Shallow Copy)의 문제점

1. 문제 상황: 일반적인 변수 할당(target = source;) 방식으로 배열을 복사하면 예상치 못한 문제가 발생한다.
   1. 예시: source 배열을 target에 할당한 후, target[0] = "파인애플"로 변경하면 target뿐만 아니라 source 배열의 값도 함께 변경된다.
2. 원인: 참조값 복사:
   1. 배열은 객체이므로, 변수에는 실제 값이 아닌 메모리 주소(참조값)가 저장된다.
   2. target = source는 source가 가진 참조값을 target에 복사하는 것이다.
   3. 결과적으로 source와 target은 동일한 메모리 주소를 참조하게 된다.
   4. 따라서 target을 통해 0번째 방의 값을 수정하면, 같은 주소를 바라보는 source의 0번째 방 값도 함께 변경되는 것이다.
3. 정의: 이처럼 참조값만 복사되어 같은 값을 바라보게 되는 복사를 얕은 복사(Shallow Copy)라고 한다.

5.2. 깊은 복사(Deep Copy) 방법

1. 개념: 얕은 복사의 문제를 해결하기 위해, 새로운 메모리 공간을 할당하고 원본 배열의 값을 완전히 복사하여 서로 다른 참조값을 갖도록하는 복사 방법이다.
2. 깊은 복사 방법:
   1. 전개 구문(Spread Syntax) 활용:
      1. const target = [...source];와 같이 전개 구문을 사용하여 source 배열의 데이터만 펼쳐 새로운 배열에 담는다.
      2. 이렇게 하면 target의 값을 변경해도 source는 변경되지 않는다.
   2. Array.from() 메서드 활용:
      1. const target = Array.from(source);를 사용하여 깊은 복사를 할 수 있다.
      2. 이 방법 역시 target의 값만 변경된다.
   3. slice() 메서드 활용:
      1. const target = source.slice();를 사용하여 깊은 복사를 할 수 있다.
      2. 이 방법 역시 target의 값만 변경된다.
3. 얕은 복사와 깊은 복사의 차이점 요약:
   1. 얕은 복사: 참조값을 복사하여 같은 값을 바라본다.
   2. 깊은 복사: 참조값이 새로 할당되고, 그 안에 데이터가 복사되어 서로 다른 값을 바라본다.

6. 배열 강의 요약 및 마무리

1. 배열 생성: 리터럴 표기법([])과 생성자 표기법(new Array())이 있으며, 실무에서는 리터럴 표기법을 주로 사용한다.
2. 배열 접근 및 변경: 인덱스를 통해 배열 값에 접근하고 값을 재할당할 수 있다.
3. 자주 사용하는 배열 API: length, push, pop, forEach, shift, unshift, indexOf, splice 등이 있다.
   1. 이러한 API는 외울 필요 없이 실습을 통해 자연스럽게 익숙해진다.
   2. 이 외에도 다양한 메서드가 있으며, 필요할 때 찾아 사용하면 된다.
4. ES6+ 최신 문법:
   1. 구조 분해 할당: 배열 값을 개별 변수에 편리하게 할당한다.
   2. 전개 구문: 배열 값을 펼쳐서 확장하거나 병합한다.
   3. 나머지 매개변수: 함수 매개변수로 여러 데이터를 배열 형태로 받는다.
5. 배열 복사:
   1. 일반적으로 값을 대입하면 참조값이 복사되는 얕은 복사가 발생한다.
   2. 깊은 복사를 통해 새로운 참조값을 가진 독립적인 배열을 생성해야 한다.

자바스크립트 강의 EP_14 | 조건문 | ES6+ 최신 문법 | DOM API | BOM API 바로가기

자바스크립트 강의 EP_14 | 조건문 | ES6+ 최신 문법 | DOM API | BOM API - 하나이프 블로그