본문 바로가기

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


반응형

JAVASCRIPT

(8)
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 변수는 한 블록내에서만 유효하다 ..
javascript 공부 1 - node.js , npm(node package manager) node.js란? chorome V8 Javascript 엔진으로 빌드된 JavaScript 런타임 .(런타임이란 프로그래밍 언어가 동작하는 환경을 말한다. ) JS 가 돌아갈 수 있는 환경중 두가지 대표적인 것은 node.js(서버) , 브라우저이다 . 프런트엔드 개발에서 화면 개발을 위해 여러가지 라이브러리들을 설치해서 개발을 하게 되는데 이러한 모듈들은 브라우저 환경에서 직접 적으로 설치하고 동작할 수 없기 떄문에 node js 를 통해 해당 라이브러리들을 사용할 수 있게 된다(html , css , js 로 변환 시켜줌). NVM(node version manager) node.js 사이트에서 한가지 버전을 다운받아서 사용할 수도 있지만. 프로젝트마다 node 의 버전이 다를 수 있기 때문에 작업..

반응형