Dev/JavaScript 11

JavaScript 정리

JavaScript 정리 짧고 간단하게 나열하는 식으로 작성 JavaScript의 위치 태그 사이에 작성하며, 와 둘다 위치 가능 JavaScript Output Window.alert() 경고창 documnet.write() HTML출력 (테스트용) HTML로드 후 작성시 기존 문서 삭제 innerHTML HTML출력 요소로 작성 console.log() 브라우저 콘솔에 작성 JavaScript 문법(Syntax) 세미콜론(;)으로 구문 구별/ 텍스트는 " 또는 ' 안에 작성 변수는 const나 let으로 선언 ex) const x = 2; 주석은 //(한줄) /* */(여러줄) 로 작성 // 주석 /* 여러줄 */ 대소문자 구별하여 사용 첫 번째 문자는 문자, _, $ 세가지만 가능/ 예약어 사용 불..

Dev/JavaScript 2021.07.07

JavaScript 알고리즘 문제 풀이 시 자주 사용되는 테크닉

알고리즘 문제 풀이시 자주 사용되는 테크닉 알고리즘 문제 해결시 자주 사용되는 테크닉들을 정리 ( 매우 주관적 ) 배열이나 문자열에서 중복을 제거할 때 Set 자료형을 활용해 중복을 제거할 수 있다. // 배열 const arr = [1,3,2,4,3,1,5,6,2,1]; const newArr = [...new Set(arr)]; console.log(newArr); // [1,3,2,4,5,6] 중복이 제거된 배열을 얻을 수 있다. // 문자열 const str = "abcdacbe"; const newStr = [...new Set(str)].join(''); console.log(newStr); // "abcde" 중복이 제거된 문자열을 얻을 수 있다. 배열이나 문자열에서 유니크한 원소 뽑아내기 ..

Dev/JavaScript 2021.07.06

JavaScript 함수 파라미터 확장

Extended Parameter Handling(함수 파라미터 확장) 먼저 용어에 대해 알아보자 인수, 실행인자(argument) - 함수를 호출하는 입장에서 “넘겨주는 값” 인자, 매개변수(parameter) - “인자를 받은 값” 즉 함수를 선언할 때 인자를 입력해주고 인수로 호출한다! 기본 파라미터 초기값 기존 ES5에서는 함수 내에서 파라미터 체크와 초기화를 했다. //ES5 function plus(x, y) { x = x || 0; y = y || 0; return x + y; } console.log(plus()); //0 위에 보는것과 같이 초기값을 || 뒤에 넣어 함수 내에서 설정을 함 //ES6 const plus = (x = 0, y = 0) => { return x + y; } c..

Dev/JavaScript 2021.07.06

JavaScript 템플릿 문자열, 모듈, 클래스 ( Template string, Modules, Class, ES6 )

Template String(템플릿 문자열) 내장된 표현식을 허용하는 문자열 리터럴. 예제로 설명하는 방법이 더 쉬워서 바로 적어보면 다음과 같다. 사용 방법 변수에 템플릿 문자열 삽입 후 사용 let story = `Hello, World! I'm "24"` console.log(story) // Hello, World! I'm "24" 출력 위와 같이 변수 뒤에 내용들을 `(grave accent)로 감싸면 공백, 따옴표 등 작성한 그대로 출력할 수 있음 템플릿 문자열 안에 변수 삽입 가능 const a = "takeU"; const b = 24; ES5에서는 위에서 선언한 상수 a,b를 문자열 안에 출력하려면 아래와 같이 작성했다. console.log("Hello " + a + " I'm " + ..

Dev/JavaScript 2021.07.06

JavaScript 스프레드 연산자 ( Spread operator, ES6 )

스프레드 연산자(...) 배열 리터럴의 일부를 반복 가능한 식(다른 배열 리터럴 등)에서 초기화하거나 식을 함수 호출에서 여러 인수로 확장할 때 사용 구문 const array = [[arg0ToN ,] ...iterable [, arg0ToN]] func([args ,] ...iterable [, args | ...iterable]) 매개 변수 iterable 필수.반복 가능한 개체 arg0ToN 선택 사항이며 하나 이상의 배열 리터럴 요소 args 선택 사항이며 함수에 대한 하나 이상의 인수 설명 다음 코드 예제에서는 스프레드 연산자와 concat 메소드를 비교하며 설명 let a, b, c, d, e; a = [1,2,3]; b = "dog"; c = [42, "cat"]; // concat met..

