WebProgramming/JS

WebProgramming/JS

[JS] JSON

JSON (JavaScript Object Notation) ; Javascript의 데이터를 표현하는 하나의 포멧. 속성과 값의 쌍 - 큰 따옴표만 사용 ex) "name" : "guesung" JSON.stringify(A) ; A배열을 문자열화(JSON에서 사용) ex) name:guesung -> "name":"guesung" JSON.parse(A) ; A배열을 객체화(JS에서 사용) ex) "name":"guesung -> name:guesung localStorage ; 데이터가 만료되지 않음 sessionStorage ; 페이지 세션이 끝날 때 즉, 페이지를 닫을 때 데이터가 사라짐 localStorage.setItem('a','b') localStorage.getItem('a') loca..

WebProgramming/JS

[JS] 정규표현식

정규표현식 ; 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어 - 많은 텍스트 편집기, 프로그래밍 언어에서 문자열의 검색과 치환을 위해 검색 생성자 방식 ; const A = new RegExp('표현식','플래그') 리터럴 방식 ; const A = /표현식(패턴+문자)/플래그 const A = new RegExp('a','gi') const A = /fox/g 메소드 test ; 정규식.test(문자열) _ 일치 여부 반환 match ; 문자열.match(정규식) _ 일치하는 문자의 배열 반환 replace ; 문자열.replace(정규식,대체문자) _ 일치하는 문자를 대체 플래그(옵션) g ; 모든 문자 일치(global) i ; 영어 대소문자를 구분 않고 일치(ignore ca..

WebProgramming/JS

[JS] import,export ; 모듈 가져오기,내보내기

export(내보내기) export // 배열 내보내기 export let num = [1,2,3,4,5] // 상수 내본개ㅣ export const a=3 // 클래스 내보내기 export class User{ constructor(name){ this.name=name; } } default export ; export할 때 이름을 따로 명시하지 않아도 됨 but 1개의 함수만 내보내기 가능 export default function (){ console.log(1) } import(가져오기) // main.js 파일. B대신 B'라는 이름 사용 import {A, B as B'} from './main.js // main.js 파일. c.js파일의 모든 함수 가져옴 import * as A from..

WebProgramming/JS

[JS] 구조 분해(Destructuring), 전개 연산자(...)(spread, rest)

객체의 구조분해 객체 안의 값을 추출해 변수 혹은 상수로 선언 ; 기존 A['a'] or A.a -> a라고 사용 가능 - a대신 e라는 변수명으로 사용 - d의 기본값 'korea'부여 const A={ a:"a'", a:"b'", C:"c'" } const {a:e,b,c,d='Korea'}=A 배열의 구조분해 A배열에서 ,,l,m을 인덱스 순서대로 아이템들을 각각 변수로 부여함 ; 기존 A[2] -> l라고 사용 가능 - , , 로 A배열의 'a','b'는 생략 const A=['a','b','c'] const[,,l,m]=A - 구조 분해를 이용한 값 바꾸기 let a = 1; let b = 2; [a, b] = [b, a]; 전개 연산자( ... ) ( spread) ...A ; A라는 배열/객..

WebProgramming/JS

[JS] 원시 데이터, 참조형 데이터 / 얕은 복사와 깊은 복사

a=b 원시 데이터 ; 데이터가 복사가 되어 새로운 객체 데이터가 생성됨 ex) String, Number, Boolean, undefined, null - a변경해도 b는 불변 참조형 데이터 ; 단순하게 메모리의 참조 주소(포인터)만 복사함 ex) Object, Array, Function - a변경 시 b도 변경됨 얕은 복사와 깊은 복사 얕은 복사 # a는 array형 1. b=a ; a변경 시 b도 변경 됨(같은 주소를 가키기에) 깊은 복사 1. spread 복사 const person = { name:"MAX" }; const secondPerson = { ...person }; person.name="Manu"; console.log(secondPerson.name) // MAX 2. slice..

WebProgramming/JS

[JS] 메소드(String, Math, Array, Object)

String 메소드 A.length ; 길이 반환 A.indexOf('a') ; a문자열의 인덱스값 반환 / 없을 경우 -1 반환 A.slice(a, b+1) ; A[a] ~ A[b]로 잘라냄 A.substr(a,b) ; A[a]부터 b개를 가져옴 A.replace('A','B') ; a문자열 -> b문자열로 변경 A.match(/.+(?=a)/)[0] ; a라는 문자 이전까지 잘라냄 A.trim() ; 문자열 앞 뒤 존재하는 공백 없앰. 보통 사용자로부터 입력 받아올 때 사용 A.toString(n) ; 숫자 -> (n진수인)문자로 변환 A.toUpperCase() / A.toLowerCase() ; 모든 영문을 대문자/소문자로 변환 A.repeat(n) ; A를 n번 반복 A.codePointAt(0..

WebProgramming/JS

[JS] 생성자 함수(Prototype), Class 상속

생성자 함수(Prototype) - JS는 프로토타입 기반의 언어임. 프로토타입 기반 언어는 객체 원형인 프로토타입을 이용하여 새로운 객체를 만들어냄 - 프로토타입 객체를 참조하는 Prototype속성 - 객체 멤버인 proto속성이 참조하는 숨은 링크 function User(first,last){ // 생성자 함수 ; 파스칼표기법 사용 this.firstName=first this.lastName=last // this.getFullName=function(){ // 이 식을 아래에 prototpye을 통해 생성할 수 있음 // return `${this.firstName} ${this.lastName}` // } } User.prototype.getFullName=function(){ return ..

WebProgramming/JS

[JS] 함수

함수 기명 함수 function hello(){ console.log('Hello~'); } 익명 함수 let world=function(){ console.log('World~'); } - 호출 하기 위해 변수에 집어넣어 사용 화살표 함수 - 소괄호에 매게변수를 넣고, { } 안에 함수 작성 + 매게변수가 1개라면 소괄호를 생략 가능하고, return만 하는 함수라면 중괄호 생략 가능 // 매게변수 1개 & 중괄호 X const doubleArrow = x => x*2 console.log('doubleArrow',doubleArrow(7,3)) // 매게변수 1개 & 중괄호 O const doubleArrow2 = x => { return x*2 } console.log('doubleArrow2',d..

피터s
'WebProgramming/JS' 카테고리의 글 목록 (2 Page)