< 목차 >
1. join
2. while
3. for...in
4. trim
5. Event.preventDefault
6. 오늘 작성한 코드
7. 금일 소감
공부할 게 많은 관계로 오늘은 코드카타를 건너뛸 예정이다 ㅠㅠ 오늘은 모르는 개념 위주로 정리하려고 한다.
1. join()
: 배열의 모든 요소를 쉼표나 지정된 구분 문자열로 구분하여 연결한 새 문자열을 만들어 반환
배열에 항목이 하나만 있는 경우, 해당 항목은 구분 기호를 사용하지 않고 반환된다.
문법
join()
join(separator)
[매개변수] separator Optional
: 배열의 인접한 요소의 각 쌍을 구분하는 문자열
생략되면 배열 요소는 쉼표(",")로 구분된다.
반환 값
: 배열의 모든 요소들을 연결한 하나의 문자열을 반환
만약 arr.length가 0이라면, 빈 문자열을 반환한다.
문자열로 변환된 모든 배열 요소가 하나의 문자열로 결합된다. 요소가 undefined, null인 경우, "null" 또는 "undefine" 문자열 대신 빈 문자열로 변환된다.
예문
const elements = ['Fire', 'Air', 'Water'];
console.log(elements.join());
// Expected output: "Fire,Air,Water"
console.log(elements.join(''));
// Expected output: "FireAirWater"
console.log(elements.join('-'));
// Expected output: "Fire-Air-Water"
2. while
: 조건문이 참일 때 실행되는 반복문
조건은 실행되기 전에 참, 거짓을 판단한다.
문법
while (condition) {
statement
}
조건
: 반복이 시작되기 전에 조건문은 참,거짓을 판단받게 된다.
만약 조건문이 참이라면, while문 안의 문장들이 실행된다. 거짓이라면, 문장은 그냥 while 반복문 후로 넘어간다.
문장
: 조건문이 참일 때만 while문 속의 문장들이 실행된다.
반복문 속에 여러 개의 문장을 사용하고 싶다면 중괄호 { } 를 통해 문장들을 하나로 묶어야 한다.
예문
var n = 0;
var x = 0;
while (n < 3) {
n++;
x += n;
}
3. for...in
: 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복함
Symbol로 키가 지정된 속성은 무시한다.
문법
for (const variable in object) {
statement;
}
[파라미터] variable
: 매 반복마다 다른 속성명(Value name)이 변수(variable)로 지정됨
object
: 반복작업을 수행할 객체로 열거형 속성을 가지고 있는 객체
설명
: for...in문은 열거 가능한 non-Symbol 속성에 대해서만 반복
예문
const object = { a: 1, b: 2, c: 3 };
for (const property in object) {
console.log(`${property}: ${object[property]}`);
}
// Expected output:
// "a: 1"
// "b: 2"
// "c: 3"
4. trim
: 문자열 양 끝의 공백을 제거하고 원본 문자열을 수정하지 않고 새로운 문자열을 반환
* 여기서 말하는 공백이란 모든 공백문자(space, tab, NBSP 등)와 모든 개행문자(LF, CR 등)를 의미
한쪽 끝의 공백만 제거한 새로운 문자열을 반환하려면 trimStart() 또는 trimEnd()를 사용
문법
trim()
예문
var str = " foo ";
console.log(str.trim()); // 'foo'
5. Event.preventDefault
: 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트를 실행하지 않도록 지정
문법
event.preventDefault();
예문
document.querySelector("#id-checkbox").addEventListener(
"click",
function (event) {
document.getElementById("output-box").innerHTML +=
"죄송합니다. <code>preventDefault()</code> 때문에 체크할 수 없어요.<br>";
event.preventDefault();
},
false,
);
[Reference]
(1) https://developer.mozilla.org/ko/
6. 오늘 작성한 코드
import React from 'react';
const 증가에대한상수 = 'increase';
const 감소에대한상수 = 'decrease';
// 함수명: 카운터 리듀서
// 기능: action에 따라서 제한된 3가지 기능을 수행해줘
const counterReducer = (state) => {
// action에 따라 state를 어떻게 바꿀 건지 작성
// [핵심] action.type에 따라 action.payload만큼을 state에 반영해준다.
// 액션객체 = { type: "", payload: ""}
switch (action.type) {
case 'increase':
return {
count: state.count + 1,
};
case 'decrease':
return {
count: state.count - 1,
};
default:
return state;
}
};
function React() {
// const [conut, setCount] = useState(0);
// useReducer: 기능을 3가지로 제한. 인자로 콜백함수와 초기값을 받음
const [state, dispatch] = useRucer(counterReducer, {
count: 0,
});
return (
<div>
<div>{state.count}</div>
<div>
<button
onClick={() => {
// setCount(count - 1);
// 액션 객체를 만들어서 던지는 행위를 여기서 함
const action = {
type: 감소에대한상수,
payload: '',
};
dispatch(action);
}}
>
-
</button>
<button
onClick={() => {
// setCount(count + 1);
const action = {
type: 증가에대한상수,
payload: '',
};
dispatch(action);
}}
>
+
</button>
</div>
</div>
);
}
export default React;
import React from 'react';
// useSelecter: state에 접근함
// dispatch: state를 변경함
function React() {
return <div>06</div>;
}
export default React;
7. 금일 소감
휴 오늘부터 Next.js를 시작한다. 주말 동안 부족한 공부를 하며 밀린 잠을 보충했다. 피로가 다 풀린 건진 모르겠지만 꽤 많이 잤다. 오늘 있을 Next.js 실시간 수업과 챌린지 정기 세션도 집중해서 들어야지. 금일 저녁에도 TIL 써야 하니 이만 줄여야겠다. 파이팅 파이팅!!
'[Front-end] 개발자 공부' 카테고리의 다른 글
[개발 공부 55일차] "멋" 그 자체인 Next.js 덕질 시작 (0) | 2024.03.13 |
---|---|
[개발 공부 54일차] 프레임워크와 라이브러리 차이 | TTI, TTV (3) | 2024.03.12 |
[개발 공부 52일차] parseInt(), toUpperCase() | 문자열 다루기 기본 (2) | 2024.03.08 |
[개발 공부 51일차] Number.isInteger(), Math.sqrt | 수박수박수 (4) | 2024.03.07 |
[개발 공부 50일차] substr(), Set | 가운데 글자 가져오기 (0) | 2024.03.06 |