D02_dom_문법

• 자바스크립트 공부할 때 주의점 
• 뭔가 계속 생겨 
• 항상 검색을 필수로 해야 한다. 
• 항상 정리를 잘 해야 한다. 

---

• 문법1_개념_배열
• for...in은 객체의 속성을 하나하나 순회할 때 더 많이 사용돼요.
• for...in은 객체의 모든 속성을 하나씩 꺼내서 작업할 때 사용합니다.
• 구문사용 대상특징

  for...in	객체(object)	속성(key)을 하나씩 순회
  for...of	배열(array)	값(value)을 하나씩 순회
  forEach()	배열(array)	콜백 함수로 값을 순회

_01_배열_선언과출력.html

• 배열 선언하는 방법이 여러개이다. 
  • JavaScript가 유연한 언어라서, 개발자가 다양한 방식으로 같은 결과를 만들 수 있게 허용하기 때문이에요.
  • 1. 리터럴 방식 
    • let arr1 = [1, "a", true];
    • 가장 간결하고 직관적입니다.
    • ✅ 실무에서 가장 많이 사용됨
  • 2. Array() 생성자 방식
    • let arr2 = Array(1, "a", true);
    • let arr2 = new Array(1, "a", true);
    • Array는 자바스크립트에서 배열을 만드는 생성자 함수입니다.
    • Array() 또는 new Array() 둘 다 가능하지만, new를 붙이는 것이 전통적인 방식입니다.
    • 주의: 숫자 1개만 넣으면 혼란스러울 수 있어요.
  • 3. 빈 배열 만들고 하나씩 값 대입
    • let arr3 = new Array();
      arr3[0] = 1;
      arr3[1] = "a";
      arr3[2] = true;
    • 처음엔 빈 배열을 만들고
    • 나중에 각 인덱스에 값을 직접 넣는 방식입니다.
    • 이 방법은 동적으로 배열을 만들거나, 값을 나중에 넣을 때 쓸 수 있어요.
    • 코드가 길고 번거롭기 때문에 보통은 잘 안 씁니다.
  • 보통 리터럴 방식을 많이 쓴다. 

---

• 문제
• for (i in arr1)의 의미와 기준
  • JavaScript의 for...in 문법이에요.
  • 배열 또는 객체의 "속성(=key 또는 인덱스)"을 하나씩 순회
  • 실무에서는 배열에 for...in 잘 안 씁니다.
  • 왜냐하면 for...in은 객체용 문법이고, 배열에서 사용하면 문제 생기기 쉬워요:
• 3. 그럼 배열에는 뭘 쓰는 게 좋아요?✅ 전통적인 for문✅ 향상된 for문 (for...of)이건 값(value) 자체를 순회하기 때문에 더 깔끔해요.
• javascript
  복사편집
  for (let item of arr) { console.log(item); }
• javascript
  복사편집
  for (let i = 0; i < arr.length; i++) { console.log(arr[i]); }
• 배열에는 아래 2가지가 훨씬 더 안전하고 직관적입니다:

_01_배열_선언과출력_문제.html

---

_02_배열_확인_isArray.html

• Array.isArray()가 필요한가?
  • JavaScript에서는 배열과 객체가 비슷하게 생겼고,
    타입이 애매할 수 있기 때문에,
    정확하게 "이게 배열인가?"를 구분할 필요가 있습니다.
  • 실무에서는 매개변수나 API 응답값이 배열인지 모를 때가 많음

 

• 왜 배열과 객체를 구분했을까?
  • JavaScript는 데이터를 저장하기 위해 여러 형태의 구조를 제공합니다.
    가장 대표적인 게 배열(Array) 과 객체(Object) 인데,
    이 둘은 용도와 목적이 다릅니다.
  • 배열 : 순서가 있는 데이터 집합을 저장 
  • 객체 : 이름 ( 키) 이 있는 데이터를 저장할려고 
  • 배열의 특징
    • 순서가 있음 → 인덱스(index)로 접근 (arr[0], arr[1] ...)
    • 값만 저장 → 키 없이 값만 저장
    • 길이가 자동으로 늘어남 (arr.push(값) 등)
    • 반복 작업에 유리
  • 객체의 특징
    • key:value 쌍으로 구성 → 각각의 값에 이름이 붙음
    • 순서가 중요하지 않음
    • 다양한 타입의 데이터 포함 가능

