[2023 신입부원 심화 스터디] 박지민 #3주차 - 보충수업 Part .1, Part. 2

1. 문자열 메소드

- toUpperCase() : 문자열을 모두 대문자로 변환

- toLowerCase() : 문자열을 모두 소문자로 변환

- trim() : 문자열의 앞 뒤 공백 제거

- trimStart() : 문자열의 앞쪽 공백 제거

- trimEnd() : 문자열의 뒤쪽 공백 제거

- repeat(n) : 문자열을 n번만큼 반복해서 새로운 문자열 반환 (원본 객체 변함 X)

- padStart(n, c) : 앞쪽에 지정한 값 넣음  - 문자열의 길이가 n이 될 때까지 c값 넣기 (원본 객체 변함 X)

- padEnd(n, c) : 뒤쪽에 지정한 값 넣음 - 문자열의 길이가 n이 될 때까지 c값 넣기 (원본 객체 변함 X)

- indexOf(c) : 주어진 키워드 값을 문자열에서 검색하여 일치하는 첫 번째 인덱스, 없다면 -1 반환

- includes(c) : 키워드 존재 여부 판단 - 일치하는 값을 찾으면 true, 못 찾으면 false 반환

- startsWith(c) : 문자열이 주어진 문자열로 시작하면 true, 아니면 false 반환

- endsWith(c) : 문자열이 주어진 문자열로 끝나면 true, 아니면 false 반환

- replace(a, b) : 주어진 패턴과 일치하는 첫 번째 부분을 주어진 문자열로 교체 → 새로운 문자열 반환 (일치하는 문자가 여러 개더라도 첫 번째로 일치하는 부분만 교체)

- replaceAll(a, b) : 주어진 패턴과 일치하는 모든 부분을 주어진 문자열로 교체

- substring(a, b) : 주어진 시작 인덱스부터 주어진 종료 이전 인덱스까지 새로운 부분 문자열로 반환

- split(c) : 문자열을 주어진 구분자를 기준으로 잘라서 결과를 배열로 반환

- slice(n) : 주어진 인자에 따라 문자열의 일부를 추출 → 새로운 문자열 반환 - 시작 위치를 의미하는 필수 인자 1개와 종료 위치를 의미하는 선택적 인자 1개를 가질 수 있음 (음수로도 표현 가능 - 끝에서 부터 문자열을 자름)

 

2. 배열 메소드

2-1. 배열 요소 조작

- push(n) : 배열 끝에 새로운 요소 추가

- pop() : 끝에서부터 요소 제거 & 제거한 요소 반환

- unshift(n) : 배열 앞 부분에 새로운 요소 추가

- shift() : 배열 앞 부분부터 요소 제거

- forEach(함수) : 주어진 함수를 배열 요소에 각각 실행 (원본 배열 값 변경 / 리턴 X)

const arr = [1, 2, 3, 4, 5]

// 1
function print(number, index) {
	console.log('${index} 위치의 요소 : ${number}'};
};
arr.forEach(print);

// 2
const print(number, index) => {
	console.log('${index} 위치의 요소 : ${number}'};
}; // 화살표 함수
arr.forEach(print);

// 3
arr.forEach(number, index) => {
	console.log('${index} 위치의 요소 : ${number}'};
}; // 함수 부분을 forEach() 메소드 인자로 사용 가능

- map(함수) : forEach()와 비슷하게 동작하지만 새로운 배열 반환 (함수 적용하여 처리한 결과 저장할 때 사용)

const arr = [1, 2, 3, 4, 5];
const newArr = arr.map((number, index) => number + 1);
console.log(newArr); // [2, 3, 4, 5, 6]

 

2-2. 배열 요소 검색

- includes(c) : 배열에 주어진 요소가 포함된다면 true 없다면 false 반환

- find(함수) : 주어진 판별 함수를 만족하는 첫 번째 요소 값을 반환 (조건을 만족하지 않으면 undefined)

- findIndex(함수) : 주어진 판별 함수를 만족하는 첫 번째 요소의 인덱스 값을 반환 (만족하는 요소를 찾지 못하면 -1 리턴)

 

2-3. 배열 요소 수정

