본문 바로가기

📂 Language/JavaScript12

JavaScript 내장 함수의 세계 - apply 1. 궁금증을 가진 계기 function solution(s) { const numbers = s.split(' ').map(Number); const min = Math.min(...numbers); const max = Math.max(...numbers); return `${min} ${max}`; } 위의 최솟값과 최댓값을 구하는 문제에서 spread syntax를 사용하지 않고 Math.min( )과 Math.max( )를 적용하는 다른 방법이 있을지 찾아보다가 apply 메서드를 사용할 수 있다는 것을 발견. 2. apply 메서드란? apply( )는 호출할 함수의 인수를 배열 형태로 묶어 전달한다. 따라서 아래와 같이 코드에 주어진 this 값과 배열 형태의 인자를 함수에 적용할 수 있게 .. 2024. 1. 15.

초등학생도 이해하기 쉬운 자바스크립트 '단축평가' 본격, 자바스크립트 쉽게 설명하며 스스로 이해하기 📝 👩🏻‍🏫 단축 평가란 무엇일까요? 한 마디로 말하자면, 단축 평가는 두 가지 조건 중 하나만 충족되면 결과를 바로 내놓는 것이랍니다. 아직 이 개념이 잘 와닿지 않을 테니 예시를 통해 설명해 볼게요. && : 초콜릿 먹기 🍫 여러분이 초콜릿이 먹고싶어서 자바스크립트 가게에 방문했어요. 가게에는 '킷캣', '킨더', '하리보' 세 가지 상품이 보여요. 첫 번째로 하리보를 집었는데 바구니가 이렇게 말해요. 🛍️: "삐빅, false 입니다! 다시 담아주세요." let 하리보 = false; let 킨더 = true; 하리보 && 킨더 // false 왜일까요? 바로 하리보는 초콜릿(true)이 아닌 젤리(false)기 때문이에요. 바구니는 처음부터 fal.. 2023. 9. 24.

자바스크립트 symbol은 언제 사용하면 좋을까? 의문이 든 이유 자바스크립트 symbol은 ECMAScript6(2015)에 도입된 7번째 타입이라고 들어는 봤지만, 그다지 깊게 파본적이 없었던 것 같아서 깊게 공부하는 중이다. 생각해 보니 (몰라서 그랬을 수도 있지만) 코딩을 할 때도 적극적으로 사용할만한 상황이 없던 것 같다. 하지만 알아두면 나중에 다 쓸 데가 있을 테니 언제 사용하면 좋은지, 사용했을 때의 장점도 한번 정리해 보자. 일단, symbol이란? 책 에 따르면, symbol에 대한 설명은 아래와 같다. 심볼(symbol)은 ES6에서 도입된 7번째 데이터 타입으로, 변경 불가능한 원시 타입의 값이다. 심볼 값은 다른 값과 중복되지 않는 유일무이한 값이다. 따라서 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용된다.. 2023. 9. 19.

왜 고차함수에서는 조건문과 반복문을 제거할까? 의문이 든 이유 고차함수 부분을 다시 공부하다가, 아래 네 가지 단어들과 관계성에 대한 의문이 들었다. '고차함수' '함수형 프로그래밍' '순수함수' '불변성' 왜 배열의 고차함수에서 조건문 반복문을 쓰면 좋지 않은 것일까? 사실 아직까지는 알고리즘 문제를 풀든 코딩을 하든 무의식적으로 배열의 메서드들보다 손에 더 익은 조건문 반복문을 쓰고 있는데, 그게 좋지 않다고 하니 의문이 들었던 것 같다. 더불어, 아직 코드 상에서 위의 의문에 대한 해답을 제대로 느껴보지 않아서이기도 했다. 일반적으로 알려진 바로는 함수는 최대한 간결하고 직관적으로 나타내야 한다고 알고 있다. 조건문 반복문을 남발하면 가독성이 좋지 않고, 다른 층의 스코프 블록을 만드는 것이므로 코드 작성 시 실수할 확률도 높아지므로 사이드 이.. 2023. 9. 17.