_02_배열_확인_isArray_문제.html

---

• 직접 구현할 줄 알아야 한다. 
• indexOf
• indexOf()는 배열에서 특정 값이 있는지, 어디 있는지 찾기 위해 사용합니다.
  • 값이 있으면 인덱스를 반환 ?? 
  • 없으면 -1을 반환
• let idx = arr.indexOf("강남");
  • 배열 arr에서 "강남"이라는 값을 검색합니다.
  • indexOf()는 첫 번째로 일치하는 값의 인덱스를 반환합니다.
  • "강남"은 배열에 없으므로 결과는 -1
• indexOf("값") → 배열 안에 "값"이 있는지 확인
• 반환값:
  • 있으면 인덱스(위치)
  • 없으면 -1
• indexOf("값", 시작위치) → 특정 위치부터 검색 시작 가능

_03_배열_인덱스검색_indexOf.html

---

• pop 
• pop()은 배열에서 **가장 마지막 요소(맨 뒤)**를 삭제하고,
  그 삭제된 요소를 **반환(리턴)**하는 메서드예요.
• document.write(arr.pop() + "<br>");
  • 배열의 당곡은 삭제가 되지만 
  • 출력은 당곡이 나온다. 
  • 배열의 가장 마지막 요소를 삭제 
• 2번째 방법은 pop을 사용하지 않고. 배열의 마지막 데이터를 삭제하는 방법 

---

• shift()는 pop()의 반대 동작이라고 이해하시면 아주 좋아요.
  하나씩 천천히 줄 단위로 설명드릴게요.
• shift() 핵심 개념 먼저 정리
• 메서드기능 설명삭제 위치반환

  pop()	마지막 요소 삭제	배열의 뒤쪽	삭제된 값
  shift()	첫 번째 요소 삭제	배열의 앞쪽	삭제된 값

_05_배열_삭제_맨앞에_shift.html

---

• 자바스크립트에서도 **함수와 메서드는 모두 함수(Function)**입니다.
  단지, 함수가 객체 안에 들어가면 메서드라고 부르는 것이에요.
• 함수는 "기능을 가진 코드 덩어리"
• 메서드는 "객체 안에 들어 있는 함수"

---

• push
• push()는 배열의 맨 뒤에 값을 추가할 때 사용하는 메서드
• 배열의 길이가 1 늘어남 

_06_배열_추가_맨뒤에_push.html

---

_07_배열_추가_맨앞에_unshift.html

---

• splice() 메서드의 기본 구조
• arr.splice(시작위치, 삭제할 개수);

_08_배열_삭제_splice.html

---

• slice()는 배열에서 일부 요소를 추출할 때 사용하는 메서드입니다
• slice()는 원본 배열을 변경하지 않고, 새로운 배열을 반환합니다.
• arr.slice(시작위치, 끝위치);
• ocument.write(arr); // 미금,정자,수서,양재,당곡
  • **arr**는 원본 배열입니다. slice()는 원본 배열을 변경하지 않고 새로운 배열을 반환하므로, arr는 여전히 변경되지 않은 상태로 남아 있습니다.
• 슬라이스(slice)의 특징
  • 원본 배열을 변경하지 않음: splice()는 원본 배열을 직접 수정하는 반면, slice()는 원본 배열을 변경하지 않고 새로운 배열을 반환합니다.
  • 배열의 일부분만 추출: 배열의 특정 범위만 추출하고 싶을 때 사용합니다.
  • 끝 인덱스는 포함되지 않음: slice()에서 두 번째 인수는 추출을 끝낼 위치, 하지만 끝 위치는 포함되지 않습니다.

