코딩연습장

전에 사용한 map(), filter()메소드를 쉽게 사용하고자 화살표 함수를 사용한다.(매개변수) => {} map()의 콜백함수로 화살표함수를 사용한다면 이렇게 사용한다.const array = [0,1,2,3,4,5,6,7,8,9]array.map((value) => value*value )//(10) [0,1,4,9,16,25,36,49,64,81]const array = [0,1,2,3,4,5,6,7,8,9]array .filter((value)=> value%2 ===0) .map((value) => value*value) .forEach((value) => { console.log(value) })//0//4//16//36//64 이전에 프로젝트에서 사용했던 코드가 있..

자바스크립트에서 함수도 하나의 자료형이므로 매개변수로 전달할 수 있는데, 함수를 매개변수로 전달하는 함수를 콜백함수라 합니다.function callThreeTimes (callback) { for (let i =0; i callThreeTimes(function (i) { console.log(`${i}번째 함수 호출`)})이렇게 익명함수 형태로 작성할 수도 있다. 콜백함수는 forEach(), map(), filter()에 주로 사용된다.let numbers = [273, 52, 103, 32, 57]numbers.forEach(function (value, index, array) { console.log(`${index}번째 요소 : ${value}`)})//0번째 요소: 273//1번째 요소: ..

함수를 호출할 때 매개변수의 개수가 고정적이지 않은 함수를 가변 매개변수 함수라고 한다.이럴땐 나머지 매개변수라는 형태의 문법을 사용해야한다.function 함수이름(...나머지매개변수) {}매개변수 앞에 ...을 입력하면 매개변수들이 배열로 들어온다.function sample(...items) { console.log(items)}sample(1,2)sample(1,2,3)sample(1,2,3,4)//Array(2)//Array(3)//Array(4) 나머지 매개변수와 일반 매개변수도 같이 조립할 수 있다.function sample(a, b, ...c) { console.log(a,b,c)}sample(1,2)sample(1,2,3)sample(1,2,3,4)//1 2 []//1 2 [3]//1 ..

f(x)에서 f()는 함수이고 x는 매개변수이다.함수의 결과값을 출력값이라 한다. 익명함수는 다음과 같이 나타낸다.function () { 명령}const func = function () { console.log('익명함수') console.log('익명함수') console.log('익명함수') } func() console.log(typeOf 함수)console.log(함수)//익명함수//익명함수//익명함수//function//f () {// console.log('선언적 함수')// console.log('선언적 함수')// console.log('선언적 함수')//}이렇게 상수나 변수를 선언해 안에 익명함수를 담아두는 형태로 작성하며, 변수()형식으로 함수를 실행한다. 선언적..

for (let i =0; true; i++) { alert('반복!') const isContinue = confirm('반복하시겠습니까?') if (!isContinue) { break }}while반복문은 아래와 같이 사용한다.이렇게 횟수를 기준으로 반복할 때는 코드를 간결히 작성할 수 있는 for문이 더 적합하다.while문은 조건에 큰 비중이 있을 때 사용하는것이 좋다.예를들어 특정 시간동안 어떤 데이터를 받을 때 까지, 배열에서 어떠한 요소가 완전히 제거될 때까지 등 조건일 때 사용한다. switch와 동일하게 반복문은 break 키워드를 사용하여 반복문을 벗어날 수 있다.> let i = 0> const array = [1, 2, 3, 4, 5]> while (..

for in 반복문은 다음과 같이 사용한다.for (const 반복변수 in 배열 또는 객체) { 명령문}배열 혹은 객체의 요소를 하나하나 꺼내서 특정 문장을 실행할 때 사용한다.> const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업']> for (const i in todos) { console.log(`${i}번째 할 일: ${todos[i]}`) } for of 반복문은 다음과 같이 사용한다.for (const 반복변수 of 배열 또는 객체) { 명령문}요소의 값을 반복할 때 사용한다.> const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업']> for (const todo of todos) { console.log(`오늘의 할 일: ..

배열은 여러개의 변수를 한번에 선언해 다룰 수 있는 자료형이다.let array = ['a', 'b', 'c', 'd', 'e']여기서 배열 내 요소의 번호는 인덱스로 0부터 시작한다.array[0] = 'a'array[1] = 'b'array[2] = 'c' ....이런 식으로 꺼내 쓸 수 있다. 배열 내 요소의 개수를 확인하고 싶다면 lenght속성을 사용하면 된다.> array.length5 배열 맨 뒤에 요소를 추가하고자하면 push()메소드를 사용한다.> array.push('f')array = ['a', 'b', 'c', 'd', 'e', 'f']여러개를 추가하면 순서에 맞게 추가된다. 또한 인덱스를 사용하여 추가 할 수도 있다.> array[6] = 'g'array = ['a', 'b', '..

조건부 연산자(삼항 연산자)는 아래와 같이 사용한다.불 표현식 ? 참일 때의 결과 : 거짓일 때의 결과let a = 10a > 10 ? alert('a는 10을 초과합니다.') : alert('a는 10 이하입니다.')이런식으로 사용한다.간단하게 판단하여 참 거짓의 결과로 나뉠 때 삼항 연산자를 자주 사용했던 기억이 있다. 짧은 조건문논리합 연산자를 활용한 짧은 조건문은 다음과 같다.true || alert('참일 때 실행하지 않는다!')false || alert('참일 때 실행하지 않는다!')논리합 연산자 ||는 양변중 하나라도 true일 때 true를 뱉어내므로 1번 명령문은 true가 나오며 명령이 실행되지 않는다.2번 명령문은 양변에 true가 없으므로 alert명령이 실행된다.불 표현식 || 불..

깃허브에 txt파일로 TIL을 올렸었는데, 원하는 주제를 찾기도 힘들고, 다양한 기능을 사용하지 못하여 다시 티스토리에 올린다.if 조건문if (boolean 값이 나오는 표현식) { bool값이 참일 때 실행할 문장}위와같이 if () {} 형식으로 사용한다.if ( 1 > 2 ) { alert('참')}alert('거짓')이렇게 코드를 작성하면 1>2 표현식이 false이므로 alert('거짓')만 실행된다.물론 이렇게 당연한 식을 사용하지 않고,if (list.includes('안녕')) { alert('안녕!')}이런 판단해야하는 식을 사용한다. if는 else나 else if 를 사용하여 다른 상황을 미리 가정해 둘 수 있다.if (Month == 1) { alert('1월입니다!')} else..

답변 block요소는 사용가능한 최대 너비를가지며 높이는 내부 컨텐츠에 맞게 지정됩니다. width, height를 지정할 수 있으며 padding, margin 적용에 제한이 없습니다. 또한 여러개의 block요소가 있을 때 수직으로 쌓이며, 프레임을 잡을 때 사용합니다. 반면 inline요소는 너비와 높이가 내부 컨텐츠 크기만큼 설정되며 임의로 지정할 수 없습니다. padding과 margin은 좌우에만 적용가능하며 여러개의 인라인 요소가 있을 때 수평으로 쌓입니다. 보통은 text나 img관련한 요소에 사용합니다. 꼬리질문 inline-block? 인라인 블록은 인라인 요소처럼 내부컨텐츠의 크기만큼 너비와 높이가 지정되고, 사용자 정의에 따라 원하는 크기로 지정할 수 있습니다. padding, ma..