2024.01.31 TIL #문자열불변성-직접수정불가 #fill() #replace() #<ul> vs <ol> #line-height #Css속성값동적변경

1. 문자열의 불변성 - 직접 수정 불가

JavaScript에서 문자열은 불변(immutable)하기 때문에 문자열의 특정 인덱스에 직접 접근하여 수정하는 것은 불가능
-> 문자열을 수정하려면 해당 문자열의 일부분을 추출하고, 수정된 부분을 새로운 문자열에 추가

ex)
let word = "try";
let newWord = "";
for (let i = 0; i < word.length; i++) {
  if ( i % 2 !== 0) {
    newWord += word[i].toLowerCase();
  } else {
    newWord += word[i].toUpperCase();
  }
}
console.log(newWord); //  TrY

 

2. fill( ) 메서드

fill() 메서드는 배열의 특정 부분을 지정된 값으로 채우는 데 사용됨.

이 때, (2)두 번째와 (3) 세 번째 매개변수를 사용하여 (2)채우기를 시작할 인덱스와 (3)종료할 인덱스를 지정할 수 있음

ex)
let arr = [1, 2, 3, 4, 5];
arr.fill(0, 2); // 0으로 인덱스 2부터 끝까지 0으로 채움
console.log(arr); // 출력: [1, 2, 0, 0, 0]

let arr = [1, 2, 3, 4, 5];
arr.fill(0, 1, 4); // 0으로 인덱스 1부터 3까지 채움 (4는 포함되지 않음)
console.log(arr); // 출력: [1, 0, 0, 0, 5]

 

3. replace( )

 

var test = "가나다라 마바사 가나";

var result = test.replace("가", "나"); // "가"를 "나"로 바꿈

 

console.log(result); // 나나다라 마바사 가나

 

 

4. <ul> vs <ol>

<ul>
- 순서가 중요하지 않은 항목들
- 앞머리에 불릿(•)으로 표시됨
<ol>
- 순서가 중요한 항목들
- 앞머리에 숫자 표시됨(순서가 중요하니까)

공통점 : 둘 다 내부항목으로 <li>만 가질 수 있음!

 

5. line-height

-  주로 (1) 수직 + 가운데 정렬이나 (2) 텍스트 레이아웃을 조정할 때 유용하게 활용
-  수직 가운데 정렬 시 line-height : 해당 칸의 높이
-  값은 숫자, 길이, 백분율 등으로 지정할 수 있음 
   특정 길이 값이나 숫자를 사용하면 해당 값의 배수로 텍스트가 커짐  
   ex) line-height: 1.5;로 설정하면 텍스트의 높이가 원래 글꼴 크기의 1.5배가 됨

 

6. 알파벳 소문자, 대문자 배열 만들기

Array(26).fill().map((v,i) => String.fromCharCode( i + 97 );
Array(26).fill().map((v,i) => String.fromCharCode( i + 65 );

 

7. 만약 z에서 다시 a로 넘어가고 싶다면?

function solution(s, n) {
  let arr = Array.from(s);

  const alphabetUpperList = Array(26)
    .fill()
    .map((v, i) => String.fromCharCode(i + 65));
  const alphabetLowerList = Array(26)
    .fill()
    .map((v, i) => String.fromCharCode(i + 97));

  let dapList = arr.map((letter) => {
    if (letter === " ") {
      return " ";
    }
    if (letter === letter.toLowerCase()) {
      let letterIndex = alphabetLowerList.findIndex((a) => a === letter);
      let newIndex = (letterIndex + n) % 26;
      return alphabetLowerList[newIndex];
    } else {
      let letterIndex = alphabetUpperList.findIndex((a) => a === letter);
      let newIndex = (letterIndex + n) % 26;
      return alphabetUpperList[newIndex];
    }
  });

  return dapList.join("");
}

 

8. 리액트에서 CSS 속성 값을 동적으로 변경할 때에는 JavaScript의 문자열을 사용해야 함!!  

background-color: ${({ backgroundcolor, isSelected }) =>
    isSelected ? "#b2b7bc" : backgroundcolor};