- fill(n) : 배열을 지정한 값으로 채워줌 - 시작 인덱스와 종료 인덱스 선택하여 지정 가능 (원본 배열 그 자체를 수정)

- slice() : 배열의 복사본을 조각내서 새로운 배열로 반환 (원본 배열 변함 X)

- splice() : 필수 인자로 시작 인덱스를 가지고 선택적 인자로 배열에서 제거할 요소의 개수와 추가할 요소 개수 지정 가능

 

2-4. 추가 메서드

- join() : 배열의 모든 요소들을 이어 붙여 하나의 문자열로 반환 (구분자를 인자로 추가 가능 - 생략할 경우 기본적으로 쉼표 적용)

- concat(n) : 인자로 주어진 배열이나 값들을 기존 배열에 합쳐 새로운 배열로 반환

- filter(함) : 주어진 판별 함수의 결과값이 참인 결과들만 모아서 새로운 배열로 반환 (필터링)

- reduce(함수이름) : 배열의 각 요소에 대해서 주어진 함수를 실행한 다음 하나의 값을 반환

 

3. 객체 심화

- 배열을 순회할 때는 for of 또는 forEach 사용

- for in은 반복문의 객체 버전

- for of는 [Symbol.iterator] 속성을 가지는 ‘반복이 가능한 객체’에서 사용 가능

// 기본 사용법
const obj = {
	x: 1,
	y: 2,
	z: 3,
};

for (key in obj) {
	console.log(key);
};

// 객체 축약 표현
const name = '이도해';
const country = 'KR';

const user = {
	// key와 값이 똑같은 이름을 사용 → 뒷부분을 지우고 중복된 이름을 한 번만 명시 가능
	name,
	country,
};

console.log(user); // {name: '이도해', country: 'KR'}

// 메소드 축약 표현
const obj = {
	greeting: function() {
		console.log('Hi!');
	},
};

// 함수를 호출할 때는 객채의 프로퍼티로 접근
obj.greeting(); // Hi!

// 객체 내부의 메소드를 작성할 때는 function 키워드 삭제 가능
const obj = {
	greeting() {
		console.log('Hi!');
	},
};

obj.greeting(); // Hi!

- Object.keys() : 객체가 가지고 있는 key을 배열로 반환

 

- 정적 메소드의 호출

• 변수.메소드()로 바로 사용할 수 있는 건 객체의 자체 내장 메소드
• 정적 메소드들은 생성된 객체에 내장되어 있는 것이 아니라 Object, Array 클래스가 가지고 있기 때문에 앞에 Object 또는 Array 등을 붙여야 사용 가능

const obj = {
	x: 10,
	y: 20,
	z: 30,
};

// Object.keys() : 객체가 가지고 있는 key을 배열로 반환
console.log(Object.keys(obj)); // ['x', 'y', 'z']

// Object.values() : 객체가 가지고 있는 값들을 배열로 반환
console.log(Object.values(obj)); // [10, 20, 30]

// Object.entries() : 키와 값의 쌍을 하나의 배열로 묶어 개별적인 요소로 가지는 배열로 반환
console.log(Object.entries(obj)); // [Array(2), Array(2), Array(2)]

4. 구조분해할당

• 배열이나 객체의 구조를 분해하여 분해된 값을 개별적인 변수에 담는 표현식

- 배열의 구조분해할당 : 변수 선언 및 할당 한 번에 가능

• 우측에 있는 배열을 구조 분해하여 좌측에 있는 변수들에 각각 할당

const arr = [1, 2, 3, 4, 5];
const [one, two, three] = arr;
console.log(one, two, three); // 1 2 3

- 객체의 구조분해할당 : 배열과 사용법 동일

const obj = {
	x: 10,
	y: 20,
};

const { x, y } = obj;
console.log(x, y); // 10 20

// 할당할 때 변수명 지정하기
const { x: hello, y: hi } = obj;
console.log(hello, hi); // 10 20

- 객체의 중첩 구조분해할당

const obj = {
	one: {
		two: {
			three: 'Bingo',
		},
	},
};

const { 
	one: { 
		two: { three },
	},
} = obj;

console.log(bingo); // Bingo

