공부/JavaScript
-
[JS] this 바인딩이란?공부/JavaScript 2025. 10. 11. 22:01
this를 사용하면서 그냥 쓰는 거 아니야라는 생각을 가졌는데, 궁금해서 찾아보다 보니 종류와 차이점을 기록하면 좋을 것이라고 생각하여 글을 작성하게 되었습니다. 혹시라도 부정확한 정보를 전달드릴 수 있습니다. 다만 틀린 부분이 있으면 댓글을 남겨주세요. 자바스크립에서 this는 함수가 어떻게 호출되었는지에 따라 달라집니다. 이를 this 바인딩이라고 합니다.오늘은 this 바인딩의 종류와 차이점을 작성하도록 하겠습니다. 1. 기본 바인딩(Default)- 일반 함수 호출 시, strict mode가 아니면 전역객체를 가리킵니다.var v = 3; // let, const로 선언한 전역 변수는 window객체의 프로퍼티가 될 수 X// 일반 모드function normal(){ console.log(t..
-
자바스크립트 파일을 브라우저에서 한 번에 로딩 할 때의 문제점공부/JavaScript 2021. 12. 23. 02:59
🔔javascript load 브라우저는 HTML을 파싱해 읽다가 자바스크립트를 읽기 시작하면서 HTML 구문분석을 멈추게 된다. 스크립트 다운 -> 파싱 -> 실행한 후에 다시 파싱 모든 스크립트 파일을 브라우저에서 한번에 로딩하게 된다면 그만큼 HTML이 중지 되는 시간이 길어질것이다. (=HTML Parsing Pause = 블록모드) 이런 문제를 해결하기 위해 defer와 async를 사용할 수 있다. 로딩이 오래 걸리는 스크립트 태그가 들어가 있을 경우에 사용한다. async - HTML을 파싱하는 동안 스크립트를 만나면 HTML 파싱과 함께 스크립트를 다운받고 다운이 완료된 후 스크립트를 실행한다. 스크립트를 실행하는 동안에는 HTML 파싱을 멈추고 실행이 끝난 후 다시 HTML 파싱을 시작한..
-
배열을 객체로 변환 하는 방법공부/JavaScript 2021. 7. 14. 18:14
배열을 객체로 바꾸는 방법들이 많이 존재한다. 그러나 내가 원하는 해답을 구글링을 해서 얻으면 좋겠지만 쉽게 나오지 않고 어떤 검색어를 입력해야 되는지 잘 모르겠다. 직접 정리하고 내가 나중에 찾아 볼수 있도록 하기 위하여 작성하였다. 🔔배열 ->객체 - Object.assign({},arr) 배열에 있는 인덱스를 키값으로 받아 객체로 변환한다. - arr.reduce((target,key,index)=>target[index]=key) reduce를 사용하여 배열을 객체로 변환한다. - spread(...) 사용 🔔3차 배열 -> 객체 - map을 사용 3차원 배열에서 1차원 배열의 각 인덱스가 객체로 변한 것을 확인 할 수 있다. 그러나 이것도 조금은 복잡한 느낌이 있다. - reduce 사용 3차 ..
-
클로저, spread, rest공부/JavaScript 2021. 7. 6. 16:07
🔔클로저 - 함수를 리턴하는 함수 - 함수와 함수가 선언된 어휘적 환경의 조합 -클로저는 외부 함수의 실행이 끝나도 메모리 상에 저장할 수 있다. newAdd에 add 함수의 x에 4가 할당 된 상태를 저장한다. 🔔 spread - 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용 -배열 합치기 , 복사 🔔rest - 파라미터를 배열의 형태로 받아서 사용할 수 있다. 파라미터 개수가 가변적일 때 유용하다. 파라미터의 개수가 정해져 있지 않은 경우에 사용.
-
스코프공부/JavaScript 2021. 7. 1. 23:52
🔔 스코프 - 변수가 접근 할 수 있는 범위이다. 위와 동일하게 변수를 어디서 선언 해주냐에 따라 범위를 지정할 수 있다. - 바깥쪽 스코프에서 선언 한 변수는 안쪽 스코프에서도 사용이 가능하다 - 안쪽 스코프에서 선언 한 변수는 바깥 스코프에서는 사용이 불가능하다. 지역스코프에 name 변수를 새로 선언 한 후에 Mike를 할당 하였지만 지역 스코프로 인해 전역 스코프에는 영향을 주지 못한다. - 2종류의 스코프가 있다. - 블록 스코프(중괄호로 둘러싼 범위), 화살표 함수도 블록 스코프 - 함수 스코프(함수로 둘러싼 범위) 함수를 선언하거나 표현식은 함수 스코프라고 한다.
-
원시, 참조 자료형공부/JavaScript 2021. 7. 1. 23:13
🔔 원시 자료형(primitive type) - 6가지 타입이 있다. - 주로 string, number, undefined, boolean, (null) 을 이야기 한다.( bigint, symbol) - 원시 자료형은 하나의 변수에 하나의 데이터를 가지고 있다. 🔔 참조 자료형(reference type) - 배열(arr), 객체(obj), 함수(func)이 참조 자료형이다. - 하나의 변수에 하나의 데이터를 주는 것이 아닌 여러 데이터를 주는 것을 의미한다. - 변수에 데이터를 준다는 것 보다 주소를 지정하는 것이다. - 참조 자료형은 원시 자료형이 데이터를 가지고 있는 방식과는 다르다. - 참조 자료형이 데이터를 가지고 있는 영역을 heap이라고 한다.
-
객체공부/JavaScript 2021. 6. 29. 15:29
🔔 객체 - 객체는 키(key)와 값(value)을 가지고 있다. - 객체의 값을 표현하는 방식은 2가지가 있다. Dot notation : 점(.) 키를 입력하여 값을 표시 Bracket notation :대괄호([])를 이용하여 값을 표시, 대괄호 안에 키를 "" 사용하여 입력해야 함 - 값을 추가 할 수 있다. - 값을 삭제 할 수 있다. ( delete obj.key // delete obj["key"]) - 객체에 키가 있는 지 확인 할 수 있다.( key in obj) true - key가 있다. false - key가 있다. - 반복문을 사용할 수 있다.(key in obj)
-
배열에 사용할 수 있는 다양한 메서드(length ,push ,pop ,unshift ,shift ,slice ,splice...)공부/JavaScript 2021. 6. 28. 17:05
🔔배열 - 배열은 순서가 있는 값이다. - 순서는 0부터이다. ^age라는 배열에 0번째 index 값은 8이다. ^age라는 배열에 2번째 index 값은 15이다. ^age라는 배열에 4번째 index 값은 34이다. *지금부터 배열을 arr라고 선언하겠다. 배열인지 아닌지 확인 -Array.isArray(arr) boolean값으로 출력된다. 배열의 길이를 확인 -arr.length 배열의 끝에 새로운 요소를 추가 - arr.push(값); 배열의 마지막 요소를 삭제 -arr.pop(); 배열의 처음 요소를 제거 -arr.shift(); 배열의 처음 요소를 추가 -arr.unshift(값); pop, shift, unshift, push를 바로 return 하면 배열이 출력되지 않고 특정 요소가 나..