Dev/JavaScript 2021.07.05

JavaScript 화살표 함수 ( Arrow function, ES6 )

JavaScript Arrow function ( 화살표 함수 ) 익명함수를 화살표 형태로 간략하게 쓸 수 있는 방법 ES6(ES2015)에서 나옴 특징 function 표현에 비해 구문이 짧다 this, arguments, super 등을 바인딩하지 않음 메소드 선언에 사용할 수 없다prototype에 사용할 수 없다 addEventListener 함수의 콜백 함수로 사용할 수 없다 생성자로 사용할 수 없다 항상 익명이다 2번에 추가로 설명을 보태자면 원래 자바스크립트의 this는 함수 호출 패턴에 따라 this에 바인딩되는 객체가 달라진다. Arrow function은 항상 자신을 포함하는 외부 scope에서 this를 받는데 이를 Lexical this라 한다. Arrow function을 사용하면..

Dev/JavaScript 2021.07.05

JavaScript 문자열 메소드 (String method)

JavaScript 문자열 메소드 (String method) 자바스크립트에서 자주 쓰이는 문자열 메소드를 정리 자바스크립트는 문자열을 배열과 같이 사용할 수 있기 때문에 배열과 중복되는 메소드는 제외하고 나머지만 정리 charCodeAt() 주어진 인덱스에 대한 UTF-16 코드를 나타내는 0부터 65535 사이의 정수를 반환 인자 - index ( 0 ~ str.length-1 ) const str = 'abcd'; str.charCodeAt(0); // 97 str.charCodeAt(1); // 98 repeat() 주어진 문자열을 반복하는 메소드 인자 - count const str = 'abc'; str.repeat(2); // 'abcabc' replace() 패턴에 일치하는 일부 또는 모든..

Dev/JavaScript 2021.07.05

JavaScript 배열 메소드 (Array method)

JavaScript 배열 메소드 ( Array method ) 자바스크립트에서 자주 쓰이는 배열 메소드를 정리 Array.isArray() (ES6) 인자에 들어가는 객체가 배열인지 확인할 때 사용 인자 - object Array.isArray({ a: 1, b: 2}) /// false Array.isArray([1,2,3]) //true concat() 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환 인자 - item1, item2, ... const arr = [1,2,3] arr.concat(4,5) // [1,2,3,4,5] arr.concat([4,5]) // [1,2,3,4,5] arr // [1,2,3] 원본이 바뀌지 않음 인자에 배열을 넣으면 배열의 원소 순서대로 들어감..

Dev/JavaScript 2021.07.05

JavaScript 변수 (Variable)

JavaScript Variable ( 변수 ) JavaScript는 크게 세가지의 변수 선언 방법이 있다. var let const var var는 ES6 이전까지 변수를 선언하는 유일한 방법이었다. 특징으로는 다음과 같다. Function-level scope전역 변수의 남발 for loop 초기화 식에서 사용한 변수를, 외부나 전역에서 참조 가능 중복 선언 가능의도하지 않은 변수값 변경 변수 호이스팅변수가 선언된 위치보다 위에서 참조가 가능 변수 선언시 선언과 초기화가 같이 이뤄짐. 위와 같은 특징 때문에 전역으로 선언되는 변수가 많아지고, 복잡성이 증가되면서 대안으로 ES6 에서 let과 const가 도입되었다. let let은 변수 선언에 사용되며 특징으로는 다음과 같다. Block-level ..

Dev/JavaScript 2021.07.05

JavaScript 자료형 (Datatype)

JavaScript 자료형 자바스크립트는 느슨한 타입 (loosely typed) 언어, 혹은 동적 (dynamic) 언어이다. 즉 변수의 타입을 미리 선언할 필요가 없다는 뜻이다. 타입은 프로그램이 처리되는 과정에서 자동으로 파악될 것이다. 또한 그 말은 같은 변수에 여러 타입의 값을 넣을 수 있다는 뜻이다. Data Type 종류 ECMAScript6( ES6, ES2015 ) 기준으로 다음과 같은 자료형이 있다. 기본 자료형 ( Primitive ) Boolean Null Undefined Number String Symbol (ECMAScript 6 에 추가됨) 위의 여섯가지에 객체 자료형까지 합치면 크게 7가지의 자료형이 있다. 기본 자료형 ( Primitive ) 1. Boolean boole..

Dev/JavaScript 2021.07.05