[🥸JavaScript]📝 this 호출방식과 사용법, JSON 개념➰(parse, stringify)

📍 개요

◾ 자바스크립트의 `this`, 반복문, 배열 메서드, JSON 메서드를 이해하고 활용하는 방법에 대해 학습하였습니다.

---

1️⃣ this 키워드 이해하기

📁 일반 함수 호출

function showThis() {
  console.log(this);
}

showThis(); // 'this'는 브라우저 환경에서 window 객체를 가리킵니다.

👉🏻  함수가 전역 컨텍스트에서 호출될 때 this는 전역 객체를 참조합니다.
 

📁 화살표 함수 호출

const obj = {
  f: function () {
    const ff = () => {
      console.log(this);
    };
    ff();
 
    const fff = function () {
      console.log(this);
    };
    fff();
  },
};

obj.f();
// f (화살표 함수 ff에서의 this)
// Window 객체 (일반 함수 fff에서의 this)

👉🏻 화살표 함수에서 this는 함수가 정의된 위치의 컨텍스트를 유지합니다.
 

📁 객체의 메서드 호출

const obj = {
  f: function () {
    console.log(this);
  },
};

obj.f();

 

👉🏻 this는 obj 객체를 참조하며 메서드를 호출한 자기 자신의 객체를 참조합니다.
 

📁 생성자 함수 호출

function Person(name) {
  this.name = name;
  console.log(this);
}
 
const person1 = new Person('licat'); // Person { name: "licat" }

👉🏻 new 키워드를 사용해서 생성자 함수를 호출하면 this는 새로 생성된 객체를 나타냅니다.
 

📁 이벤트 핸들러 호출

<button id="myButton">Click me</button>
<script>
  document.getElementById('myButton').addEventListener('click', function() {
    console.log(this); // 'this'는 클릭된 버튼 요소를 참조합니다.
  });
</script>

👉🏻  이벤트를 발생시킨 요소를 참조하는데 예를 들어, HTML 버튼 클릭 이벤트에서 this는 클릭된 버튼 요소를 가리킵니다.

이벤트 핸들러는 `addEventListener` 메서드를 사용하여 특정 요소에 할당됩니다.
 

2️⃣ (for ...in), (for ...of) 의 차이

◾ `for ...in` : 객체의 키(key) 순회

const obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
  console.log(key); // 'a', 'b', 'c'
}

 

◾ `for ...of` : 객체의 값(value) 순회

const arr = [1, 2, 3];
for (let value of arr) {
  console.log(value); // 1, 2, 3
}

for-of는 iterable 객체에서만 사용할 수 있습니다. 
따라서 객체(object)는 iterable이 아니기 때문에 for-of로 순회할 수 없습니다.
❗객체는 iterable이 아니기 때문에 for of가 불가하며 object는 for-in만 가능합니다.

3️⃣ 배열 메서드(filter, reduce)

◾ `filter`

배열 안에 들어간 함수가 조건에 맞는 요소들만 모아서 새로운 배열 생성합니다.

const arr = [1, 2, 3, 4, 5];
const evenNumbers = arr.filter(x => x % 2 === 0); // [2, 4]

◾ `reduce`

배열의 각 요소를 누적하여 단일 값으로 반환합니다.

let arr2 = [1, 2, 3, 4, 5];
arr2.reduce((a, c) => a + c, 0); // a는 누적값(accumulator), c는 현재(current value)
// 0이 없으면 비어있는 배열일때 에러가 납니다.

/* reduce 활용 예제 */
let arr2 = [1, 2, 3, 4, 5];
const sum = arr2.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // 15

0은 초기값으로, 만약 0이 없다면 첫 번째 요소가 초기값으로 사용됩니다.
❗빈 배열에서는 reduce가 오류를 발생시킬 수 있습니다.

4️⃣ JSON 의 개념과 메서드

데이터를 저장하고 전송하는 데 사용되는 가벼운 텍스트 기반의 데이터 교환 형식
 
✔️ 이름, 값 (`:` 콜론 표기)
✔️ 데이터 객체(`,` 쉼표 표기)
✔️ 배열(`[]` 대괄호 표기)
 

◾ `parse()` : JSON 문자열을 JavaScript 객체로 변환

const jsonString = '{"result":true,"count":42}';
const obj = JSON.parse(jsonString) // { result: true, count: 42 }

❗ JSON 문자열은 큰따옴표로 감싸야 하며, 키와 문자열 값은 항상 큰따옴표로 작성해야 합니다.
 

◾ `stringify()` :  JavaScript 객체나 배열을 문자열로 변환

const obj = { result: true, count: 42 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // '{"result":true,"count":42}'

 

5️⃣ Document 개념과 활용

const logo = document.getElementById('logo');
const sectionTitle = document.querySelector('#section-title');
const sectionTitleAll = document.querySelectorAll('#section-title');
const hello = document.querySelector('.hello');

도큐먼트는 HTML 문서 전체를 의미합니다.
`document` 객체의 속성과 메서드는 문서의 구조와 내용에 접근하거나 조작할 수 있게 해줍니다.

📁 자주 쓰는 document 메서드

`document.getElementById()` : 주어진 ID를 가진 HTML 요소를 반환합니다.
`document.querySelector()` : 주어진 CSS 선택자와 일치하는 첫 번째 HTML 요소를 반환
`document.querySelectorAll()` : 주어진 CSS 선택자와 일치하는 모든 HTML 요소를 반환합니다.

 

취향저격짤ㅋ

 

---

📝 8일차 부트캠프 회고

1️⃣ 잘했던 점
오늘 수업은 아웃사이더 외톨이 노래 같았다..😖
분명 아침 9시에 수업을 했는데 정신을 차리고보면
오후 6시가 되는 마법이 일어난다💦
다행인 것은 정말 유익한 내용이 많다는 것이다.

강의시간에 어떤 수업인지 이해가 잘 안 가도
일단 듣고 메모하다보면 개인 자습시간에
진행했던 코드 실습 위주로 공부하면
다음 시간에 뭔가 약간 괜찮아진 느낌이든다.
이것이 복습의 힘..?!🫢

2️⃣  부족했던 점
마지막 자바스크립트 시간이 끝났는데
다음 주부터는 FE프로젝트를 진행한다.
미리 어떻게 구조를 짜면 좋을지 생각해봐야겠다.
분명 이것저것 개발이랑 회고록 쓰다보면
시간이 부족할거라 예상해본다🥲

3️⃣ 향후 개선 방향
이번 주말에 자바 스크립트 공부에 집중해야겠다.
내 생각으로는 HTML이랑 CSS는
얼추 실력이 많이 나아진 것 같고
자바스크립트가 문제다!😵‍💫