[2023 신입부원 심화 스터디] 신진욱 #3주차 - Part 4, Part 5

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. 배열 메소드

- 배열 요소 조작

- push(n) : 배열 끝 부분에 추가

- pop() : 배열 끝 부분 삭제

- unshift(n) : 배열 앞 부분에 추가

- shift() :  배열 앞 부분 삭제

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

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

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

// 표현식 2
arr.forEach((number,index) => {
	console.log(`${index} 위치의 요소 : ${number}`);
});

- map(함수) : forEach와 비슷하게 동작하지만 새로운 배열을 반환

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

- 배열 요소 검색

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

- find(함수) : 주어진 판별 함수를 만족하는 첫번째 요소의 값 반환

- findIndex(함수) : 주어진 판별 함수를 만족하는 첫번째 요소의 인덱스 반환

 

- 배열 요소 수정

- fill(n) : 배열을 지정한 값으로 채우는데 원본 배열 수정 O (시작 인덱스와 종료 인덱스 선택적으로 지정 가능)

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

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

 

- 추가 메소드

- join() : 배열의 모든 요소들(','포함)을 이어붙여서 하나의 문자열을 반환 (인자로 구분자를 넣을 수도 있다)

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

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

- reduce(reducer) : 배열의 각 요소에 대해서 reducer 함수 실행 후 하나의 값을 반환

const arr = [1,2,3,4,5];
const reducer = (acc, value) => acc + value; // 필수 인자인 누산기 (acc), 현재 값(cur)을 가지고, 선택적으로 현재 인덱스(idx), 원본 배열(src) 인자를 가질 수 있습니다.
console.log(arr.reduce(reducer)); // 배열의 각 요소에 대해서 reducer 함수 실행 후 하나의 값을 반환
console.log(arr.reduce(reducer, 10)); // 누산기 초기 값 지정 가능

3. 객체 심화

• 배열 순회할 때는 for of 또는 for Each 사용
• 반복문 중 객체에 사용할 수 있는 건 for in
• 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 = {
	name, // name = name 대신 
	country, // country = country 대신
};
console.log(user);

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

- 정적 메소드 호출

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

const obj = {
	x:10;
	y:20;
	z:30;
};
// Object.keys() : 객체가 가지고 있는 key들을 배열로 반환
console.log(Object.keys(obj));
// 전역 객체 Object 안에 있는 keys 라는 정적 메소드를 사용하는 것!

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

// Object.entries() : key와 value의 쌍을 하나의 배열로 묶어 그것들을 개별적인 요소로 가지는 배열 반환 
console.log(Object.entries(obj));

4. 구조 분해 할당

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

- 배열 구조 분해

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

const one = arr[0];
const two = arr[1];
const three = arr[2];

// 구조 분해 할당 표현
const [one, tow, three] = arr;

- 객체 구조 분해

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

// 구조 분해 할당 표현
const {x, y} = obj; // key값으로 지정
console.log(x,y); // 10 20

// 할당할 떄 변수명을 내가 원하는 식으로 쓰고 싶다면?
const {x:a, y:b} = obj;
console.log(a,b); // 10 20

- 객체 중첩 구조 분해 할당

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

const bingo = obj.one.two.three;
console.log(bingo); // Bingo

// 구조 분해 할당 표현
const {
	one: {
		two: {three}, // 변수 이름 바꾸고 싶다면 ex) three:a
	},
} = obj;
console.log(three); // Bingo

- 함수와 구조 분해 할당

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

function sum(obj) {
	return obj.x + obj.y;
}

// 구조 분해 할당 표현
function sum({x,y}) {
	return x + y;
} 

console.log(sum(obj));

5. DOM (Document Object Model)

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

- html 요소 선택

• getElementById() - Id 값으로 요소를 선택
  • document.getElementById('id값'); // 단일 값 반환

• getElementByClassName() - class 이름으로 요소를 선택
  • document.getElementsById('class값'); // 배열처럼 반환
• getElementByTagName() - tag 이름으로 요소를 선택
  • document.getElementsByTagName('태그'); // 배열처럼 반환
• querySelector('값')와 querySelectorAll('값')이라는 메소드를 사용하면 동일한 메소드를 사용해서 아이디,클래스,태그 이름으로 모두 선택할 수 있다.
  • querySelector('값')
    • document.querySelector('h2'); // 태그 기준
    • document.querySelector('#id값'); // id 기준
    • document.querySelector('.class값'); // class 기준
  • querySelectorAll('값') - 인자로 지정한 선택자와 일치하는 요소들을 모두 선택, 다수의 요소들을 배열처럼 가져오기 위해서 사용
    • document.querySelectorAll('.class값'); // class 기준

- html 요소 변경

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

// js 파일
const title = document.querySelector('h2');
title.innerText = '안녕하세요!';
title.style.color = 'blue';
// 검은색의 Hello 문자가 파란색의 안녕하세요!로 바뀜

- 새로운 요소 생성하여 html 문서에 추가

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

// js 파일
const title = document.createElement('h1');
const body = document.querySelector('body');
title.innerText = '새로운 친구에요!';
title.style.color = 'red';
body.appendChild(title);
// -> 빨간색의 새로운 친구에요!가 문서에 추가됨

6. 이벤트

• 동작이나 사건의 발생 (ex) 키보드 누름, 마우스 클릭, 스크롤 내림 등)
• js에서는 이벤트에 반응하기 위해 해당 이벤트를 감지할 수 있는 이벤트 리스너를 사용해 핸들러 지정
• 이벤트 등록, 삭제 방법
  • addEventListener(), removeEventListener()

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

// js파일
const button = 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

// index.html
...
<body>
...
<script type="module" src="index.js"></script> // 모듈을 사용하기 위해 타입 속성 지정
</body>
...

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

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

- Default Exports

// 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;
 
// index.js
import greeting from './hello.js';
greeting(); // Hello
// 모듈의 이름을 사용자가 새로 정의 가능