전체 글

배우고 성찰한 것을 기록하는 블로그입니다.
Javascript

배열 복사하기 (map과 [...arr] )

map을 통해 배열을 복사하여 새로운 변수에 할당이 가능하다. const farm = ["sheep", "cow", "pig"] const farm2 = farm.map((e)=> { return e }) console.log(farm2) // [ 'sheep', 'cow', 'pig' ] map은 각 배열의 요소마다 map의 인자로 들어가는 내부 함수의 리턴값을 할당해주는 메서드이다. 최종적으로 기존 배열의 길이와 같은 배열을 리턴한다. 따라서 map()에 (e) => { return e } 를 인수로 넣어주면 각 요소가 그대로 새로운 배열에 입력되어 배열이 복사된다. 이를 간단히 한 방법이 [...arr] 이다. const farm = ["sheep", "cow", "pig"] const farm2 ..

Javascript

Map과 Map의 내부 작동 원리

배열의 사용에서 map은 매우 편리한 기능을 제공해준다. map은 함수를 인수로 받아서, 배열의 각 요소에 그 함수를 일일히 호출시켜 값을 바꿔주는 연산을 한다. 이 때, 반환되는 것은 원본 배열과 같은 길이를 가진 새로운 배열이다. 아래를 보자. const ages = [22, 28, 80, 48, 32] const add5 = x => { return x + 5 } const fiveYearsLater = ages.map(add5) console.log(`ages : `, ages) console.log(`fiveYearsLater : `, fiveYearsLater) 배열 ages에 map 기능을 사용하였다. map은 인수로 함수를 받는다. map에 인수로 받아진 함수는 배열의 각 요소에 호출되며,..

Javascript

배열 관련 문제 풀이 (2)

문제 5. 배열과 숫자를 인수로 받아, 입력된 인수 숫자 이후의 배열을 카피하는 copyLast라는 함수를 작성해라. copyLast(['Ironman', 'Thor', 'Captain', 'Black Widow', 'Hulk'], 2) // ["Captain", "Black Widow", "Hulk"] 풀이 전 생각) 새로운 배열을 만들어야 한다. 인수로 받은 숫자부터 인수로 받은 배열 끝까지의 인덱스를 새로운 배열에 복사하면 된다. push 기능을 활용한다. 풀이) const copyLast = (arr, num, result = [], i = num) => { if (arr.length { if (i >= a.length) { return result } if (i >= b) { result.pus..

Javascript

배열 관련 문제 풀이 (1)

문제 1. 배열을 인수로 받고, 똑같은 요소를 가진 새로운 배열을 리턴하는 함수를 작성해라. copyArray(['Rocket', 'Groot', 'Star-Lord']) // ["Rocket", "Groot", "Star-Lord"] 풀이 전 사고) 새로운 배열을 리턴하기 위해서는 배열을 새로 만들어야 한다. 새로 만든 배열은 push, pop, shift, unshift 등으로 조작이 가능하다. 새로 만든 배열과 인수로 넣은 배열의 길이가 같아지면 새로 만든 배열을 리턴한다. 답) const copyArray = (arr, newarr = []) => { if (arr.length === newarr.length) return newarr newarr.push(arr[newarr.length]) re..

Javascript

Splice()

splice 메서드는 배열의 구성요소를 삭제하거나 교체(replacing)하는 메서드이며, 삭제된 배열이 반환된다. 문법은 아래와 같다 let 배열에서삭제된요소 = 배열.splice(시작인덱스[, 삭제할갯수 [, 추가요소 1 [, 추가요소 2]]]) 문법만 보면 이해가 어려우니 직접 실습해보자. const fruits = ['사과', '딸기', '참외', '수박', '복숭아'] const a = fruits.splice(-2, 1) console.log(fruits); console.log(a); 위에 fruits라는 배열이 있다. 빠른 이해를 위해 splice에는 음수값을 넣었다. 이해하기 쉽게 표로 만들어보자. fruits 배열 사과 딸기 참외 수박 복숭아 index 0 1 2 3 4 거꾸로 inde..

Javascript

unshift()

unshift 메서드는 push 메서드와 방향만 다르고 하는 일은 같다. 하나 이상의 요소를 배열의 앞에 추가하는 기능을 하며, 이 때 새로운 배열의 길이(length)를 반환한다. const nuts = ['almond', 'pistachio', 'hazelnut'] const seeds = nuts nuts.unshift(seeds) console.log(`nuts : `, nuts); console.log(`seeds : `, seeds); const states = ['Pennsylvania', 'New Jersey', 'Georgia'] const numStates = states.unshift('Delaware', 'New York') console.log(numStates);

Javascript

shift()

shift 메서드는 pop 메서드와는 방향성만 다르고 하는 일은 같다. shift는 배열의 첫번째 요소를 삭제하고, 그 값을 반환한다. 배열이 비어있다면 undefined를 반환한다. const states = ['Delaware', 'Missouri', 'Hawaii'] const firstState = states.shift() console.log(states) console.log(firstState)

Javascript

Pop()

Pop() 메서드는 배열 끝의 요소를 삭제하고, 삭제된 요소를 반환한다. 배열이 비어있다면, undefined가 반환된다. const states = ['Delaware', 'Missouri', 'Hawaii'] const lastState = states.pop() console.log(states) console.log(lastState) states 배열은 마지막 요소가 삭제되고 lastState는 삭제된 요소를 가지고 있게 된다.

Javascript

Push()

Push() 메서드는 배열의 끝에 한개 또는 그 이상의 요소들을 추가하고, 요소가 추가된 배열의 길이(length)를 반환한다. const apples = ['Fuji', 'Gala'] const trees = apples.push('Pink Lady', 'Washington') console.log(apples); console.log(trees); push() 메서드로 인해 apples 배열에는 Fuji, Gala 라는 요소가 배열의 끝에 추가되었고, push() 메서드의 반환값은 새로운 배열의 길이 이므로 trees 에는 4가 할당되었다. 아래의 코드는 각 변수에 동일한 배열의 레퍼런스를 참조하게 한 후 동일한 배열의 레퍼런스를 push한 것이다. 말보다는 코드를 보는게 더 이해가 잘 간다. con..

Javascript

Stopwatch 만들기 (html, Javascript)

html과 javascript를 통해 제작한 스탑워치이다. 00:00 Start Pause Stop Record 먼저 display와 각 버튼에 대한 설계를 한다. start 버튼을 누르면 동작한다는 스위치 + 시간이 흘러가야한다. 이때 시간이 흐른다는 것을 표시하는 함수는 settimeout을 이용한다. 또한 settimeout에서는 1초를 1000ms로 이용한다는 것을 유념하여 코드를 작성한다. 정지를 누르거나, 스탑을 누를 경우, 꼬이지 않도록 각각 기능을 작성한다. 스탑워치를 만들때 주의해야할 사항은 timer()가 1개 이상 동시에 작동해서는 안된다는 것이다. 그렇게 될 경우 time변수가 동작되는 동작되는 timer()의 n배수만큼 빨리 증가하게 된다. 이는 스탑워치의 기능을 상실한다는 의미이다.

2DC
2DC