IT 공부를 위한 블로그

자바스크립트는 다양한 데이터 타입을 제공하여, 개발자가 효율적으로 프로그래밍할 수 있는 환경을 만들어 줍니다. 이 포스트에서는 자바스크립트의 두 주요 데이터 타입인 원시값과 복합객체에 대해 깊이 있게 탐구해보겠습니다. 이해의 편의를 위해 정의에서 시작하여, 저장 및 복사 방법, 그리고 이들의 비교 방식에 대해 자세히 설명하겠습니다. 원시값(Primitive Values) 원시값은 변경 불가능한 가장 기본적인 데이터 타입을 말합니다. 자바스크립트에서는 null, undefined, 문자열(string), 숫자(number), 불리언(boolean), Symbol, BigInt를 원시값으로 분류합니다. 이들의 특징은 다음과 같습니다: 저장 및 복사: 원시값은 변수에 할당될 때 메모리에 그 값 자체가 저장됩니..

1. Iterator pattern(이터레이터 패턴) ES6에서 도입된 이터레이션 프로토콜(iteration protocol)은 데이터 컬렉션을 순회하기 위한 프로토콜(미리 약속된 규칙)이다. 이터레이션 프로토콜을 준수한 객체는 for…of 문으로 순회할 수 있고 Spread 문법의 피연산자가 될 수 있다. 이터레이션 프로토콜에는 이터러블 프로토콜(iterable protocol)과 이터레이터 프로토콜(iterator protocol)이 있다. 이터레이터 패턴은 이터레이터를 사용하여 컬렉션의 요소들에 접근하는 디자인 패턴이다. 여러 가지 자료형의 구조와는 상관없이 이터레이터라는 하나의 인터페이스로 순회가 가능하다는 장점이 있다. const mp = new Map(); mp.set('b', 2) mp.se..

1. eval()? eval()는 문자열 수식 또는 문자열로 된 코드를 Javascript로 실행하는 메서드이다. 따라서 매개변수를 string 형식으로 받는다. 자바스크립트 표현식, 명령문, 또는 연속되는 다수의 명령문을 나타내는 문자열. 표현식은 이미 존재하는 객체의 변수나 속성을 포함할 수 있다. 매개변수로 받은 코드를 평가하여 얻은 값을 반환하고, 값이 없다면 undefined를 반환한다. 예시) var x = 10; var y = 20; var result = eval("x * y"); // 결과: 200 console.log(result); var jsonStr = '{"name": "John", "age": 30}'; var obj = eval("(" + jsonStr + ")"); cons..

1. Webpack - Weppack은 모던 JavaScript 애플리케이션을 위한 모듈 번들러이다. * 모듈 번들러란 웹 애플리케이션을 구성하는 자원을 모두 각각의 모듈로 보고 이들을 조합해서 하나의 결과물로 만드는 툴이다. - 브라우저의 성능이 높아지고 자바스크립트 애플리케이션이 점점 고도화되면서 유지보수의 난이도가 높아졌다. - 이를 해결하기 위해 자바스크립트를 기능 단위로 분리하여 사용하는 모듈화가 필요해졌다. - 자바스크립트 모듈시스템이 등장하기 전에 모듈 패턴으로 사용했고, 정식 지원하는 모듈 시스템이 생겨났지만, IE 브라우저에서는 지원하지 않았기 때문에 모든 브라우저 환경에서 모듈 시스템을 사용할 수 있도록 만들어진 게 webpack이다. Webpack 공식홈페이지: https://webp..

1. null - JavaScript에서 null은 메모리에 값이 비어있음을 명시적으로 표현하기 위하여 빈 값에 null을 할당되어있는 상태이다. - 또한 typeof로 null의 타입을 알아보면 object를 출력한다. - 이는 자바스크립트 개발자들이 null의 예외처리를 고려하지 못하여 object로 출력되는 버그이다. (아래 페이지 참조) 초기 구현의 결함을 수정하지 않도록 권장하기 때문에 수정하지 않고 있다. https://stackoverflow.com/questions/18808226/why-is-typeof-null-object Why is typeof null "object"? I'm reading 'Professional Javascript for Web Developers' Chapte..

1. 예시 const str = '1.234' console.log(str) console.log(typeof str) // typeof 를 통해 변수의 형을 알아 낼 수 있다. const str = '1.234'는 ' '안에 들어간 문자형 변수이다. 이를 숫자형 변수로 바꿔주기 위하여 parseInt와 parseFlot을 사용할 수 있다. 2. parseInt( ) const str = '1.234' console.log(str) console.log(typeof str) const inter = parseInt(str) console.log(inter) console.log(typeof inter) parseInt(str)를 사용하여 해당 문자를 정수형으로 표현 할 수 있다. '1.234' -> 1로..

1. 코드 const a = [1, 2, 3, 4] const b = [5, 6, 7, 8] c = a.concat(b) console.log(c) 2. 결과 a의 배열 뒤로 b 배열이 합쳐졌다. 만약 a와 b가 배열이 아닌 인수면 인수가 그대로 붙는다. 예시) 문자형 데이터 12와 34가 합쳐져서 '1234'가 출력되었다. -여러 개의 배열 합치기 1) 코드 const a = [1, 2] const b = [3, 4] const c = [5, 6] let d = a.concat(b, c) console.log(d) 2) 결과

1. 랜덤으로 숫자 가져오는 함수 function random() { return Math.floor(Math.random() * 10) } Math.random()은 Math 객체에 있는 0~1사이의 난수들을 나타낸다. 여기에 10을 곱하면 Math의 범위가 0~10으로 바뀐다. (100을 곱하면 0~100사이의 난수) 즉 연산을 통해 범위를 바꿔줄 수 있다. Math.floor()은 소수점을 내림 처리 하여 정수만 표현 할 수 있게 해준다. *정수를 표현하는 3가지 방법 1)소수점 올림 Math.ceil() 2) 소수점 내림 Math.floor() 3) 소수점 반올림 Math.round() 2. if문 function random() { return Math.floor(Math.random() * 1..

1. jQuery cdn을 입력하여 jQuery 라이브러리 가져오기 head 사이에 cdn을 입력하여 라이브러리를 가져온다. 2. 섹션 이동 함수 코드 작성 body 태그 사이에 위의 script 코드를 작성해준다. 3. 예제 html 섹션1 섹션2 섹션3 섹션4 section1 section2 section3 section4 css #section1 { background-color: skyblue; height:500px; margin:20px; } #section2 { background-color: yellow; width: 100%; height:500px; margin:20px; } #section3 { background-color: pink; width: 100%; height:500px;..

1. 문제 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요. 출처: programmers.co.kr/learn/courses/30/lessons/42576?language=javascript 코딩테스트 연습 - 완주하지 못한 선수 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수 ..