frontend/javaScript 17

[js / 알고리즘연습] codeup - q가 입력될때까지 출력하기, 합구하기, 16진수 구구단 출력하기

1.'q'가 입력될 때까지 입력한 문자를 계속 출력하는 프로그램을 작성해보자. function solution(...params) { let index = params.indexOf('q'); const removed = params.splice(index); console.log(params); } solution('x', 'b', 'k', 'd', 'i', 'q', 'a', 'c'); 배열로 출력된다. rest 파라미터가 매우유용한 것같다. indexOf 는 특정 값과 일치하는 '첫번째' element의 index 값을 반환한다. 그런데, 찾으려는 값이 없을 때는 -1을 리턴한다.(배열의 인덱스는 0부터 시작하므로) splice는 배열에서 특정 인덱스 값을 가진 요소를 제거하는 역할을 한다.splic..

frontend/javaScript 2023.08.20

[js / 알고리즘연습] codeup - 평가 입력받아 다르게 출력, 카운트다운 출력, 짝수 합 구하기

1. 평가 입력받아 다르게 출력하기 문자열을 입력받아서 각각의 문자마다 출력을 달리 한다. 문제에서 제시한 예시는 다음과 같다. 평가 : 내용 A : best!!! B : good!! C : run! D : slowly~ 나머지 문자들 : what? 1-1 ) switch 문을 사용하도록 한다. function solution(word) { var result; switch(word) { case 'A': result = 'best!!' break; case 'B': result = 'good!!' break; case 'C': result = 'run!!' break; case 'D': result = 'slowly~' break; default: result = 'what????????' break;..

frontend/javaScript 2023.08.19

[js / 알고리즘연습] codeup - 가장 큰 수 출력, 짝홀수 출력하기

code up 에는 js 문제가 없지만 js 버전으로 치환해서 풀어보도록 한다. 그래도 뭐 별문제 없어보임. 오늘의 문제. 1. 삼항연산자를 이용해서 정수 3개 입력받아 가장 큰 수 출력하기 function solution(n, m, l) { var result = (n > m) ? n : m; result = (result > l) ? result : l; console.log(result); } solution(1, 91, 0); 근데 뭔가.................................. 좀 이상한 것 같다. 왜냐하면, 파라미터로 세개를 받아왔으니 두번 비교를 해서 출력하긴 했는데, 만약에... 파라미터가 한 200개 된다면.. 우짜지..? 그렇게 코드를 짜는 경우가 있을까만은........

frontend/javaScript 2023.08.18

[js 기초] Object.values(), Object.keys(), Object.entries() (다른 메소드와 조합해서 활용해보기)

객체를 가지고 놀아보자. 객체의 key나 value 등등을 배열로 어찌저찌 담는데 목적이 있다. 1. Object.keys() Object.keys는 객체의 key를 순서대로 배열에 담아서 반환해준다. var object = { Red : 5, Orange : 4, Green : 3, Blue : 2, Yellow : 1 }; var objectKeys = Object.keys(object); console.log("🚀 ~ file: codeup.html:158 ~ objectKeys:", objectKeys); ** 출력내용 ** 2. Object.values() 그렇다면 Object.values()는 value만 배열에 담아주겠지? var object = { Red : 5, Orange : 4, Gr..

frontend/javaScript 2023.08.17

[js 기초] map, reduce, filter (array와 object에 사용하기)

code Up 홈페이지에서 알고리즘 문제풀이를 하다가 reduce 를 만났다. 언뜻 이해가 가지 않아서 정리를 해보려고 한다. 근데 reduce만 하기는 심심하니까 map 하고 filter를 함꼐 살펴보도록 한다. 사실 책임님이 이 세가지는 잘 알아두라고 해두신적이 있어서 이참에 확실히 알아두는게 좋을거라고 생각 하기도 했다. 하하. 말씀하실 때 진작할걸. 게으른 신입이는 뒤늦게 자신을 책망한다. 자그럼 시작!!! 1. map map 은 배열의 모든 요소를 호출해서 새로운 배열을 만들어낸다. 기본적인 파라미터는 currentValue, index, arr로 세가지 이다. 새로운 배열을 또 만든다니? 무슨말인지 와닿지 않는다. 이럴땐 역시 콘솔찍기. var array = ['Red ', 'Orange ',..

frontend/javaScript 2023.08.16

?. << 옵셔널 체이닝이란?.

최근 처음보는 문법(?)을 만났다. 조건문이 아닌 것 같은데 js 구문에 ?. 가 포함되어있는 것. 최근에 추가된 js 문법구조체 라는 것을 알게 되었다. 1. ?. 의 의미 - 프로퍼티가 없는 중첩객체를 에러 없이 안전하게 접근 할 수 있도록 하는 문법 구조체이다. - 쉽게 말하면 null, undefined 값으로 읽혀 error메시지가 뜨는 상황을 undefined로 처리하여 에러메시지 없이 처리할 수 있도록 해주는 것이다. 예시를 보자. let values = null; console.log(values.value); console.log('hello'); values 라는 변수에 임의로 null 값을 넣었다. 그런데, 내가 values라는 객체에 있지도 않은 value 키값을 읽어와 달라고 하면..

frontend/javaScript 2023.07.13

콜백함수, 비구조화 할당

인프런에서 한입크기로 잘라먹는 리액트 강의를 듣다가 문과의 언어로 이해되지 않는 것들이 있어서 찾아봤다. 1. 콜백함수란 무엇인가? 콜백은 호출한다는 뜻이다. 함수를 호출해서 다른 함수에 전달하여 사용하는 것이 콜백 함수다. 호출된 함수는 호출 한 함수 안에서 어떤 조건을 만족하거나 이벤트가 일어날 때 실행한다. 예를들면 이런것인데, 함수 1 { 함수 2 } 함수 2 { } 함수 1을 실행해야 그 안에서 함수 2가 돌아간다. 저런 형식의 함수를 고차함수라고 부르고, 고차 함수 안에서 호출되어 사용되는 함수(함수2)를 콜백함수라고 부른다. 그리고 저렇게 함수1이 실행될 때 함수2를 실행시키고, 함수 2가 실행될 때 함수 3이 실행되고...........를 이름하여 콜백지옥이라고 부르는 것 같다. 함수1 {..

frontend/javaScript 2023.03.14