- 함수와 구조분해할당

const obj = {
	x: 10,
	y: 20,
};

function sum({ x, y }) {
	return x + y;
}

console.log(sum(obj)); // 30

 

5. DOM

• html이나 xml같은 문서의 요소들을 계층적으로 표현하여 생성하고 수정하고 삭제하는 등 조작이 가능하게 해주는 인터페이스

5-1. HTML 요소 선택

- getElementById() : id 값을 사용하여 요소 선택

- getElementsByClassName() : class 이름을 사용하여 요소 선택 (배열처럼 리턴)

- getElementsByTagName() : 태그 이름 사용하여 요소 선택 (배열로 반환)

- querySelector() : 동일한 메소드를 사용해서 아이디, 클래스 , 태그 이름 모두 선택 가능

- querySelectorAll() : 인자로 지정한 선택자와 일치하는 요소들을 모두 선택 (다수의 요소들을 배열처럼 가져올 때 사용)

 

5-2. 새로운 요소 생성하여 HTML 문서에 추가

- createElement() : 새로운 요소 생성해서 HTML 문서에 추가

• 인자 값으로 생성하려는 요소의 태그를 문자열로 전달
• 문서에 실제로 추가해주지 않으면 보이지 않음

// html 파일
...
<body>
<h2>Hello</h2>
</body>
...

// js 파일
const title = document.createElement('h1');
const body = document.querySelector('body');

title.innerText = '새로운 아이';
title.style = 'red';

body.appendChild(title);

 

6. 이벤트

• 어떤 동작이나 상태 등의 사건이 발생
  • ex) 사용자가 키보드를 누룸, 마우스를 누르거나 스크롤을 내림
• js는 발생한 이벤트에 반응해서 동작을 수행 이벤트 리스너를 사용하여 핸들러 지정

- addEventListener() : 이벤트 리스너를 등록

- removeEventListener() : 이벤트 리스너 삭제

// html파일
...
<body>
<button>버튼</button>
<button class="remove">이벤트를 삭제</button>
</body>
...

// js파일
const buton = document.querySelector('button');
const removeButton = document.querySelector('.remove');

function handler(event) {
	console.log('러뷰');
}
function removeHandler(event) {
	button.removeEventListener('click',handler);
}

// 버튼을 클릭할때마다 러뷰가 출력된다.
button.addEventListener('click',handler);
// 이벤트를 삭제 버튼을 누르면 러뷰 버튼을 눌러도 굿이 출력되지 않는다.
removeButton.addEventListener('click', removeHandler);

7. 모듈

• 코드를 모아둔 하나의 파일
  • 재사용성이나 유지 보수성을 위해서 사용
• import : 외부에 있는 모듈 가져오기 가능
• export : 외부로 내보낼 수 있음

- 이름이 정의된 내보내기 방식 (named exports) : 함수나 변수 클래스 등의 선언 키워드 앞에 export 명령어 붙임

• 하나의 모듈에서 여러 개의 함수나 객체 변수 등을 내보낼 수 있음
• 가져올 때는 중괄호 안에 이름만 나열하면 됨

// index.html
...
<body>
...
// 내보낸 함수를 기존 파일에서 가져와 쓰려면 script 태그에 type=”module” 추가
<script type="module" src="index.js"></script> 
</body>
...

// hello.js
export function greeting() { 
	console.log('Hello');
}

// 선언부와 export를 분리할 수도 있다.
function greeting() {
	console.log('Hello');
}
export {greeting};
 

import {greeting} from './hello.js';

greeting(); // Hello

- 기본 내보내기 방식 (default exports) : 모듈에서 하나의함수나 객체 변수들을 기본으로 내보내고자 할 때 사용

• export 키워드 뒤에 default 키워드 추가
• 중괄호 생략 가능 & 사용자가 쓰려는 이름으로 사용 가능

/ index.html
...
<body>
...
<script type="module" src="index.js"></script>
</body>
...

// hello.js
export default function greeting() { 
	console.log('Hello');
}

// 선언부와 export를 분리
function greeting() {
	console.log('Hello');
}

export default greeting;
 
 
import greeting from './hello.js';

greeting(); // Hello