[2023 신입부원 심화 스터디] 이정욱 #3주차 - 보충 수업 Part1, 2

1. 문자열 메소드

1) toUppercase(), toLowerCase()

모두 대문자로 바꿔주거나 소문자로 변환해줌

2)trim(), trimStart(), trimEnd()

trim()은 모든 공백 삭제

trimStart()은 앞쪽 공백 삭제

trimEnd()은 뒷쪽 공백 삭제

3)repeat()

repeat에 반복 횟수를 넣어주면 해당str이 반복 횟수만큼 반복함.

 

4)padEnd(), padStart()

padding해줄 간격과 그 간격 만큼 채워 넣을 문자를 입력해주면 그만큼 padding을 채워 넣어 준다.

 

5)indexOf()

특정 문자열이 문자열 인덱스 어디 부분에 있는지 찾아줌. 만약에 특정 문자열이 없다면 -1을 리턴

 

6)includes()

특정 문자열을 포함하고 있는지 확인하여 true, false로 출력함

 

7)startsWith(), endsWith()

특정 문자열로 시작하거나 끝나는지 확인하여 true, false로 출력함

 

8)replace(), replaceAll()

문자열 안에 있는 해당 문자열을 다른 문자열로 대체해준다. 해당 문자열이 여러개 있을 경우 가장 먼저 나오는 문자열을 대체한다.

replaceAll()은 해당되는 문자열이 여러개인 경우 모두 대체한다.

 

9)substring()

시작과 종료 인덱스를 지정해주면 해당 문자열을 시작부터 종료 인덱스 이전 인덱스까지 자른 문자열을 반환한다.

 

10)split()

문자열을 기준이 될 문자열을 기준으로 하여 자른 뒤 자른 문자열들을 배열에 담아 반환한다.

 

11)slice()

substring()과 마찬가지로 시작과 종료 인덱스를 지정해주면 해당 문자열을 시작부터 종료 인덱스 이전 인덱스까지 자른 문자열을 반환해준다.

 

2. 배열 메소드

1)push(), pop(), unshift(), shift()

• 자바스크립트에서는 배열을 마치 deque와 같이 활용할 수 있다.
• push(), pop()을 통해 배열 끝에 요소를 추가하거나 제거할수 있고
• unshift(), shift()를 통해 배열 앞에 요소를 추가하거나 제거할수 있다.

2) forEach(), map()

• forEach()는 함수를 매개변수로 받아 이를 배열에 실행해준다. 매개변수로 받아오는 함수를 callback함수라고 하며 이런식으로 매개변수로 함수를 받아오는 함수를 고차 함수라고 한다. callback함수에서 배열의 요소인 currentValue는 필수인 매개변수이고, index와 array는 선택적으로 사용 가능하다. 또한 forEach에는 tihsArg라는 선택적 매개변수가 있는데 이를 사용하여 forEach안에서 this가 가리킬 객체를 지정할 수 있다.

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

arr.forEach((item, index) => {
	console.log(`${index} 위치의 요소: ${item}`);
})

• map()은 forEach()와 유사하게 실행되지만 새로운 배열을 반환한다는 차이점이 있다.

3)include(), find(), findindex()

• include()는 문자열에서와 같이 해당 값이 배열에 있으면 true, 아니면 false를 리턴한다.
• find()는 주어진 판별 함수(조건)을 만족하는 첫번째 요소의 값을 리턴한다.
• find()는 주어진 판별 함수(조건)을 만족하는 첫번째 요소의 index값을 리턴한다.

4)fill(), slice(), splice(), join(), concat(), filter(), reduce()

• fill()은 지정한 값으로 배열을 모두 채워주며 시작과 끝의 범위를 정해줄수도 있다.
• slice()는 지정된 시작 index부터 끝까지 또는 주어진 종료 인덱스 전까지 잘라서 만든 새로운 배열을 리턴한다.
• splice()는 지정된 인덱스 범위만큼 잘라서 배열에서 제거한다. 제거된 부분에 새로운 값을 대체해줄수도 있다.
• join()은 배열의 요소들을 더하여 새로운 문자열을 반환해준다.
• concat()은 배열과 배열을 더하여 새로운 배열을 만들어준다.
• filter()는 주어진 판별 함수(조건)을 만족하는 요소로 이루어진 새로운 배열을 리턴한다.

5)reduce() 

reduce() 함수는 배열의 각 요소에 대해 주어진 reducer(callback) 함수를 실행하고 그 결과값을 반환합니다

매개변수

• callback: 배열의 각 요소에 대해 실행할 함수(reducer)
  • accumulator: 콜백의 반환값을 누적한다. initialValue를 넣은 경우에는 initialValue의 값이 초기값이 된다.
  • currentValue: 배열의 처리할 현재 요소
  • currentIndex: 배열의 처리할 현재 요소의 인덱스이다.
  • array: reduce()를 호출한 배열
