본문 바로가기

JAVASCRIPT

 (80)
중첩 for 문 예시 let bobsFollowers = ['Joe', 'Marta', 'Sam', 'Erin']; let tinasFollowers = ['Sam', 'Marta', 'Elle']; let mutualFollowers = []; for (let i = 0; i < bobsFollowers.length; i++) { for (let j = 0; j < tinasFollowers.length; j++) { if (bobsFollowers[i] === tinasFollowers[j]) { mutualFollowers.push(bobsFollowers[i]); } } }; console.log(mutualFollowers);
scope 예문 const logVisibleLightWaves = () => { let lightWaves = 'Moonlight'; let region = 'The Arctic'; // Add if statement here: if(region==='The Arctic'){ let lightWaves = "Northern Lights" console.log(lightWaves); }; console.log(lightWaves); }; logVisibleLightWaves();
es6 좀더 간결한 표현 좀더 간결한 표현 const plantNeedsWater = (day) => { return day === 'Wednesday' ? true : false; }; 인자 가로를 제거하고 리턴 제거를 할수가 있다. const plantNeedsWater = day => day === 'Wednesday' ? true : false;
삼항연산자 예문 추가 isNightTime ? console.log('Turn on the lights!') : console.log('Turn off the lights!'); isNightTime이 참이면 'Turn on the lights!' 나머지면 'Turn off the lights! 예문을 통해서 삼항연산자를 이해하는게 더 빠른거 같다.
자바스크립트 짝수로 표현 if (y%2 === 0) { return ( );
삼항 연산자 와 transform transition 예문 const CardContainer = styled.div` transform: ${(props) => (props.isEvenNum ? "translateY(30px)" : 0)}; transition: transform 1s; - 속도를 나타냅니다. transition 의 속성 transform 1초입니다. &:hover { transform: ${(props) => (props.isEvenNum ? "translateY(20px)" : "translateY(-10px)")}; prosps.isEvenNum이 (?) 참이면 "translateY(30px) 으로 적용한다. 그리고. : (else)아니면 : "translateY(-10px)")} if(a>b) 이면 참이면 연산자는 ? else( ) 이걸..
네브바 예제 import React from 'react'; import styled from 'styled-components' const Nav = () => { return ( Free library Member Teams Teachers Sign In ) } export default Nav; const Nav1 = styled.div` box-sizing: border-box; border: 1px solid white; max-width:0 auto; padding-left:40px; padding-right:40px; `; const MuitoolWrapper = styled.div` display:flex; justify-content:space-between; box-sizing: border-box..
슬라이더 예제 import React, { useState } from 'react'; import Nav from '../components/Nav'; import PlayListCard from '../components/PlayListCard'; import styled from 'styled-components'; const tags = ['#sleep', '#morning', '#relax', '#music', '#anxiety', '#meditation', '#healing', '#relaxation', '#calm', '#stress']; const PlayListPage = () => { const [number, setNumber] = useState(0); const [translate, setTra..

티스토리툴바