내일배움캠프 React_7기 TIL - 6.javascript 문법 종합반 1주차 강의 내용 필기

객체 관련 메소드

메소드	목적	반환값	원본 객체 변화	설명	인자
Object.keys()	객체의 모든 키를 배열로 반환	주어진 객체의 키로 구성된 배열	원본 객체 변경 없음	주어진 객체의 속성 이름(키)만 포함된 배열을 반환
Object.values()	객체의 모든 값을 배열로 반환	주어진 객체의 값으로 구성된 배열	원본 객체 변경 없음	주어진 객체의 속성 값만 포함된 배열을 반환
Object.entries()	객체의 모든 [키, 값] 쌍을 배열로 반환	주어진 객체의 [키, 값] 쌍으로 구성된 배열	원본 객체 변경 없음	주어진 객체의 속성 이름과 값으로 구성된 2차원 배열을 반환
Object.assign()	객체를 (얕)복사하거나 병합	타겟 객체를 반환	원본 객체 변경 가능	첫 번째 인자로 전달된 객체에 이후 인자 객체의 속성을 복사	타겟(어디에), 소스(무엇을), 변경값
JSON.stringify()	객체를 JSON 문자열로 변환	객체의 JSON 문자열	원본 객체 변경 없음	JavaScript 객체를 JSON 문자열로 변환, 직렬화

1. JSON.stringify(value):
   • 주어진 JavaScript 객체 value를 JSON 형식의 문자열로 변환합니다.
   • 예시:

     javascript
     코드 복사
     let obj = { a: 1, b: 2, c: 3 };
     let jsonString = JSON.stringify(obj);
     console.log(jsonString); // '{"a":1,"b":2,"c":3}'
     

요약

• JSON.stringify()는 객체를 JSON 문자열로 직렬화하는 데 사용되며, 네트워크 전송이나 저장을 위해 데이터를 문자열 형태로 변환할 때 유용합니다.

스프레드 오퍼레이터

특징	설명	사용 예시
배열 복사	기존 배열을 복사하여 새로운 배열을 생성합니다.	let arr2 = [...arr1];
배열 결합	두 개 이상의 배열을 결합하여 새로운 배열을 생성합니다.	let combined = [...arr1, ...arr3];
객체 복사	기존 객체를 복사하여 새로운 객체를 생성합니다.	let obj2 = { ...obj1 };
객체 병합	두 개 이상의 객체를 병합하여 새로운 객체를 생성합니다.	let merged = { ...obj1, ...obj3 };
함수 인자 전달	배열의 요소를 개별 인자로 펼쳐 함수에 전달할 수 있습니다.	console.log(sum(...numbers));
얕은 복사	중첩된 객체나 배열의 경우, 원본 객체와 복사된 객체가 같은 참조를 공유합니다.	obj2.b.c = 3; console.log(obj1.b.c); // 3

let arr2 = [...arr1];
let arr2 = arr1; 의 차이점

1. let arr2 = [...arr1]; 의 경우

   얕은 복사 (Shallow Copy) 실행. arr1의 내용을 복사하여 arr2를 생성하고, 두 배열은 독립적

2. let arr2 = arr1 의 경우

   참조 복사 (Reference Copy) 실행. arr2는 arr1을 참조한다. 즉, 두 변수가 동일한 배열을 가르킨다.

   arr2에서 요소를 변경하면 arr1에도 영향을 미친다.

배열 순회 관련 메소드

특징	forEach	map	filter	find
대상	배열	배열	배열	배열
목적	각 요소에 대해 작업 수행	각 요소를 변환하여 새 배열 생성	조건에 맞는 요소로 새 배열 생성	조건을 만족하는 첫 번째 요소 찾기
반환값	없음 (undefined 반환)	새로운 배열 (변환된 요소들)	새로운 배열 (조건을 만족하는 요소들)	조건을 만족하는 첫 번째 요소 또는 undefined
원본 배열 변화	원본 배열 변경 없음	원본 배열 변경 없음	원본 배열 변경 없음	원본 배열 변경 없음
용도	부수 효과 (예: 로그 출력)	요소 변환 (예: 단위 변환)	요소 필터링 (예: 특정 조건 만족)	첫 번째 조건 만족 요소 찾기
사용 예시	array.forEach(item => {...})	let newArray = array.map(item => {...})	let filteredArray = array.filter(item => {...})	let foundElement = array.find(item => {...})

filter 사용법. 콜백 함수의 return으로 원하는 조건을 지정

let numbers = [1, 2, 3, 4, 5, 6];

// 3보다 큰 숫자만 필터링
let greaterThanThree = numbers.filter(num => num > 3);

console.log(greaterThanThree); // [4, 5, 6]

map의 콜백함수 반환으로 아무것도 안주면 undefinded

1주차 만만하게 봤는데, 내가 모르거나 잊고 있던 것을 다시 배우는 시간이였다.