알아두면 재미있는 자바스크립트의 역사 아래 내용은 드림코딩: 자바스크립트의 역사와 현재 그리고 미래 영상을 참고한 글입니다. 유익한 내용 전해주신 엘리 님께 감사를 표하며, 영상을 통해 학습한 내용을 아래에 정리해 보았습니다. 자바스크립트의 역사를 왜 알아야 합니까새로운 언어를 배울 때 바로 문법 공부에 전념하는 것보다 그 언어의 탄생 배경에 대해 이해하는 것이 중요하다고 한다.과거를 알아야 현재가 보이고, 미래를 예측할 수 있다고 하지 않나. 자바스크립트가 어떻게 탄생했으며 어떤 문제를 해결하기 위해 만들어졌고, 이 언어를 다룰줄 알면 어떤 분야에 더 활용할 수 있는지 알 수 있기 때문이 아닐까 싶다. 문법 공부보다는 상대적으로 우선순위가 낮을 수 있지만, 알아두면 재미있는 자바스크립트의 역사에 대해 정리해 보자. 태초에 모자이크라는 .. 2023. 9. 10.

왜 ES6부터 클래스 개념이 추가된걸까? 질문의 배경 자바스크립트 ECMAScript의 히스토리와 클래스 개념에 대해 공부하다가 문득, ES5에서도 생성자 함수와 프로토타입을 통해 충분히 객체지향 언어의 상속을 구현할 수 있는데 왜 클래스 개념을 추가했을까 궁금증이 생겼다. 궁금증에 대한 해답을 [문제 정의 - 해결]의 틀로 살펴보자. 문제 정의: 추가되기 전의 상황 자바스크립트의 클래스 개념이 ES6(2015)에서 추가된 이유는 아래와 같다. 1. 쓰는 사람이 어렵다는데 어떡해 ES5까지는 클래스 없이도 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수는 있었으나, 기존 자바나 C+과 같이 클래스 기반의 객체지향 프로그래밍에 익숙한 프로그래머들에게는 혼란을 주었다. 이는 자바스크립트를 어렵게 느끼게 하는 장벽과도 같았다. 2... 2023. 9. 7.

이벤트 루프(Event Loop)의 동작 원리 아래 내용은 우아한테크: [10분 테코톡] 🍗 피터의 이벤트루프 영상을 참고한 글입니다. 유익한 내용 발표해주신 피터 님께 감사를 표하며, 영상을 통해 학습한 내용을 아래에 정리해 보았습니다. 0. 시작하며,이벤트 루프는 들어봤지만, 어떻게 동작하는지 잘 모를 수 있다. 이해하기 쉬운 예시 코드와 그림을 통해 원리를 샅샅이 파헤쳐보자. 1. 비동기 코드 예시먼저, 아래의 예시 코드를 보자. console.log('잘 들어갔어?');setTimeout(function() { console.log('똑똑');}, 1000);console.log('들어간거 맞아?'); 중간에 있는 setTimeout은 두 번째 인자로 들어간 시간(단위: ms)만큼 기다린 후에, 첫 번째 인자로 들어간 함수를 실행시키는.. 2023. 9. 2.

JavaScript 원시 자료형과 참조 자료형에 대해 쉽게 이해해 보자. 1. 원시 자료형과 참조 자료형이란? number, string, boolean, undefined, null과 같은 자료형은 고정된 저장 공간을 차지한다. 이런 특징을 가진 자료형을 원시 자료형(primitive data type)이라는 이름으로 분류한다. 반면에 대량의 데이터를 다루기에 적합한 배열과 객체, 함수 등의 자료형은 참조 자료형(reference data type)이라고 분류한다. 원시 타입 데이터는 각 변수간의 원시타입 데이터를 복사할 경우, 데이터 값이 복사되기 때문에 기존의 데이터에 영향이 가지 않음. 참조 타입 데이터는 주소를 복사한다. 때문에 복사한 데이터에서 원소를 변경하게 된다면 주소 안에 있는 데이터가 변경이 되는 것이기에 기존의 데이터에도 영향이 가는 것이다. 쉽게 설명하자.. 2023. 3. 2.

