본문 바로가기

javascript9

배열을 객체로, 객체를 배열로 만드는 방법 배열을 객체로 혹은 거꾸로 객체를 배열로 만드는 작업은 참 많이 쓰인다. 코딩테스트에서도 그렇고, 실제 프로젝트를 함에 있어서도 구현할 일이 많이 있다. 이런 작업을 수행하는 방법이 여러가지가 있어서, 치팅시트 마냥 짧게 정리했다. 배열을 객체로 만드는 방법 Array.prototype.reduce()를 이용한 방법 문법 reduce(callbackFn) reduce(callbackFn, initialValue reduce는 본래 단어의 의미가 '줄이다.'이다. 의미에서 알 수 있듯이 reduce는 배열의 원소에 대해 콜백함수를 반복호출하고 최종적으로 하나의 값(여기선 객체)을 출력한다. 가장 흔하게 볼 수 있는 방법이다. 이 방법을 사용한 코드는 다음과 같다. const arr = [1, 2, 3]; .. 2023. 6. 9.
배열이나 문자열 자르는 메소드: slice, substring, splice 정리 공부하다가 배열이나 문자열 자르는 메소드들이 헷갈려서 예시코드와 함께 정리했다. slice, substring, splice 얘네들은 하는 일은 뭔가를 자른다는 점에서 비슷하다. 근데 조금 하는 일이 다르다. 모질라 재단의 공식문서를 참고해서 해당 내용들을 공부하고 정리했다. *String.prototype.substr()함수 같은 경우 ECMAScript 표준에서 Deprecated (사용 권장 X)으로 나타나있습니다. 이것 대신 slice나 substring을 사용하는 것이 권장되므로 이 글에서 substr() 함수는 정리하지 않았습니다. Array.prototype.slice() slice() 메서드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반.. 2023. 5. 18.
스네이크 케이스로 된 파일명을 케밥 케이스로 바꾸기(node.js) 학부 때 C를 사용할 때, 습관적으로 파일명으로 스네이크 케이스를 사용했다. 최근에서야 안 것인데 자바스크립트(node.js) 코드는 카멜 케이스와 파스칼 케이스를 사용하지만, 파일명으로는 대개 케밥 케이스를 사용한다. 이 참에 파일명을 전부 케밥 케이스로 바꾸려고 한다. *혹시 헷갈리는 분을 위해 스네이크 케이스 vs 케밥 케이스 ex) 'solve problem fast.js'라는 파일명을 사용하고자 할 때. 스네이크 케이스(Snake case): 영어 소문자와 언더스코어('_') 로 이름을 붙이는 방식. =>'solve_problem_fast.js' 케밥 케이스(Kebab case): 영어 소문자와 하이픈('-')으로 이름을 붙이는 방식. =>'solve-problem-fast.js' 둘 다 파일명.. 2023. 5. 16.
var, let, const의 차이점 간결하게 요약! var, let, const의 차이점에 대해서 예시코드와 함께 간결하게 정리했다. 이 내용도 프론트엔드 엔지니어를 준비하는 사람에겐 단골질문으로 나온다고 한다. var, let, const는 크게 보면 스코프, 재선언의 가능 여부, 재할당의 가능 여부, 호이스팅 이렇게 4가지 부분에서 차이점이 있다. 1. 스코프의 차이 var은 함수 스코프를, let과 const는 블록스코프를 가진다. function testScope() { var a = 1; let b = 2; const c = 3; if (true) { var a = 4; //위에서 선언된 a와 동일한 스코프 let b = 5; //위에서 선언된 b와 다른 스코프 const c = 6;//위에서 선언된 c와 다른 스코프 console.log("in.. 2023. 5. 1.
Hoisting이란? 핵심만 알고가자 호이스팅이 무엇이고, 언제 발생하는지 예시코드를 통해 알아본다. 그리고 호이스팅이 문제가 되는 지점에 대해서도 알아본다. 인터넷에서 프론트엔드 면접 자료를 찾아보면, 호이스팅에 관한 것은 단골 질문으로 자주 출제된다고 한다. *실행 컨텍스트, 렉시컬 환경, 스코프, var let const의 차이점에 대한 질문도 연계되어 나올 가능성이 높다. 하지만 이 글은 그 부분까진 다루지 않고 호이스팅의 핵심부분만 다루려고 한다. 해당 주제들은 따로 글을 만들어서 다루려고 한다. Question 1: 호이스팅이 무엇인가요? Hoist의 원래 의미는 ‘(밧줄 혹은 장비 등으로) 끌어올리다.’라는 뜻이다. 원래의 의미와 유사하게, 자바스크립트에서 호이스팅(hoisting)은 변수나 함수의 선언이 코드의 최상단으로 끌어.. 2023. 4. 28.
13) javascript의 제어문 제어문이 무엇일까? 다른 언어를 경험해봤다면 당연히 아는 개념일 것이고, 아니어도 단어 자체에 뜻이 있으므로 감을 잡을 수 있을 것이다. 제어문(Control flow statement)은 코드 블록을 조건에 따라 실행하거나, 반복적으로 실행해야 할 때 사용하는 실행문을 말한다. 즉 프로그램의 실행 흐름을 제어한다. 제어문은 프로그래밍 언어라면 대부분 갖고 있는 문장이다. 생각해보면 당연하다. 우리는 컴퓨터에게 일을 시켜야 한다. 우리가 커다란 프로그램을 처음부터 실행 순서대로 일일이 작성할 수 있는 능력이 있을까? 같은 일을 여러 번 시켜야 하는 경우에는 같은 코드를 일일이 반복해서 작성해야 할까? 1억번의 같은 일을 시켜야 하면, 1억번의 같은 코드를 작성해야 할까? 다행히 그럴 수도 없고, 그럴 일.. 2022. 8. 31.