본문 바로가기

JavaScript6

[JavaScript] 자바스크립트 기본, 심화 문법 및 엔진 동작 원리 1. 함수형 프로그래밍 패러다임자바스크립트는 함수형 프로그래밍 패러다임을 추구하며, 추가로 객체지향 프로그래밍 패러다임도 지원한다.자바스크립트의 핵심은 함수(함수형 프로그래밍 패러다임)와 객체(객체지향 프로그래밍 패러다임)이다. 객체의 경우 객체지향 프로그래밍 패러다임의 여러 패턴들을 적용하고 싶다면, 클래스를 활용할 수 있다.그 중 함수형 프로그래밍 패러다임에 대해 알아볼 것인데 함수형 프로그래밍은 아래의 2개 조건을 만족하는 것을 의미한다.일급함수 : 함수 변수 할당 + 함수 파라미터 + 함수 반환함수 변수 할당 = 함수 표현식(Expression)함수 파라미터함수 반환순수 함수 : No-Side-Effects (참조 투명성) = Thread-Safe = 함수 정의할 때 완전한 문장을 만들어야한다.기.. 2024. 2. 5.
[JavaScript] 우테코 로또 게임 만들기 본 과제는 우테코에서 프리코스에서 진행한 자바스크립트를 활용한 로또 게임 제작하는 프로그래밍 과제를 기반으로 진행하였습니다.1. 과제 내용 과제는 우테코에서 진행한 자바스크립트를 활용하여 간단한 로또 게임을 만드는 프로그래밍 과제로 기능 자체는 간단했지만 아래의 요구사항을 따르며 프로그래밍을 진행해야 했다. 특히 기능을 구현하기 전 기능 목록을 작성하고 기능 단위로 커밋을 하는 방식으로 진행해야 했다.1-1. 기능 요구사항로또 게임 기능을 구현해야 한다. 로또 게임은 아래와 같은 규칙으로 진행된다. - 로또 번호의 숫자 범위는 1~45까지이다.- 1개의 로또를 발행할 때 중복되지 않는 6개의 숫자를 뽑는다.- 당첨 번호 추첨 시 중복되지 않는 숫자 6개와 보너스 번호 1개를 뽑는다.- 당첨은 1등부터 5.. 2024. 1. 31.
[JavaScript] map / set / trim / includes / filter / reduce 1. map 활용map() 메서드는 배열 각 요소에 대하여 주어진 함수를 수행한 결과를 모아 새로운 배열을 반환하는 메서드로 어떤 배열에 있는 모든 요소들의 값을 콜백 함수를 활용해 변경하여 만든 값들을 모은 배열이 필요할 때 사용한다. map() 메서드의 사용 방법은 매개변수로 배열의 인자를 받고, 해당 인자에 어떤 변화를 준 뒤 반환하는 식으로 사용한다.map은 3개의 매개변수를 가지고 있다.value : 현재 요소index : 요소의 인덱스array : map()을 호출한 원본 배열그렇다면 map의 다양한 사용 예시를 통해 map에 대해서 조금 더 자세히 이해해보자 간단한 배열에서 map을 통해 배열 값을 조작하기let arr = [1, 2, 3, 4];let modifiedArr = arr.map.. 2024. 1. 30.
[JavaScript] 호이스팅(Hoisting) 1. 호이스팅(Hoisting)호이스팅(Hoisting)이란 함수내의 변수 및 함수의 선언들을 모두 유효 범위의 최상단으로 끌어올려 주는 JavaScript의 기능 중 하나이다. 실제 코드가 끌어올려 코드의 변화가 있는 것이 아니라 자바 스크립트 parser가 내부적으로 끌어올려 처리한다. 컴파일 단계에서 코드 실행 전 함수와 변수의 선언들을 스캔하여, 모든 함수와 변수 선언들은 렉시컬 환경이라 불리는 자바스크립트 데이터 구조 내의 메모리에 추가된다.// 개발자가 작성한 코드 // console.log(a); // undefinedvar a = "A"; // var 변수 // 자바스크립트에서 호이스팅 된 코드 var a; console.log(a);a = "A"; a가 상단으로 호이스팅이 되었기 때문에 .. 2024. 1. 24.
[JavaScript] 깊은 복사 / 얕은 복사 들어가기에 앞서 얕은 복사의 경우 주소 값을 복사하고, 깊은 복사의 경우 실제 값을 복사한다고 생각하자. 깊은 복사와 얕은 복사에 대해 알아보기 전 주소 값, 실제 값의 의미를 파악하기 위해 JavaScript의 데이터 타입에 대해 알아보자.JavaScrpit의 데이터 타입의 경우 크게 기본형(원시형, Primitive) 타입, 참조형(Reference) 타입 2종류로 분류할 수 있다. 1. 데이터 타입기본형(원시형, Primitive type) 타입 NumberStringBooleannullundefinedSymbol(ES 6에서 추가)참조형(Reference) 타입 → Object(객체)ArrayFunctionDateRegExpMap, WeakMapSet, WeakSet기본형과 참조형을 구분하는 방법.. 2024. 1. 24.
[JavaScript/CSS] CSS Selector 정리 CSS(Cscading Style Sheets)는 HTML요소의 style을 정의한다. 그렇기 위해서는 먼저 HTML이 존재해야 하고 style을 적용하고자 하는 HTML 요소를 특정해야 한다.이렇게 꾸미기 위한 HTML 요소를 특정하는 것이 셀렉터(Selector)이다.  이제부터 아래에 나오는 HTML 예시들을 직접 실행해보며 결과를 확인하면서 보면 더 이해가 빠를 것이다.HTML 실행 사이트 W3Schools online HTML editorThe W3Schools online code editor allows you to edit code and view the result in your browserwww.w3schools.com   Hello World! This paragraph is s.. 2024. 1. 16.