JavaScript

[JavaScript] 변수의 유효범위와 클로저

코드 블록 코드 블록 {...} 안에서 선언한 변수는 코드 블록 안에서만 사용할 수 있다. if (true) { let message = "안녕하세요!"; alert(message); // 안녕하세요! } alert(message); // ReferenceError: message is not defined if와 같은 조건문만이 아니라 반복문에도 해당한다. for (let i = 0; i < 10; i++) { alert(i); // 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 } alert(i); // ReferenceError: i is not defined 중첩 함수 함수 내부에서 선언한 함수를 중첩 함수라고 부르며 중첩 함수는 새로운 객체의 프로퍼티 형태나 중첩 함수 그 자체로 반환될 수..

[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 - 20220707

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

TIL - 20220706

오늘은 모던 JavaScript 튜토리얼에서 맵과 셋(https://ko.javascript.info/map-set)에 대하여 공부했다. 코딩 테스트를 준비하면서 중복을 제거하는 법 중 하나인 셋을 이 당시에 처음 알게 되어 오늘 이 셋과 맵에 대하여 자세하게 공부할 수 있었다. 맵과 셋을 읽으며 작성한 질문은 다음과 같다. 맵과 객체의 공통점은 키가 있는 데이터를 저장한다는 점이고, 차이점은 객체는 키로 문자형만 이용할 수 있지만, 맵은 키로 모든 자료형이 가능하다. 심지어 객체까지도! 셋은 중복 없는 값이 저장되며 키가 존재하지 않는다. 지금까지 주로 사용한 객체는 객체와 배열이 전부였다. 맵을 잘 모를 때, entries와 fromEntries 메소드를 강의에서 사용하는 걸 보아도 이게 맵이어서 사..

TIL - 20220701

'내가 할 수 있는 것'으로 검색 기능을 구현해봤다. 우선, 다음과 같이 검색할 데이터를 만들어줬다. 내가 만들고 싶은 검색 기능은 명언을 말한 사람의 이름이나 명언의 내용을 검색하면 검색한 내용에 일치하는 명언에 대한 정보가 나오는 것이다. 기능을 구현하기 위해서는 사용자가 입력한 내용이 saying이라는 이름의 배열 속 객체의 name 혹은 saying 값에 일치해야 한다. JavaScript만으로도 충분히 구현할 수 있지만, 이 글에서는 필자가 React를 사용하고 있기 때문에 React의 useState를 이용하여 구현했다. input창에서 입력하면 입력한 값이 setSearch를 통해 search에 값이 저장되고, search값을 앞서 saying 배열 속 name과 saying 속성이 갖고 있..

[JavaScript] 객체(1) - 기본

JavaScript에는 여덟 가지 자료형이 존재하면서 이 중 일곱 가지 자료형은 문자열, 숫자와 같이 오직 한 종류의 데이터를 저장하는 원시형과 이번 게시글에서 다룰 객체다. 한 종류의 데이터만 담을 수 있는 원시형과 달리 객체는 여러 종류의 데이터를 담을 수 있고, 이 데이터들을 키로 구분한다. 객체는 JavaScript에서 거의 모든 면에 녹아있기 때문에 JavaScript를 잘 다루려면, 객체를 잘 이해하고 있어야 한다. 객체를 만드는 방법은 객체 생성자 문법을 이용하여 만드는 방법과 객체 리터럴을 이용하여 만드는 방법이 존재한다. const obj = new Object(); // 객체 생성자 문법 const obj = {} // 객체 리터럴 문법 한 객체를 살펴보며 객체에 대해 좀 더 자세히 살..