JavaScript
-
[Javascript] 기본 단어JavaScript 2020. 11. 17. 16:42
var와 let의 차이 var 으로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다. 하지만, let 로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다. 객체(Object) 객체(Object)란 단지 이름이 지정된 프로퍼티(property)의 모음이며, 키(key) : 값(value)의 쌍으로 이루어진 목록이다. 바인딩 바인딩(Binding)이란 함수 호출과 실제 함수를 연결하는 방법이다. 즉 함수를 호출하는 부분에 함수가 위치한 메모리 번지를 연결시켜 주는 것이다. 메소드(Mathod) foo.a=1; // . 연산자를 이용하여 a 라는 이름의 프로퍼티를 생성하면서 1이라는 값을 할당 프로퍼티(property) foo.sum=function() {console.log(foo.a+..
-
[JavaScript] 자바스크립트 URL정보 (window.location)JavaScript 2020. 11. 13. 17:23
자바스크립트의 window.location에는 URL정보를 볼 수 있는 변수들이 있는데 아래의 내용은 http://kftc.local:8088/test.jsp?gg=1 주소를 실행시켰을때 반환될 수 있는 정보들의 예 입니다. window.location.hostname; // => kftc.local window.location.href; // => http://kftc.local:8088/test.jsp w indow.location.host; // => kftc.local:8088 window.location.port; // => 8088 window.location.pathname; // => test.jsp window.location.search; // => ?gg=1 window.locatio..
-
[JavaScript] Deep한 생각JavaScript 2020. 11. 13. 17:22
자바스크립트 변수가 메모리에서 어떤식으로 돌아가는지 var let const 관련 : junwoo45.github.io/2019-11-04-memory_model/ 메모리 관리 : engineering.huiseoul.com/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%9E%91%EB%8F%99%ED%95%98%EB%8A%94%EA%B0%80-%EB%A9%94%EB%AA%A8%EB%A6%AC-%EA%B4%80%EB%A6%AC-4%EA%B0%80%EC%A7%80-%ED%9D%94%ED%95%9C-%EB%A9%94%EB%AA%A8%EB%A6%AC-%EB%88%84%EC%88%98-%..
-
[JavaScript] 호이스팅(Hoisting)JavaScript 2020. 11. 13. 16:19
호이스팅(Hoisting) 클로저같은 문법들의 효용성*을 이해하기위해서 자바스크립트가 가졌던 특징으로 var로 정의된 변수나 함수의 선언문이 유효범위의 최상단으로 끌어올려지는 것을 말합니다. ES6의 let과 const 키워드로 선언할 경우에는 발생하지 않습니다. 최상단으로 끌어올려진다는 말의 뜻을 오해할 수 있는데, 코드의 위치가 변한다는 의미는 아닙니다. 저도 기초를 배울때, 상단으로 코드가 끌어올려진다고 배웠으나 그렇지않습니다. 코드의 위치는 코드를 입력한 곳에 위치하고 있으며 컴파일 단계에서 자바스크립트 parser가 함수 실행 전 선언문을 먼저 메모리에 저장한 후, 함수안에 존재하는 변수와 함수 선언을 먼저 메모리에 저장한 후 실행시킨다는 뜻입니다. '유효범위의 코드가 실행되기 전 메모리에 먼저..
-
러닝 자바스크립트 정리(2) map,filter,reduceJavaScript 2020. 9. 24. 15:39
map map은 배열 요소를 변형 ex)숫자가 들어있는 객체에서 숫자만 꺼내오기, 함수로 구성된 배열에서 promise만 꺼내오기 *map과 filter은 모두 사본을 반환하며 원래 배열은 바뀌지 않습니다. const cart = [{name: "widget", price : 9.95}, {name: "gadget",price : 22.95}]; const names = cart.map(x=>x.name);//x의 name만 저장 const prices = cart.map(x=>x.price);//x의 price만 저장 const discountPrices = prices.map(x=>x*0.8);//price의 값에 전부 0.8을 곱하기 console.log(names); // [ 'widget', '..
-
러닝 자바스크립트 정리 (1)JavaScript 2020. 9. 24. 13:13
논리 연산자 다른 언어와 다르게 자바스크립트는 "참 같은 값"과 "거짓 같은 값"이 있음 거짓 같은 값 undefined null false 0 NaN '' 이 외에는 전부 참 같은 값이지만 염두해 둘것 모든 객체, valueOf() 메서드를 호출했을 때 false를 반환하는 객체도 참 같은 값에 속함 배열, 빈 배열도 ㅏㅁ 같은 값에 속함 공백만 있는 문자열 " " 문자열 "false" 해체 할당 ES6에서 새로 도입한 해체할당 이 기능은 객체나 배열을 변수로 '해체'할 수 있다 반드시 이름이 일치해야하고 변수를 미리 선언해야함 객체 해체 const obj = {b:2,c:3,d:4}; const {a,b,c} = obj; console.log(a); // undifined console.log(b);..
-
[JavaScript] 코딩 컨벤션JavaScript 2020. 9. 17. 12:40
나는 여태것 다른사람들과 협업할 일이 없었기 때문에 코딩 컨벤션이라는게 무엇인지도 몰랐으며 변수도 그냥 내가 원하는데로 만들었다. 그런데 이번 프로젝트를 진행하면서 각각의 변수명을 만들때에도 규칙이 있으며 무작정 코드를 줄이는것보다 코드를 늘리더라도 읽기 쉽게 만드는것이 더 중요하다는것을 알게 되었다. 그래서 적어본다 1. 들여쓰기 space와 tab을 섞어서 사용하지 않는다. 2. 문장의 종료 한 줄에 하나의 문장만 허용하며, 문장 종료 시에는 반드시 세미콜론(;)을 사용한다. 3. 명명 규칙 카멜 케이스을 사용한다. 참고사이트 : eslint.org/docs/rules/camelcase 생성자는 대문자 카멜 케이스를 사용한다. 상수는 영문 대문자 스네이크 표기법(Snake case)를 사용 (지역 변..