inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

추가로 참고할만한 반응형 모던 웹페이지 기능1

Number(activeLi) 형변환을 해야하는 이유?

299

hanyn

작성한 질문수 6

0

  if(Number(activeLi) < 0){
            activeLi = Number(activeLi) + 260;
        
            //왼쪽에 있던 카드가 오른쪽으로 갔다면, 다시 왼쪽으로 갈 수 있도록 PREV 버튼 활성화
            slidePrev.style.color = '#2f3059';
            slidePrev.classList.add('slide-prev-hover');   
            slidePrev.addEventListener('click',transformPrev);
            if(Number(activeLi) === 0){
                 slideNext.style.color = '#cfd8dc';
                 slideNext.classList.remove('slide-prev-hover');
                 //이벤트처리. 클릭을 눌러도 더이상 동작하지 않게. 
                 slideNext.removeEventListener('click', transformPrev);
            }


        }
let activeLi = classList.getAttribute('data-position');

activeLi에 속성을 가져오고 if문에서 Number를 꼭 써야한다는 것이 정확하게 이해가 잘 안가요...

Number()로 형변환을 하지 않으면 어떻게 되나요 ?

어차피 index.html에서 data-position의 값으로 숫자를 지정한거 아닌가요?

<ul class="class-list" data-position="0">

쌍따옴표로 감싸면 다 문자로 인식되는건가요?

강의를 띄엄띄엄봐서 ㅠㅠ 헷갈립니다...

HTML/CSS javascript es6

답변 1

0

잔재미코딩 DaveLee

안녕하세요. 답변 도우미입니다.

웹에서 속성 값은 항상 문자열로 반환됩니다. 따라서 data-position="0"의 값을 가져오면 "0"이라는 문자열이 반환됩니다.

JavaScript에서 문자열과 숫자의 연산은 조심해야 합니다. 예를 들어, 문자열 "5"와 숫자 3을 더하면, JavaScript는 자동으로 문자열 연결을 수행하여 "53"이라는 결과를 반환합니다. 반면, 숫자 5와 숫자 3을 더하면, 8이라는 숫자가 반환됩니다.

여러분의 코드에서 Number(activeLi) < 0과 같은 조건을 확인할 때, activeLi가 문자열로 되어 있다면 예기치 않은 동작이 발생할 수 있습니다. 따라서 Number()를 사용하여 activeLi를 숫자로 변환해주는 것이 보다 안전할 수는 있습니다.

감사합니다~

교육기간을 연장할 수 있는지 문의드립니다.

0

38

1

메일 확인부탁드립니다

0

58

1

CodeSandbox Vanilla 질문있습니다

0

60

1

part1을 수강하지 않아도 지장이 없다 하셨는데

0

107

1

강의에 관해 문의 드립니다.

0

91

1

메일확인 부탁드립니다.

0

91

1

14강 - 72,73번 강의 영상이 동일한거 같습니다.

0

106

1

Symbol 관련 테스트 코드 실행 결과 문의

0

142

1

호환성 관련 태그

0

120

1

강의화면은 index.js인데 왜 샌드박스코드에서는 index.mjs인지 궁금해요

0

136

1

강의화면은 index.js인데 왜 샌드박스코드에서는 index.mjs인지 궁금해요

0

146

1

div id="highlighter"가 강의화면에는 없는데 왜 샌드박스파일에는 있는지 궁금해요

0

86

1

강의화면에 height 가 vh가 아닌 vw라고 나와있는데 뭐가맞는거죠

0

117

1

메일 확인 부탁드립니다.

0

146

1

메일 확인 부탁드립니다

0

150

1

특별한 형태의 javascript배열에서

0

135

1

메일 확인부탁드립니다!

0

162

1

codesandbox 업데이트..

0

144

1

pdf 파일에 있는 링크주소로 들어가지지가 않습니다.

0

266

2

강의에서 알려주신 Properties for the flex container 복습 사이트, 검색 발견되어서 공유드립니다~

0

152

1

removeEventlistener 를 왜 해주어야 하는지

0

228

1

100vw 관련 질문

0

335

2

VS CODE html:5 <tab>기능이 안됩니다

0

351

1

[모던웹페이지 만들기9](1:40)class-desc 카드부분관련

0

248

2