• slice()와 splice()의 차이점
  • **slice()**는 배열을 추출해서 새로운 배열을 반환하며, 원본 배열은 변경하지 않습니다.
  • **splice()**는 배열을 수정하거나 삭제하는 데 사용되고, 원본 배열을 직접 변경합니다.

_09_배열_추출_slice.html

---

• join
• join()은 배열의 모든 요소를 하나의 문자열로 결합할 때 사용하는 메서드입니다. 주로 배열의 데이터를 문자열로 변환하거나, 요소들 사이에 구분자를 추가하고 싶을 때 유용합니다. 실무에서, 예를 들어 배열 데이터를 하나의 문자열로 변환해서 표시하거나 출력할 때 자주 사용됩니다.
• 기본적으로 join()은 요소들 사이에 콤마(,)를 넣어 연결합니다.
• typeof rs는 **string**을 반환하므로, 출력은 미금,정자,수서,양재,당곡 : string이 됩니다.
• 배열 데이터를 문자열로 결합할 때
  • 예를 들어, 배열로 저장된 날짜나 항목들을 하나의 문자열로 합쳐야 할 때 사용됩니다.
  • 배열 데이터를 URL 쿼리 스트링으로 만들 때나, CSV 형식으로 저장할 때 유용합니다.

 

• typeof rs:
  • typeof는 데이터 타입을 반환하는 연산자입니다.
  • 여기서 typeof rs는 rs가 **"문자열(string)"**로 바뀌었기 때문에, typeof rs의 결과는 "string"입니다.

_10_배열_연결_join.html

---

• concat
• 배열을 합치기
  • concat을 몰랐을 때는. 새로운 배열을 만들어서. 반복문을 통해 2개의 배열을 새로운 배열에 넣는 방식밖에 몰랐다. 
• x와 y는 각각 두 개의 배열입니다.
• concat()은 배열 합치기를 위한 메서드입니다. x.concat(y)는 배열 x와 배열 y를 합쳐 새로운 배열을 반환합니다.
• 기존 배열에 변화를 주지 않고, 새로운 배열을 반환합니다.
• document.write(rs + "<br>")는 결과를 화면에 출력합니다. 즉, rs 배열은 [1, 2, 3, 4, 5, 6]이 됩니다.

_11_배열_합치기_concat.html

---

---

• 배열은 큰따음표로 적었지만. 출력시 큰따음표는 왜 사라지는가.
  • 배열을 document.writeln() 같은 방법으로 출력할 때, 배열 자체를 문자열로 변환하여 출력합니다. 이때 각 요소는 문자열로 처리되며, 따라서 큰따옴표가 생략된 채 출력됩니다. 결과적으로:
  • 큰따옴표는 배열 요소가 문자열임을 나타내기 위해 사용됩니다.
  • 배열을 출력할 때는 그 값을 문자열로 변환한 후 출력하므로, 큰따옴표는 보이지 않습니다.
• let arr = [a, c, b, d];
  • **a, c, b, d**는 변수로 인식됩니다.
  • 자바스크립트에서 **따옴표 없이 a, c, b, d**를 쓰면 변수명으로 인식되고, 그 변수들이 값을 가진 변수라면 그 값들이 배열에 들어갑니다.
  • let a = "apple";
    let c = "banana";
    let b = "cherry";
    let d = "date";
    
    let arr = [a, c, b, d];  // 배열 안에 변수 a, c, b, d를 넣음
    console.log(arr);  // ["apple", "banana", "cherry", "date"]
  • 배열 안에 변수를 넣을 때: 변수의 값이 배열에 들어갑니다.
  • 배열 안에 문자열을 넣을 때: 문자열 그대로 배열에 들어갑니다.

 

• 4. 데이터 타입 확인 방법예시:
• javascript
  복사편집
  let num = 123; let str = "hello"; let arr = [1, 2, 3]; console.log(typeof num); // "number" console.log(typeof str); // "string" console.log(typeof arr); // "object" (배열도 객체로 취급됨)