JavaScript 객체 기초 개념 - 구분, 조회, 객체 다루기 1. 객체란? 자, 배열을 배웠다면 이제 객체를 배울 시간이다. 비유하자면, JavaScript에서의 객체는 게임 캐릭터와 비슷하다고 할 수 있다. 사용자들의 캐릭터는 동일하게 직업과 능력을 가지고 있지만, 각각 세부적인 내용은 다르다. 누군가는 Ella라는 ID와 마법사라는 직업을 가지고 있지만, 다른 누군가는 Chloe라는 ID와 전사라는 직업을 가지고 있다. 마찬가지로 사용자가 웹사이트에 가입할 때 입력할 항목은 모두 같지만, 입력하는 정보는 사용자마다 다르다. 이렇게 각기 다른 값을 가질 수 있지만, 입력해야 하는 데이터의 종류가 동일한 경우 객체를 사용하면 손쉽게 데이터를 관리할 수 있다. 이렇듯, 공통적인 속성을 가지는 경우 객체를 사용해야 한다. 웹사이트에 가입한 회원 주소록을 만든다고 가정.. 2023. 3. 1.

JavaScript 배열 기초 개념 - 인덱스, 반복, 메소드 1. 배열이란? 순서(index)가 있는 값(element)의 집합이다. 이때, 순서는 1이 아니라 0부터 번호를 매기며, 대괄호 [ ] 를 이용해 배열을 만들고, 각각의 원소(element)는 쉼표(,)로 구분해 준다. a. 배열의 인덱스 값 구하기 let myNumber = [73, 98, 86, 61, 96]; // myNumber 라는 배열의 3번째 인덱스 값은? myNumber[3]; // 61 let myNumber = [73, 98, 86, 61, 96]; // myNumber 라는 배열의 5번째 인덱스 값은? myNumber[5]; // undefined : 이 배열은 4번째 인덱스 값 까지 밖에 없다. b. 배열 안에 있는 배열의 인덱스 값 구하기 let myNumber = [[13, 3.. 2023. 2. 27.

JavaScript 조건문을 활용해 홀수와 짝수 출력, 판별하기 (%로 나머지값 보기) 자바스크립트에서 홀수 혹은 짝수만 출력하고 판별하는 방법을 알아보자. 1. 조건문을 활용해 1부터 10까지의 숫자 중, 홀수만 출력하는 코드 for (let i = 1; i 2023. 2. 26.

JavaScript의 hoisting (호이스팅) 이란? - let과 var의 차이, let과 const 호이스팅 *hoisting: 끌어 올리기 hoist의 사전적 의미는 '끌어 올리기' 라는 뜻이다. 변수나 함수의 호출 코드보다, 선언 코드가 아랫쪽에 있음에도 불구하고 에러가 발생하지 않고, 마치 선언 코드가 호출 코드보다 더 위에 선언된 것과 같이 동작하는 특성을 hoisting(호이스팅) 이라고 한다. 처음부터 이 말을 이해하려고 하면 잘 안 될 것이다. 우선 자바스크립트에서 변수를 선언하는 방법 중, let과 var의 차이점부터 짚고 넘어가야 호이스팅의 개념을 더 정확하게 이해할 수 있다. let과 var의 차이: 태초에 var는 문제가 많았다.. 옛날 옛적에는 지금의 우리가 널리 쓰고 있는 let이 아닌, var만 사용했다고 한다. 그러다 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 .. 2023. 2. 26.

이전 1 다음

티스토리툴바