JS 데이터(1)

🌟 'String mdn' 형태로 검색 자주 해보기 -> MDN(Mozilla Developer Network)은 웹 기술 학습 플랫폼

1. 문자

• 우리가 만든 따옴표 안의 문자열(리터럴 방식)은 String.prototype
• str.indexOf() 문자열 검색(시작 인덱스 반환)
• str.length 길이 반환
• console.log('ABC'.indexOf('D') !== -1) 없으므로 false 출력
• str.slice(0, 3) 0~2 추출
• str.replace('A', 'D') A->D 대체(삭제에 활용 가능)
• str.match(/.+(?=@/)[0]) @ 앞의 문자 추출(정규표현식 사용)
• str.trim() 앞뒤 공백 전부 삭제

2. 숫자와 수학

• num.toFixed(2) 소수점 2번째자리까지만 유지해 문자데이터로 반환
• parseInt(str) 문자열->정수 추출해 반환
• parseFloat(str) 문자열->소수점까지 추출해 반환
• Math.abs(-5) 절댓값 5 반환
• Math.min(2, 8) 최솟값 2 반환
• Math.max(2, 8) 최댓값 8 반환
• Math.ceil(3.14) 올림해 4 반환
• Math.floor(3.14) 내림해 4 반환
• Math.round(3.14) 반올림해 4 반환
• Math.random() 0~1 사이 난수 반환
  -> Math.random() * 10 일의 자리 수가 0~9

3. 배열

1) 원본데이터 손상 X

• array1.find(element => element > 10) 조건 처음으로 만족하는 array1의 요소 찾아 반환(화살표 함수가 콜백으로 삽입)
• array1.length
• array1.concat(array2) array1+array2 이어 붙인 새로운 배열 반환

array1.forEach( (element, index, array) => {
	condole.log(element, index, array)
})

array1의 요소 개수 만큼 콜백 함수 반복 -> 순회하며 element와 index 변화, array는 array1 의미 / 매개변수 이름은 마음대로 변경 가능

• array1.map( (el, i) => `${el}-${i}` ) 순회하며 반환값을 묶어 배열로 반환 -> 반환값을 객체로하면 객체 담은 배열 반환 가능

🌟 화살표 함수 사용 전 그 안에서 this 사용하고 있는가 꼭! 확인하기

• array1.filter(el => el<3) 순회하며 반환값을 묶어 배열로 반환, 반환값 true인 경우 true 대신 해당 요소 자체를 반환값으로 전달
  -> false 존재하는 경우 요소 개수가 원본과 다를 수 있음!
• array1.find(el => /^B/.test(el)) B로 시작하는 문자데이터=el이면 해당 요소 반환(정규표현식 사용)
• array1.findIndex(el => /^B/.test(el)) 같은 로직으로 해당 요소의 index 반환
• array1.includes(5) 5가 포함되어있는지 true or false 반환

🌟 arr.forEach() arr.map() arr.filter() 구분하기!!!

2) 원본데이터 손상 O

• array1.push(5) 배열 맨 끝에 5 넣기
• array1.unshift(5) 배열 맨 앞에 5 넣기
• array1.reverse() 배열 내 요소 순서 뒤집기
• array1.splice(2, 1) index 2번부터 1개 삭제
• array1.splice(2, 0, 999) index 2번부터 0개 제거 후 해당 자리에 999 삽입 -> 끼워넣기

4. 객체

• Mdn 문서의 함수 원형 중 가운데 prototype 없이 사용되는 함수들은 위처럼 인스턴스 자체에 사용 불가 -> Object 자체에 사용하는 ‘정적(static) 메소드’
• const returnedTarget = Object.assign(target, source) source 객체(하나 이상)의 속성 복사해 target에 붙여넣기 (key 겹치면 값 덮어쓰기) -> 결과는 target = returnedTarget (주소 자체가 아예 같음)
• 객체는 key:value 같아도 일치연산자 === 결과는 false
  -> (객체는 참조형 데이터) 참조 메모리 주소가 다르기 때문
• const target = Object.assign({}, userAge, userEmail) 원본 수정 없이 빈 객체에 복사해 target으로 반환받을 수 있음
• const keys = Object.keys(user) user 객체의 key들 추출해 배열로 반환
• 객체에서 indexing 가능 -> user[‘email’] = user.email 같은 의미
• const values = keys.map(key => user[key]) 각 key의 value값 담은 배열 반환