본문 바로가기

Javascript/자바스크립트 문법19

[Javascript] 문자열 자르기 (substr, substring, slice) [Javascript] 문자열 자르기 (substr, substring, slice)문자열 자르기 : substr형식) String.substr( "시작인덱스" , "자를 길이" ) 시작 인덱스부터 해당 길이만큼 자르는 함수이다. "길이" 부분을 생략하면 시작 인덱스부터 문자열 끝까지 자른다.var str = '자바스크립트';var result1 = str.substr(0, 2); // "자바"var result2 = str.substr(2, 4); // "스크립트"var result3 = str.substr(2); // "스크립트" 문자열 자르기 : substring형식) String.substring ( "시작인덱스" , "종료인덱스" ) 시작인덱스부터 종료인덱스 -1 까지 문자열을 자른다. 음수인덱.. 2024. 8. 7.
[Javascript] 배열 추가와 삭제 정리 [Javascript] 배열 추가와 삭제 정리 배열에 추가하는 함수는 push, unshift 가 있고, 배열에서 원소를 삭제하는 함수는 pop, shift 가 있다. 배열을 추가하고 삭제하는 함수는 splice 가 있다. 그 외에 slice와 filter를 통해 특정 원소들을 삭제할 수 있다.  (맨 뒤) 배열 추가 : push배열의 끝에 새로운 요소를 추가 하고, 배열의 새로운 길이를 반환한다.//맨끝에 한개값 추가const arr = ['1', '2', '3'];const new_length = arr.push('4');console.log(new_length) //새로운 배열의 길이 : 4console.log(arr); // ['1', '2', '3', '4']//맨끝에 여러값 추가arr.push.. 2024. 8. 7.
[Javascript] for 반복문 [Javascript] for 반복문for 반복문은 반복적으로 실행해야 하는 횟수가 정해져 있을 때 사용하기 좋다. 자바스크립트에서는 다양한 형태의  for 반복문이 존재한다.for 반복문의 종류forfor ... infor ... offorEach() : Array 메서드for 반복문가장 일반적인 for 문의 형태로 초기값 설정 ( let i = 0 ), 반복 조건 ( ifor(let i = 0; ifor ... in  반복문for in 문은 object에 사용할 수 있는 반복문이다. 배열 반복도 가능하나 추천하지 않는다. in 키워드를 사용한다. 만약 없는 key 값을 사용하게 되면 undefined 가 출력된다. const obj = { name : '이름', age : '나이'}for(cons.. 2024. 8. 2.
[Javascript] Set collection [Javascript] Set collectionset 이란 value 값만을 저장하며 중복을 허용하지 않는 collection 입니다. 대소문자를 구분하기 때문에 hi와 HI는 다른 값으로 인지합니다. 사용 이유value 값으로 고유한 값을 가질 수 있음.중복값을 제거할 수 있음.const empty = new Set();console.log(empty); // {}const nums = new Set([1, 2, 3, 4, 5]);console.log(nums); // { 1, 2, 3, 4, 5 }const str = new Set('HELLO');console.log(str); // { 'H', 'E', 'L', 'O' }const objArr = new Set([ {name:'라이언',comp.. 2024. 7. 31.
[Javascript] sort() 와 toSorted() 함수 [Javascript] sort() 와 toSorted() 함수sort() 메서드는 자바스크립트에서 배열을 정렬하는 가장 유명한 방법이다. toSorted() 메서드는 비교적 최근에 추가된 함수이다.sort() 함수sort() 함수는 원래 배열 내에 값들을 재배치하며 정렬한 배열을 다시 반환한다. 새로운 배열을 반환하는 것이 아니라 기존 배열을 정렬하여 변경하는 방식이다. const numbers = [3, 1, 2];const sorted = numbers.sort(); // [1, 2, 3]console.log({ nums, sorted}); /* { nums : [1, 2, 3], sorted : [1, 2, 3]*/sort() 함수를 이용한 숫자 배열 정렬 ⭐sort() 함수는 정렬하기 전에.. 2024. 7. 29.
[Javascript] 정규표현식 [Javascript] 정규표현식정규표현식이란 문자열을 처리하는 방법 중 하나로 특정한 조건의 문자를 "검색" 하거나 "치환" 하는 과정을 매우 간편하게 처리할 수 있게 도와주는 수단이다.1. 매칭 패턴패턴의미a-zA-Z 영어알파벳(-으로 범위 지정)ㄱ-ㅎ가-한글 문자(-으로 범위 지정)0-9숫자(-으로 범위 지정).모든 문자열(숫자, 한글, 영어, 특수기호, 공백 모두! 단, 줄바꿈X)\d숫자\D숫자가 아닌 것\w영어 알파벳, 숫자, 언더스코어(_)\W/w 가 아닌 것\sspace 공백\Sspace 공백이 아닌 것\특수기호특수기호2. 검색 패턴패턴의미[]괄호 안의 문자들 중 하나[^문자]괄호 안의 문자를 제외한 것^문자열특정 문자열로 시작문자열$특정 문자열로 끝()그룹 검색 및 분류 (-> match .. 2024. 7. 22.
[Javascript] Array.fill() 메서드 [Javascript] Array.fill() 메서드일반적인 배열 생성 (생성자)const array = Array(5);array.length = 5;// length 프로퍼티를 사용하여 배열의 길이 조절array.length = 2;array[0] = undefined; 위 예시를 보면 Array() 라는 배열 생성자를 사용하여 array라는 배열 변수에 5칸짜리 배열을 생성하였다.만약 length 프로퍼티를 2로 변경한다면 배열의 가장 큰 인덱스 값이 2가 된다. (즉, length 프로퍼티로 배열의 2~4번째 인덱스에 해당하는 요소들이 배열에서 모두 삭제됨. => length 프로퍼티는 배열을 변경시킬 수 있어 사용에 주의!)Array.fill( value, start, end ) 메서드 : 원시.. 2024. 7. 19.
[Javascript] ES6 문법 8 - 구조 분해 심화 (중복 구조 분해) ES6 문법 8 - 구조 분해 심화 (중복 구조 분해) ⚠️ 보기 전에 구조 분해를 무조건 보고 와야 이해하기 좋습니다! ⚠️ 링크 : https://yy-kkang.tistory.com/57 [Javascript] ES6 문법 6.2 - 구조 분해 할당 ES6 문법 6.2 - 구조 분해 할당 기존 자바스크립트의 구조 분해 사용 방법 //배열 구조 분해 var list = [0,1]; var item1 = list[0]; //배열의 인덱스를 이용해서 변수에 값 할당 var item2 = list[1]; var item3 = list[2] yy-kkang.tistory.com 중복 구조 분해 ( nested desctructuring ) 객체나 배열이 다른 객체나 배열을 포함하는 경우, 좀 더 복잡한 패턴.. 2023. 5. 4.
[Javascript] ES6 문법 7.2 - 배열 함수 2 ( reduce() 함수) ES6 문법 7.2 - 배열 함수 2 ( reduce() 함수) reduce() 함수 reduce() 함수는 배열의 각 요소에 대해 사용자가 정의한 리듀서(reducer) 콜백 함수를 실행하고 하나의 결과값을 순서대로 반환한다. 리듀서 함수의 반환값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 된다. 이에 따라 누적 계산의 결과값이 reduce() 함수의 반환값이다. 형식 arr.reduce( callback [ , initialValue ] ) callback : 배열의 각 요소에 대해 실행할 함수 (리듀서(reducer) 함수)로 네 개의 인자( 누산기(acc), 현재값(cur), 현재 인덱스(idx), 원본 배열(src) )를 갖는다. 누산기(accumulator.. 2023. 4. 21.
[Javascript] ES6 문법 7.1 - 배열 함수 1 ( forEach(), map() 함수) ES6 문법 7.1 - 배열 함수 1 ( forEach(), map() 함수) forEach() 함수란 forEach() 함수는 배열을 순회하는 여러 방법 중 하나로 오직 배열에서만 사용가능하다. 배열의 요소들을 반복하여 작업을 수행할 수 있는 함수이다. (ES6 부터 지원) forEach() 함수는 인자로 반드시 콜백 함수 또는 익명 함수가 필요하다. 배열의 각 요소들이 반복될 때 이 함수들이 호출되어 배열 요소의 인덱스와 값에 접근 가능하다. 기존 자바스크립트 문법 for문으로 쿼리스트링 제거하는 예제 function parse(qs) { //qs값은 웹주소 (이 예제에서는 쓰지 x) var queryString = qs.substr(1); var chunks = queryString.split('&.. 2023. 4. 21.
[Javascript] ES6 문법 6.2 - 구조 분해 할당 ES6 문법 6.2 - 구조 분해 할당 기존 자바스크립트의 구조 분해 사용 방법 //배열 구조 분해 var list = [0,1]; var item1 = list[0]; //배열의 인덱스를 이용해서 변수에 값 할당 var item2 = list[1]; var item3 = list[2] || -1; //배열에 값이 없다면 초깃값(default) 저장 ⭐ var temp = item2; //값 치환 item2 = item1; item1 = temp; //객체 구조 분해 var obj ={ key1 : 'one', key2 : 'two' }; var key1 = obj.key1; //객체의 키값을 변수에 할당 var key2 = obj.key2; var key3 = obj.key3 || 'default ke.. 2023. 4. 21.
[Javascript] ES6 문법 6.1 - 객체 확장 표현식 ES6 문법 6.1 - 객체 확장 표현식 객체 확장 표현식 : 객체나 배열의 특정값을 손쉽게 추출할 수 있는 표현식 ES6 이전 기존 자바스크립트의 객체 확장 표현식 사용 방법 var x = 0; var y = 0; //동일한 이름의 키값을 객체에 넣음 var obj = { x : x, y : y }; var randomKeyString = 'other'; var combined = {}; //연산 결과로 키값을 대입할 때는 키값을 지정할 코드를 추가로 작성 combined[ 'one' + randomKeyString ] = 'some value'; var obj2 = { x : x, methodA : function() { console.log('method A' ); }, methodB : funct.. 2023. 4. 21.
[Javascript] ES6 문법 5 - 화살표 함수 ES6 문법 5 - 화살표 함수 기존 자바스크립트의 함수 사용방법 //add라는 이름이 있는 함수 function add(first, second){ return first + second; }; //이름이 없는 익명 함수를 변수에 대입 var add = function(first, second) {return first + second; }; ES6의 화살표 함수 사용 방법 기존 자바스크립트의 익명 함수를 선언하고 변수에 대입하는 방식과 유사하다. 다른 점은 function 키워드를 생략하고 인자 블록(()) 과 본문 블록({}) 사이에 => 를 표기한다는 점이다. var add = (first, second) => { return first + second; }; //결과값을 바로 return 하는 .. 2023. 4. 21.
[Javascript] ES6 문법 4 - 클래스와 상속 ES6 문법 4 - 클래스와 상속 ES6 문법 이전 기존 자바스크립트 문법 기존 자바스크립트 문법은 클래스 표현식이 없어서 * prototype 으로 클래스를 표현했다. 즉, 함수를 생성자(constructor) 형태로 선언한 다음 상속이 필요한 변수나 함수를 prototype 객체에 할당하는 방법이다. * prototype 객체 : new 연산자로 생성되는 객체 안에서 this 연산자의 함수 및 변수 선언 위치를 참조할 수 있는 요소 구현 예제 //생성자 형태로 선언 function Shape (x,y) { this.name = 'Shape'; this.move(x,y); } //static 함수를 선언하는 예제 (신경x) Shape.create = function(x,y){ return new Sha.. 2023. 4. 21.
[Javascript] ES6 문법 3.1 - slice(), concat() 메서드 (feat. 무결성) slice(), concat() 메서드 (feat. 무결성) slice ( begin , end ) 메서드 slice() 메서드는 어떤 배열의 begin 부터 end 까지 ( end 미포함 ) 에 대한 얕은 복사본을 새로운 배열 객체로 반환한다. 즉, 원본 배열은 바뀌지 않는다!! begin : 0을 시작으로 하는 추출 시작점에 대한 인덱스 (음수 인덱스는 배열의 끝에서부터의 길이를 나타냄. begin 이 undefined 인 경우에는 0번 인덱스가 시작점임. begin이 배열의 길이보다 큰 경우에는 빈 배열을 반환함.) end : 추출을 종료할 0 기준 인덱스 (즉, end 미포함함. 만약 end 값이 배열의 길이보다 크다면 배열의 끝까지 추출함. ) const animals = ['ant', 'bis.. 2023. 4. 21.

티스토리툴바