JS(javascript)
-
ko.javascript.info - 함수 심화학습JS(javascript) 2024. 4. 14. 14:42
1. 재귀와 스택 * 재귀란? 함수 내에서 자기 자신을 호출하는 함수. * 특정 자료구조를 처리하기 위해서도 활용된다(ex: HTML 태그 같은 트리 구조의 데이터를 처리할 때라던가) * 반복문과 비교했을 때, 더 많은 실행 컨텍스트 생성으로 인해 내부적으로 더 많은 메모리를 요구하기에 성능적으로는 좋지 않지만 코드가 명확해지고 유지보수가 쉬워진다는 점은 장점이라고 볼 수 있다.(성능도 그렇게 체감되게 안좋아지지 않는다) * 실행 컨텍스트는 함수가 호출될 때 1회 생성된다. (실행 컨텍스트: 함수 수행과 관련된 상세 정보가 저장되는 자료구조, 저장되는 정보로는 제어 위치, 변수, this 등이 있음) 함수가 호출되고 내부에서 한 번 더 함수가 호출되면 현재 호출중인 함수에 대한 실행 컨텍스트의 제어흐름 ..
-
ko.javascript.info - 자료구조와 자료형JS(javascript) 2024. 3. 25. 22:20
1. 원시값의 메서드 원시 값에 대해 프로퍼티 혹은 메서드에 접근하려하면 원시 래퍼 객체가 만들어지며 이를 통해 원시 값 관련 메서드나 프로퍼티를 사용할 수 있다. 이후 원시 값은 남지만 원시 래퍼 객체는 사라진다. 이를 통해 원시 값은 가볍게 유지하되, 원시 값 관련 메서드 혹은 프로퍼티엔 접근할 수 있게 되어 코드가 간결해질 수 있다. *원시 래퍼 객체 생성자로 값을 생성하진 말자. *형변환을 할땐 원시 래퍼 객체를 사용하자. 2. 숫자형 숫자 관련 유용한 메서드: Math.floor, Math.round, Math.ceil, Math.toFixed, Math.max, Math.min, Math.random, Math.pow, isNaN 알게된 사실: 1. toFixed는 문자열을 반환한다.(단항 +..
-
ko.javascript.info - 객체: 기본JS(javascript) 2024. 3. 25. 21:04
1. 객체 객체는 프로퍼티들의 집합 프로퍼티는 키와 값으로 구성됨 키는 문자형, 값은 모든 자료형 허용 객체는 생성자 문법, 리터럴 문법 두 가지 방법으로 선언 가능 user 객체의 프로퍼티 접근: user.name; user 객체에 프로퍼티 추가: user.name = 'John'; user 객체에서 프로퍼티 삭제: delete user.name; 동적으로 user 객체의 프로퍼티에 접근하는 법: user[dynamicKey] 객체 안에 특정 프로퍼티가 존재하는지 검사하는 법: 'name' in user; 객체 안에 프로퍼티를 순회하는 법: for (key in user) { ... } 객체 프로퍼티의 이름(key)으로는 예약어 사용 가능 객체의 프로퍼티의 이름으로 숫자형을 사용하더라도 자동으로 문자형..
-
배열 method 정리JS(javascript) 2024. 2. 20. 21:45
평소에 배열 관련 메소드로 map, filter, ...(rest) 정도만 활용했던 거 같아 환기시킬 겸 다시 정리해본다. 이로 인해 더욱 깔끔한 코드를 작성할 수 있게 되기를... reduce: 배열의 각 요소에 오른쪽으로 나아가며 리듀서 함수를 수행하고 하나의 결과값으로 반환한다. reduceRight: 배열의 각 요소에 대해 오른쪽에서 왼쪽으로 나아가며 리듀서 함수를 수행하고 하나의 결과값으로 반환한다. forEach: undefined를 반환한다. find: 조건을 만족하는 첫 번째 아이템 반환(조건에 만족하는 아이템이 없다면 undefined 반환) every, some: 전부(하나라도) 만족하면 true findIndex: 조건을 만족하는 첫번째 요소의 인덱스를 반환(없으면 -1 반환) ind..
-
ko.javascript.info - 자바스크립트 기본JS(javascript) 2024. 2. 19. 23:02
형 변환: Boolean의 인자에 숫자 0, 빈 문자열, undefined, null, NaN를 전달 시 false 반환, 그외엔 true 반환 단항 마이너스 연산자: -1은 1을 음수로 변환해준다(마이너스 연산자는 피연산자의 갯수에 따라 다르게 동작) 할당 연산자: 다른 연산자와 마찬가지로 평가된 후 그 값을 반환한다(다른 코드를 이해할 때 도움이 되는 수준으로 알고 있기, 코드 작성 시엔 가독성 좋지 않은 방식) 쉼표 연산자: 여러 평가식을 쉼표로 구분하여 나열하면 마지막 평가식이 반환된다. 할당 연산자와 마찬가지로 코드 해석용으로만 알고 있자. 동등 연산자: ==는 피연산자에 대해 숫자형으로의 형변환을 진행한 후 값을 비교한다.(null, undefined는 예외적으로 동작) 삼항 연산자: 코드를 ..
-
콜백 함수란?JS(javascript) 2020. 12. 18. 11:44
*혼자 내용 정리를 위해 작성하는 글이라 정확하지 않은 정보가 포함되어 있을 수 있습니다. function getData() { $.get('https://domain.com/products/1', function(response) { console.log(response); }); console.log("hello!"); } getData(); 위의 코드를 실행했을 때 "hello"가 먼저 출력되고 ajax 통신으로부터 얻은 response가 이후에 출력될 것이다. 코드 순서로만 보면 "hello"가 나중에 출력돼야하지만 먼저 출력되는 이유는 javascript가 코드를 비동기 식으로 처리하기 때문이며 ajax 통신에는 delay가 존재하기 때문이다. 그런데 이미 "hello"가 출력되는 시점에서 "$..
-
addEventListener, event, parentNode, classListJS(javascript) 2020. 11. 25. 23:13
*혼자 내용 정리를 위해 작성하는 글이라 정확하지 않은 정보가 포함되어 있을 수 있습니다. addEventListener: event를 binding한다. binding이란 event에 대한 반응을 어떻게 할 지 정의하는 과정이다. *event는 마우스 클릭, 키보드 입력, 창 조절 같은 사용자가 행하는 특정 행위라고 할 수 있다. 자세한 event 목록은 MDN의 event reference를 보면 확인할 수 있다. // 예시 코드 const title = document.querySelector("h1"); title.addEventListener("click", handleClick); // click: event // handleClick: listener parameter로는 event와 lis..
-
값으로써의 functionJS(javascript) 2020. 11. 25. 15:09
*혼자 내용 정리를 위해 작성하는 글이라 정확하지 않은 정보가 포함되어 있을 수 있습니다. // 예시1 function print() { console.log("hello world"); } // 예시2 const print = function() { console.log("hello world"); } // 예시3 (function() { console.log("hello world"); })(); 함수 부분을 다루다 특이하게 생긴 함수들을 발견했다. 예시2, 3이다. 예시1과 2는 같은 함수를 표현만 다르게 한 것이고 예시3은 일회성 함수, 익명함수라고 한다. 특징은 선언과 동시에 호출하는 것. javascript는 다른 언어와 다르게 함수를 값처럼 다룰 수 있다고 한다. const print = f..