• 자바스크립트에서 데이터의 타입을 확인하는 방법은 typeof 연산자를 사용하는 것입니다. 이 연산자는 변수나 값의 데이터 타입을 알려줍니다.

• let arr = ["a", "c", "b", "d"];
  • 여기서 **"a", "c", "b", "d"**는 문자열 값입니다. 이 값들은 배열 arr에 들어간 데이터입니다. 즉, 이 배열은 문자열 값들을 배열의 요소로 저장하고 있는 구조입니다.

 

• REVERSE 반전 

_12_배열_반전_reverse.html

---

• includes
• 배열 안에 특정 값이 존재하는지 확인하는 메서드
• **true 또는 false**로 나옵니다.
• 배열.includes(값)
  값이 배열에 있으면 true
  
  없으면 false

_13_배열_포함_includes.html

---

• arr3.find(...)는 배열에서 조건을 만족하는 "첫 번째 값"을 찾는 메서드입니다.
• value => value % 2 === 0
  → 이 부분은 **콜백 함수(조건 함수)**로,
  배열의 각 요소를 하나씩 검사하면서 짝수인지 확인합니다.

_14_배열_찾기1_find.html

---

• 이 코드는 find() 메서드를 활용해서 배열 안의 객체 중 조건을 만족하는 첫 번째 요소를 찾는 예제
• filter()와 차이
  • find() → 첫 번째 하나만 반환
  • filter() → 조건을 만족하는 모든 요소를 배열로 반환

_15_배열_찾기2_find.html

---

• sort => 오름차순 정렬 
• sort()는 배열을 정렬해주는 자바스크립트 메서드
• 아무 인자 없이 arr.sort()를 사용하면
  ➤ 문자열 기준으로 오름차순 정렬합니다.
  ➤ 즉, 유니코드(사전 순서)에 따라 정렬돼요.

_16_정렬_문자_오름차순.html

---

• 오름차순으로 정렬하고. 뒤집기를 하면 된다.
• sort
• reverse

_17_정렬_문자_내림차순.html

---

• 숫자 오름차순 - 비교함수 
• sort()는 기본적으로 요소들을 문자열로 변환해서 정렬
• sort를 쓸때. 문자열은 정렬이 잘된다.
• 하지만 숫자를 비교할때는 다르다.
  • 일의 자리를 비교하면 정렬이 잘되지만.
  • 십의자리가 넘어가면 숫자앞에만 비교를 하게 되서. 조건을 걸어서 정렬을 해야한다.
  • arr.sort((a, b) => {
    • 조건은 
    • a가 나라고 생각했을때
    • 나보다 크냐. 작냐. 같냐. 이렇게 비교해야한다.
    • 항상 3가지이다.
• "비교 함수(compare function)

---

• 내림차순 정렬 - 숫자. 비교함수
• 조건은 같고 
  • 나보다 크냐. 작냐. 같냐
• 앞으로 갈지 . 뒤로 갈지만 바꿔 주면 된다. 

_19_정렬_숫자_내림차순.html

---

• 정렬 이차원 
• 이 배열을 국어 점수(두 번째 요소) 를 기준으로 오름차순 정렬하는 것이 목표입니다

_20_정렬_이차원.html

---

• _21_다중정렬_이차원
• 목표는:
  • 국어 점수를 기준으로 오름차순 정렬
  • 만약 국어 점수가 같으면, 수학 점수로 오름차순 정렬
• 우선 국어 점수로 기준 정렬
• 국어 점수가 같을 경우 수학 점수 기준으로 정렬 
• 먼저 국어 점수를 기준으로 오름차순 정렬하고, 국어 점수가 같으면 수학 점수를 기준으로 오름차순 정렬됩니다.

_21_다중정렬_이차원.html

---

• 정렬 이차원 문자.
• member 이 배열을 이름 기준으로 오름차순 정렬하고 출력하는 코드입니다.
• 2차 배열에서는 그냥 sort를 사용하지 않고. 정확하게 하기 위해서
• 비교함수를 이용해서 정렬을 해야한다. 문자일지라도. 

_22_정렬_이차원_문자.html

---