• initialValue: callback의 최초 호출에서 첫 번째 인수에 제공하는 값이다. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용한다.

객체 심화

1) 객체 축약 표현

const name = '이도해';
const country = 'KR';

const user = {
    name,
    country,
};

console.log(user);

key값과 해당 key에 대입해줄 value의 변수명이 같으면 축약하여 표현할수 있다.

 

2) 메소드 축약 표현

const obj = {
    greeting() {		//greeting: function()에서 function() 생략 가능
        console.log('Hi!');
    },
};

obj.greeting();  // Hi! 출력

객체의 메소드를 표현할 때는 function을 생략해도 된다.

 

3) 정적 메소드의 호출

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

console.log(Object.keys(obj));       //[x, y, z]
console.log(Array.isArray(obj));	//false
console.log(Object.values(obj));	//[10, 20, 30]
console.log(Object.entries(obj));	//[[x, 10], [y,20], [z,30]]

클래스에 내장되어있는 정적 메소드를 호출할수 있다.

 

구조분해할당

1) 배열의 구조분해할당

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

const [one, two, three] = arr;
/*
const one = arr[0];
const two = arr[1];
const three = arr[2];
와 같다
*/

2) 객체의 구조분해할당

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

const { x, y } = obj;

console.log(x, y); // 10, 20

const {x: hello, y:world}

console.log(hello, world); //10, 20

배열의 구조분해할당과 유사하게 사용하지만 다른점이 있다면 배열은 원하는 변수명에 대입을 해준것과 다르게 객체는 key값을 지정해줘야 한다는 차이점이 있다. key값 대신 다른 변수명에 분해할당을 해주고 싶으면 key: 변수명 과 같이 지정해주면 된다.

 

3) 객체의 중첩 구조분해할당

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

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

console.log(Hello);

중첩 객체를 구조분해 할당하려면 위와 같은 방식으로 진행하면 되고 동일하게 변수명을 지정해줄 수 있다.

 

4) 함수와 구조분해할당

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

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

console.log(sum(obj));

함수의 인자로 객체를 받아올 때 구조분해할당을 통해서 원하는 객체 key의 value만 받아올수 있다.

 

5) 구조분해할당 활용

int a = 123;
int b = 456;

[a, b] = [b, a];	//쉽게 swap 가능

const [x = 10, y = 20] = [ ];	//할당이 될 값이 없으면 기본값으로 초기화

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

const [one, , three, , five] = arr;

console.log(one, three, five) // 1 3 5 출력

const [one, tow, ...others] = arr;

console.log(one, two, others) // 1 2 [3,4,5] 출력

DOM(Document Object Model)

자바스크립트에서는 DOM을 통해 HTML의 컨텐츠, 구조, 스타일 요소를 구조화하고 이를 읽고 수정하도록 접근할 수 있다.

1) getElement

const title1 = document.getElementById('title');  //ID로 검색
const title2 = document.getElementsByClassName('title)  //Class이름으로 검색
const title3 = document.getElementsByTageName('h2');    //태그로 검색

2) querySelector()

const title = document.querySelector('h2') // 태그로 검색
const title = document.querySelector('#title') // #을 앞에 붙이면 id명으로 검색
const title = document.querySelector('.title_class') // .을 앞에 붙이면 class명으로 검색

querySelector는 해당 검색 조건에 맞는 첫번째 element를 반환하고 SelectorAll은 해당 검색 조건에 맞는 모든 element를 반환한다.

 

3)HTML 요소의 속성 변경

반환받은 element에 접근하여 HTML 요소의 속성을 직접 변경해줄수 있다.

const title = document.querySelector('#title);

title.innerText = '안녕하세요!';

다음과 같이 id가 title인 태그의 내용을 바꿔줄수 있다. 

 

4) createElement()

const title = document.createElement('h1');
const body = document.querySelector('body);

title.innerText = '새로운 친구에요!';
title.style.color = 'red';

body.appendChild(title);  //

'body'라는 태그를 통해 검색해 반환받은 element, body에게 자식element로 title을 삽입해준다. 

<body><h1 color='red'>새로운 친구에요</h1></body>

위와 같은 구조로 생성된다.

 

모듈

1) 모듈 생성 및 내보내기

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

함수 앞에 export를 넣어주면 해당 함수를 외부로 보낼수 있게된다.

2) type='module'

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

script 태그에 type속성을 module로 해주면 해당 script가 모듈로써 동작하게 된다.

3) import

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

greeting();

이렇게 import를 통해 외부 모듈의 함수를 가져올수 있다.

4)default export

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

import hello from './hello.js';

hello();      //Hello

default 로 지정한 export는 해당 모듈에서 import 해올때 이름을 변경하며 가져올수 있다.

5) export 분리

function greeting() {
    console.log('Hello');
}

export {  greeting};

다음과 같이 함수의 선언과 export 명령어를 분리할수 있다.