[개발 공부 53일차] join, while, for...in, trim

 

< 목차 >
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/

(2) https://shinyks.com/2023/08/javascript/while-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%B0%98%EB%B3%B5%EB%AC%B8/

 

 

 

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 써야 하니 이만 줄여야겠다. 파이팅 파이팅!!