본문 바로가기

개인적으로 공부한 것을 정리해 놓은 블로그입니다 틀린 것이 있으면 댓글 부탁 드립니다!


반응형

전체 글

(160)
javascript 공부 11 - 기본개념7(정규표현식) 정규표현식(RegExp) 정규표현식이라 문자열을 검색하고 대체하는 데 사용 가능한 일종의 형식 언어(패턴) 이다 . 간단한 문자 검색부터 이메일 , 패스워드 검사 등의 복잡한 문자 일치 기능 등을 정규식 패턴으로 빠르게 수행할 수 있다 . 역할 문자 검색 (search) 문자 대체 (replace) 문자 추출(extract) 테스트 사이트 https://regexr.com/ RegExr: Learn, Build, & Test RegEx RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp). regexr.com 정규표현식은 자바스크립트에서만 사용하는 것이 아니기 때문에 특정 언어에서 작동하는 정규표현이 다른..
javascript 공부 9 - 기본개념5(Immutablility ,얕은 복사와 깊은 복사 ) JS 에서의 Immutablility 데이터의 불변성을 의미한다 자바스크립트에서의 데이터는 아래와 같이 분류할 수 있다. 원시 데이터 : String, Number, Boolean , undefined ,null 참조형 데이터 : Object , Array , Function 원시데이터 타입은 불변성을 갖고있다 이는 메모리 구조와 연관이 있다 . 아래 표를 메모리라고 생각해 보면 각 칸의 1,2,3,4 는 주소값을 의미한다. 1: 1 2: 4 3: 4: let a = 1; let b = 4; 위의 두 코드가 한줄씩 실행된다고 생각하면 첫번째 줄에서 1이란 값이 1번방으로 들어가고 a라는 변수는 1번방의 주소값을 가리킨다 두번째 줄에서 4란 값이 2번방으로 들어간다 b라는 변수는 2번방의 주소값을 가리킨다..
javascript 공부 8 - 기본개념4 (Object 클래스의 메서드들, 비구조화 할당(Destructuring assignment) , 전개 연산자) Object 클래스의 static 메서드들 //assign() //Object 클래스의 static 메서드이다 . //target 객체(param1)에 sorce 객체(param2)의 속성을 덮어씌운다. //source는 여러개 일 수 있다. //리턴되는 객체는 target에 할당된다. const target = {a:1 , b:2} const source = {b:4 , c:6} Object.assign(target,source); console.log(target) //예시 1 const userAge = { name: 'ugo', age:85 } const userEmail = { name: 'ugo', email:'ugo@test.com' } const target2 = Object.assign(..
javascript 공부 7 - 기본개념3 (배열을 다루는 메서드들) const numbers = [1,2,3,4,5] const fruits = ['apple','banana', 'cherry'] //forEach() //forEach 의 파라미터는 element , index 순이다 fruits.forEach((fruit,i)=>{ console.log(fruit,i) }) //map() //배열에서 데이터 추출하고 조작하여 새로운 배열을 만들어냄 const b = fruits.map((fruit,i)=>( { id:i, name:fruit } )) console.log(b) //filter() //콜백의 반환값이 true 일 때만 값을 반환하여 배열로 만든다 const nums2 = numbers.filter(num => num < 4) console.log(nums..
javascript 공부 6 - 기본개념2(클래스 , this, ES6의 class , 상속) 클래스 const hello = { firshName: 'ugo', lastName: 'hwang', getFullName: function(){ //this는 객체 자신을 의미한다 return `${this.firstName} ${this.lastName}` } } console.log(hello); const rok = { firshName: 'rok', lastName: 'lee', getFullName: function(){ return `${this.firstName} ${this.lastName}` } } console.log(rok); const oh = { firshName: 'oh', lastName: 'kim', getFullName: function(){ return `${this.f..
javascript 공부 5 - 기본개념1(화살표 함수 , IIFE(즉시 실행 함수) , 호이스팅 , 타이머 함수, 콜백) 화살표함수 화살표함수는 기본적인 로직을 축약형으로 표현할 수 있게 해준다 // 일반 함수 const mutiple = function(x){ return x * 2 } //화살표함수 const mutiple = (x) => {return x * 2 } //파라미터가 1개일 경우 소괄호도 생략가능하며 다른 로직없이 단순하게 한 구문의 값을 리턴할 경우 중괄호와 //리턴 키워드를 생략할 수 있다 . const multiple = x => x * 2 //객체 타입을 리턴할 때는 소괄호로 감싸준다 . x => ({name : 'ugo'}) IIFE(Immediately-Invokaed Function Expression :즉시 실행 함수) 함수를 만들때 따로 이름을 정의하지 않아도 아래와 같이 즉시 실행함수로 ..
javascript 공부 3 - 형 변환(Type conversion) const a = 1 const b = '1' console.log(a === b) console.log(a == b) 위와 같은 코드가 있을때 일치연산자를 사용하는 첫번째 출력은 데이터 타입이 다름으로 false가 나온다 . 반면에 동등 연산자인 ==을 사용하는 두번째 출력에서는 형변환이 일어나 true가 출력된다 의도치 않은 결과가 나올 수 있기 때문에 자바 스크립트에서는 == 보다는 ===을 사용하는 걸 권장 한다. 자바스크립트에서 형 변환이 일어나는 대표적인 경우는 if 문 안에 boolean 값을 할당할 때이다. 자바스크립트에서는 if 문안에 true 혹은 false 를 의미하는 값이 아래와 같이 존재한다. Truthy( 참 같은 값 ) : true , {}, [] , 1 , 2 , 'false..
javascript 공부 2 - 변수의 유효범위( var, let , const ) const , let 변수의 유효범위 //변수의 유효범위 function scope1(){ if(true){ const a = 'hi'; console.log(a) } } //변수는 블록레벨의 유효범위를 갖는다 //아래의 코드들은 작동하지 않는다 //에러 발생 function scope2(){ if(true){ const a = 'hi'; } console.log(a) } //undifined 출력 function scope3(){ if(true){ console.log(a) } const a = 'hi'; } //undifined 출력 function scope4(){ if(true){ console.log(a) const a = 'hi'; } } let , const 변수는 한 블록내에서만 유효하다 ..

반응형