전체 글

TIL - 20220713

오늘은 모던 JavaScript 튜토리얼에서 변수의 유효 범위와 클로저(https://ko.javascript.info/closure)에 대해서 공부했다. 공부하면서 내용이 많기도 하고 또 중요하다는 생각도 들어서 자세하게 정리한 글을 따로 작성할 예정이다(작성 후 수정 예정). 먼저, 작성한 질문은 다음과 같다. 자바스크립트는 함수 지향 언어이다. 왜냐하면, 함수를 동적으로 생성할 수 있고, 생성한 함수를 다른 함수의 인수로 넘길 수 있으며, 생성된 곳이 아닌 곳에서 함수를 호출할 수 있기 때문이다. 질문에 대한 대답을 작성하면서도 함수를 동적으로 생성한다는 말이 무슨 의미인지, 생성한 함수를 다른 함수의 인수로 넘기는 예를 공부해야겠다는 생각이 들었다. 내가 작성하면서도 이게 무슨 의미일까 바로 고민..

TIL - 20220712

오늘은 모던 JavaScript 튜토리얼에서 나머지 매개변수와 스프레드 문법(https://ko.javascript.info/rest-parameters-spread)에 대해서 공부했다. 다음과 같은 질문을 작성했다. 함수에 넘겨주는 인수의 개수 제약은 존재하지 않는다. 하지만, 함수가 인수를 두 개 받는다고 가정하여 인수를 다섯 개 넘겨주어도 앞에 있는 두 개를 사용하고 나머지 세 개는 사용하지 않는다. 나머지 매개변수 ...를 붙이는 건 남아있는 함수의 매개변수들을 배열로 한데 모아 집어넣어라는 의미이다. 이 나머지 매개변수 ...를 통해 사용하고 싶은 매개변수는 앞에서 사용하고 남아있는 매개변수들을 배열로 모을 수 있다. 또한, 가장 중요한 건 나머지 매개변수 ...는 항상 마지막에 위치해야 한다...

TIL - 20220711

오늘은 모던 JavaScript 튜토리얼에서 재귀와 스택(https://ko.javascript.info/recursion)에 대해서 공부했다. 재귀는 하나의 큰 목표 작업을 동일하면서 간단한 작업 여러 개로 나눌 수 있을 때 사용하면 좋다. 가장 처음 하는 호출을 포함한 중첩 호출의 최대 개수를 재귀 깊이라고 부르며, 깊이는 일단 10,000까지 가능하지만 대다수의 엔진이 100,000을 넘길 수 없다. 실행 중인 함수의 실행 절차에 대한 정보는 실행 컨텍스트에 저장된다. 함수 내부에 중첩 호출이 존재하면 다음과 같은 절차로 수행된다. 실행 중인 함수가 중지된다. 중지된 함수와 연관있는 실행 컨텍스트가 실행 컨텍스트 스택에 저장된다. 중첩 호출이 실행된다. 중첩 호출이 끝난 이후에 실행 컨텍스트 스택에..

[JavaScript] 객체(2) - 메서드와 this

메서드 JavaScript에서 객체는 사용자, 주문처럼 현실에 존재하는 개체를 표현할 때 사용하며 사용자를 예시로 더 자세히 보면, 사용자의 이름, 나이를 속성으로 담을 수도 있지만 현실에서는 로그인하기, 로그아웃하기와 같은 행동들이 존재한다. 객체도 행동을 함수 프로퍼티를 할당함을 통해 구현할 수 있으며 이를 메서드라고 부른다. 다음과 같이 객체에 행동을 부여할 수 있다. let user = { name: "Jaeyoon", age: 24 }; user.sayHi = function() { alert("안녕하세요!"); } user.sayHi(); // 안녕하세요! 함수 표현식을 통해 함수를 만들어 user 객체에 sayHi라는 이름으로 함수 프로퍼티를 만들어주었다. 이런 식으로 객체에 할당된 함수를 ..

TIL - 20220710

오늘은 모던 JavaScript 튜토리얼에서 JSON과 메서드(https://ko.javascript.info/json)에 대해서 공부했다. 대학교 동기와 개발을 본격적으로 시작하면서 프로젝트를 진행하며 JSON을 처음 접했을 때는 뭔지도 모르고 강의 내용 그대로 복사해 사용한 적이 있었다. 오늘 그 JSON에 대해 제대로 공부해 볼 수 있어서 좋았다. 작성한 질문은 다음과 같다. JSON 사용하는 경우는 네트워크를 통해 객체를 전달하거나 로깅 목적으로 객체를 출력하는 경우, 데이터 교환을 목적으로 사용하는 경우가 있다. 객체를 JSON으로 바꿔주는 메서드: JSON.stringify JSON을 객체로 바꿔주는 메서드: JSON.parse JSON으로 인코딩 된 객체는 일반 객체와 달리 이러한 특징을 갖..

TIL - 20220709

오늘은 모던 JavaScript 튜토리얼에서 구조 분해 할당(https://ko.javascript.info/destructuring-assignment)에 대하여 공부했다. 구조 분해 할당은 실제 많이 사용하는 개념이기 때문에 친숙하게 집중하며 공부할 수 있었던 것 같다. 작성한 질문은 다음과 같다. 구조 분해 할당을 사용하는 경우는 객체나 배열에서 데이터를 가져오면서 전체 데이터가 아닌 데이터 일부만 필요할 때, 객체나 배열을 변수로 분해할 수 있게 해주는 구조 분해 할당 문법을 사용한다. 함수도 매개 변수가 많을 때, 구조 분해 할당을 사용하면 좋다. 배열에서 나머지 값들을 한데 모아서 저장하고 싶을 때, '...'를 사용하면 나머지 값들이 한 배열 안에 모두 저장된다. 단, '...'는 마지막에 ..

TIL - 20220708

오늘은 모던 JavaScript 튜토리얼에서 Object.keys, values, entries(https://ko.javascript.info/keys-values-entries)에 대해 공부했다. 제목만 봤을 때는 keys, values, entries에 대한 공부는 이미 하지 않았나?라는 생각을 했는데 내가 지금까지 공부한 내용은 map, set, array에서 keys, values, entries에 대한 내용이었고 이 장에서는 객체에서 key, values, entries를 사용하는 법에 대한 내용이었던 것이다. 차이점은 천천히 살펴보고 내가 작성한 질문은 다음과 같다. 차이점은 다음과 같다. map, set, array 객체 호출 문법 map.keys() Object.keys(obj) (여기서..

TIL - 20220707

오늘은 모던 JavaScript 튜토리얼에서 위크맵과 위크셋(https://ko.javascript.info/weakmap-weakset)에 대하여 공부했다. 작성한 질문은 다음과 같다. 맵과 위크맵의 차이는 다음과 같다. 맵은 키로 모든 자료형이 가능하지만, 위크맵은 키로 오직 객체만 가능하다. 위크맵은 반복 작업과 keys(), values(), entries() 메소드를 사용할 수 없다. 따라서, 키나 값을 전체로 받을 수 없다. 왜냐하면, 가비지 컬렉션의 동작 방식 때문이다. 맵에서 키가 객체인 데이터 혹은 셋에서 값의 자료형이 객체인 경우, 참조값을 지워도 지워지지 않은 채로 계속 참조할 수 있기 때문에 이러한 문제를 해결하고자 나온 것이 위크맵과 위크셋이고 가비지 컬렉션의 동작 시점은 자바스크..