자바스크립트
[자바스크립트] Map과 Set
[자바스크립트] Map과 Set
2021.07.05맵과 셋 객체 : 키가 있는 컬렉션을 저장 배열 : 순서가 있는 컬렉션을 저장 맵(Map) 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. 키가 있는 데이터를 저장한다는 점에서 객체와 유사하다. 맵은 키에 다양한 자료형을 허용한다는 점에서 차이가 있다. 즉, key-value의 쌍을 저장하며 각 쌍의 삽입 순서도 기억하는 컬렉션이다. 맵은 객체와 달리 키를 문자형으로 변환하지 않는다. 키에 자료형 제약이 없다. const array1 = [1, 4, 9, 16]; // pass a function to map const map1 = array1.map(x => x * 2); console.log(map1); // expected output: Arr..
[자바스크립트] window 창 크기
[자바스크립트] window 창 크기
2021.07.04자바스크립트 window 창 크기 컨트롤 윈도우 크기 창 크기를 알아보자. window.innerWidth : 브라우저 화면의 너비 window.innerHeight : 브라우저 화면의 높이 window.outerWidth : 브라우저 전체의 너비 window.outerHeight : 브라우저 전체의 높이 const body = document.querySelector("body"); function handleResize() { const length = window.innerWidth; if (length 800 && length < 1200) { body.className = "medium"; } el..
[자바스크립트] 이벤트 등록, addEventListener()
[자바스크립트] 이벤트 등록, addEventListener()
2021.07.04이벤트란? 사용자(사람)와 상호 작용을 하면서 마우스(키보드, 터치, 펜 등)를 조작하면 그에 대한 반응을 하는 것 특정 이벤트가 발생되었을 때, 특정 함수를 실행할 수 있게 해주는 것이 addEventListener이다. 자바스크립트 이벤트 처리 방법 3가지 1. HTML 요소의 속성으로 등록 이벤트를 단 하나밖에 지정할 수 없다는 단점이 있다. 2. DOM 요소의 프로퍼티로 등록 위와 동일 단점이 있다. let btn = document.getElementById("button"); btn.onclick = btnClick(); 3. addEventListener 사용하여 등록 여러 개의 이벤트를 등록할 수 있다. addEventListener("이벤트") 기본 문법 const title = docu..
[자바스크립트] 배열과 메서드
[자바스크립트] 배열과 메서드
2021.07.04배열과 메서드 배열 메서드에 대해서 알아보자 요소 추가·제거 메서드 arr.push(...items) : 맨 끝에 요소 추가 arr.pop() : 맨 끝 요소 제거 arr.shift() : 맨 앞 요소 제거 arr.unshift(...items) : 맨 앞에 요소 추가 1. arr.splice(start) delete arr[1];를 사용해서 배열을 삭제하면 key에 상응하는 값만 지우기 때문에 빈 공간을 나머지 요소들을 메워지는 않는다. 요소가 삭제되면서 배열 길이도 짧아지려는 어떻게 해야 할까? arr.splice(start)을 사용하면 된다!! 기본 문법 arr.splice(index[, deleteCount, elem1, ..., elemN]) 첫 번째 매개변수는 조작을 가할 첫 번째 요소를 가리..
[자바스크립트] 배열
[자바스크립트] 배열
2021.07.04배열 배열이란 순서가 있는 컬렉션을 저장할 때 쓰는 자료구조이다. 배열 선언 let arr = new Array(); let arr = []; // 대부분 이 방법을 사용해서 선언한다. let fruits = ["사과", "오렌지", "자두"]; // 초기 요소를 넣을 수 있다. 배열 수정 fruits[2] = '배'; // 배열이 ["사과", "오렌지", "배"]로 바뀜 새로운 요소 추가 fruits[3] = '레몬'; // 배열이 ["사과", "오렌지", "배", "레몬"]으로 바뀜 배열의 길이 알아내기 :: length let fruits = ["사과", "오렌지", "자두"]; alert( fruits.length ); // 3 // 요소에 여러 가지 자료형이 섞여 있다. let arr = [ '..
[자바스크립트] 문자열 및 관련 메소드
[자바스크립트] 문자열 및 관련 메소드
2021.07.04문자열 자바스크립트엔 글자 하나만 저장할 수 있는 별도의 자료형이 없다. 문자와 문자열의 자료형은 하나로 같다 백틱 문자열은 작은 따옴표, 큰 따옴표, 백틱으로 감쌀 수 있다. 백틱으로 감싼 문자열 중간에 표현식을 ${…}사용하면 문자열 중간에 쉽게 삽일할 수 있다. 이를 템플릿 리터럴(template literal)이라고 부른다. function sum(a, b) { return a + b; } alert(`1 + 2 = ${sum(1, 2)}.`); // 1 + 2 = 3. 백틱을 사용하면 문자열을 여러 줄에 걸쳐 작성할 수 있다. let guestList = `손님: * John * Pete * Mary `; alert(guestList); /* 출력 손님: * John * Pete * Mary *..
[자바스크립트] 숫자형, toString(), Math함수, isNaN, isFinite, Object.is(), parseInt, parseFloat
[자바스크립트] 숫자형, toString(), Math함수, isNaN, isFinite, Object.is(), parseInt, parseFloat
2021.07.04숫자형, toString() 자바스크립트의 일반적인 숫자에 대해서 알아보자. 숫자 입력 방법 10억처럼 뒤에 0이 많이 붙으면 잘못 입력하기 쉽다. 그래서 10억을 나타낼 때는 1bn을 사용하고, 73억을 나타낼 때는 7.3bn을 사용한다. 또한, 숫자 옆에 ''e'를 붙이고 0의 개수를 옆에 붙여주면 숫자를 줄 일 수 있다. (10의 거듭제곱) let billion = 1e9; // 10억, 1과 9개의 0 alert( 7.3e9 ); // 73억 (7,300,000,000) // 작은 숫자도 아래처럼 표현할 수 있다. let ms = 0.000001; let ms = 1e-6; // 1에서 왼쪽으로 6번 소수점 이동 toString(base) num.toString(base) 메서드는 base진법으로..
[자바스크립트] 원시값의 메서드, 래퍼 객체(object wrapper)
[자바스크립트] 원시값의 메서드, 래퍼 객체(object wrapper)
2021.07.04원시값의 메서드 원시값이란? 원시형 값. 문자 숫자 bigint 불린 심볼 null undefined 객체 프로퍼티에 다양한 값을 저장할 수 있다. {name : "John", age : 30}와 같이 대괄호를 사용해 만든다. JS에는 여러 종류의 객체가 있는데, 함수도 객체의 일종이다. 객체의 장점 중 하나는 함수를 프로퍼티로 저장할 수 있다는 것 let john = { name: "John", sayHi: function() { //객체 john을 만들고 메서드 sayHi를 정의 alert("친구야 반갑다!!!") } } john.satHi(); // 친구야 반갑다!! 자바스크립트는 날짜, 오류, html 등을 다룰 수 있게 해주는 다양한 내장 객체를 제공하는데, 이 객체들은 고유한 프로퍼티와 메서드..
[자바스크립트] 메서드와 this
[자바스크립트] 메서드와 this
2021.07.04메서드와 this 객체는 실제 존재하는 개체(entity)를 표현하고자 할 때 생성된다. 객체 프로퍼티에 저장된 함수를 '메서드’라고 부른다. this의 값은 함수를 호출하는 방법에 의해 결정된다. 실행하는 동안의 할당에 의해 설정될 수 없고, 함수가 호출될 때마다 다를 수 있다. 호출한 놈(체) === this 메서드 만들기 객체 user에게 인사할 수 있는 능력을 부여해보자 let user = { name: "John", age: 30 }; user.sayHi = function() { alert("안녕하세요."); }; user.sayHi(); // 안녕하세요! 함수 표현식으로 함수를 만들고, 객체 프로퍼티 user.sayHi에 함수를 할당해 주었다. 이렇게 객체 프로퍼티에 할당된 함수를 메서드(m..
[자바스크립트] 참조에 의한 객체 복사, 객체 복사 Object.assign
[자바스크립트] 참조에 의한 객체 복사, 객체 복사 Object.assign
2021.07.04참조에 의한 객체 복사 원시값(문자열, 숫자, 불린 값)은 ‘값 그대로’ 저장·할당되고 복사된다. // 원시값 복사 방식 let message = "Hello!"; let phrase = message; 독립된 변수에 각각 문자열 "Hello!"가 저장된다. 하지만, 객체는 원시 타입과 달리 ‘참조에 의해(by reference)’ 저장되고 복사된다. 변수엔 객체가 그대로 저장되는 것이 아니라, 객체가 저장되어 있는 '메모리 주소'인 객체에 대한 '참조 값'이 저장된다. // 객체 복사 방식 let user = { name: "Jhon" }; 객체는 메모리 내 어딘가에 저장되고, 변수 user엔 객체를 '참조’할 수 있는 값이 저장된다. 따라서 객체가 할당된 변수를 복사할 땐 객체의 참조 값이 복사되고 ..
[자바스크립트] 객체, 프로퍼티, 메소드
[자바스크립트] 객체, 프로퍼티, 메소드
2021.07.04객체 객체는 관련된 데이터와 함수(프로퍼티와 메소드)의 집합니다. 즉, 객체는 케이스이고, 데이터를 의미하는 프로퍼티와 데이터를 참조하고 조작할 수 있는 동작(behavior)을 의미하는 메소드가 객체를 이루고 있다. 자바스크립트에는 8가지 자료형이 있고 그중 7개는 오직 하나의 데이터만 담을 수 있어서 원시형(primitive type)이라고 부른다. 그러나 객체형은 원시형과 달리 다양한 데이터를 담을 수 있다. 키로 구분된 데이터 집합이나 복잡한 개체(entity)를 저장할 수 있다. 객체는 중괄호 {…}를 이용해 생성한다. 중괄호 안에는 ‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티(property)를 여러 개 넣을 수 있다. key엔 문자형, value엔 모든 자료형이 허용된다. 프로퍼..
[자바스크립트] 화살표 함수 기본
[자바스크립트] 화살표 함수 기본
2021.06.29화살표 함수 기본 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있다. let func = (arg1, arg2, ...argN) => expression arg1..argN를 받는 함수 func이 만들어진다. 함수 func는 화살표(=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환 축약 전 함수 let func = function(arg1, arg2, ...argN) { return expression; }; let sum = (a, b) => a + b; /* 위 화살표 함수는 아래 함수의 축약 버전입니다. let sum = function(a, b) { return a + b; }; */ alert( sum(1, 2) ); // 3 (a, b) => a + b는 인..