남민우의 공부 블로그

클로저 Closure클로저란 함수와 그 함수가 선언된 렉시컬 환경(outer - scope chaning) 과의 조합을 말한다.그럼 이 렉시컬 환경이란 무엇일까?렉시컬 환경const x = 1;function outerFunc() { const x = 10; function innerFunc() { console.log(x); // 10 } innerFunc();}outerFunc();먼저 각자의 스코프를 살펴보자 const x = 1; 은 전역 스코프const x = 10; 은 outerFunc() 의 스코프이다. 그럼 console.log(x) 의 x는 이 값을 어디서 참조할까?먼저 처음에는 이 값을 내부, innerFunc() 에서 참조하는데 이 함수에는 x에 대한 정의가 없다.해서 그..

내일배움캠프 학습/JavaScript 2024. 11. 19. 15:47

DOM : Document Object Modeling이 DOM 을 알기 전에 먼저 자바스크립트가 왜 생겼는지에 대해서 먼저 이해해야 한다.간단히 말해서 '브라우저를 동작하기 위해' 태어난 언어인데, 이 브라우저는 다른 프로그램보다 가볍고 빠른 만큼, 그에 맞게 가벼운 프로그래밍 언어를 만들려고 하였다.해서 자바스크립트의 목적이란, 정적이었던 웹페이지(브라우저)를 동적으로 만들기 위해서 이다. 클라이언트가 서버로부터 이 웹페이지를 이루는 HTML 문서를 수집하면 자바스크립트가 해석한 내용을 토대로 DOM Tree 를 구축한다.그래서 DOM 이 무엇인가? 첫번째 메뉴 두번째 메뉴 세번째 메뉴 메인 영역의 제목입니다. ..

내일배움캠프 학습/JavaScript 2024. 11. 18. 20:37

콜백 함수란?지난 번에 설명한 적 있듯이, 다른 코드(함수)의 인자로 들어가는 함수를 '콜백 함수' 라고 부른다.setTimeout(function() {console.log("hello");})const numbers = [1,2,3,4,5];numbers.forEach(function(number) { console.log(number);});이 코드들에서의 매개변수 자리에 위치한 function 들처럼 이러한 방식으로 사용하곤 한다.setTimeOut 과 forEach 함수들은 이 콜백 함수를 필요에 따라 호출하는, '제어권'을 넘겨받아서 동작한다.콜백 함수의 원리는 이 '제어권'을 setTimeOut, forEach 와 같은 주체에 넘겨줄테니, 각자의 로직으로 처리해라 라고 위임하는 것과 같다.여..

내일배움캠프 학습/JavaScript 2024. 11. 12. 21:28

1. 나이 든 사용자가장 아래의 코드가 실행 되었을 때, “Passed ~” 가 출력되도록 getAge 함수를 채워주세요var user = { name: "john", age: 20,}var getAged = function (user, passedTime) { // 여기를 작성해 주세요!}var agedUser = getAged(user, 6);var agedUserMustBeDifferentFromUser = function (user1, user2) { if (!user2) { console.log("Failed! user2 doesn't exist!"); } else if (user1 !== user2) { console.log("Passed! If y..

내일배움캠프 학습/JavaScript 2024. 11. 8. 20:53

이번 항목에서는 'This' 의 정의, 활용 방법, 바인딩 Call/Apply/Bind 에 대해서 학습한다.먼저 이 This 란 무엇일까.This코드에서의 This 는 어떠한 객체를 가리킬 때 사용한다.C/C++ 에서 This 는 자기 자신, 클래스 등 스스로를 가리킬 때 사용되었지만 JS 에서는 그 활용이 조금 다르다.이 This 는 항상 런타임에 결정된다. 런타임이랑 코드가 돌아가는 환경으로, JS에는 1. 노드, 2. 브라우저 의 두가지 환경이 있다. 먼저 브라우저에서의 this 를 찾아보면다음과 같이 Window 를 가리키는 것을 알 수 있다.저 console.log(this) 는 특정한 함수 내부나 함수 표현식으로 구현된 코드가 아니니 전역 컨텍스트 항목이라고 볼 수 있고 그 말은 전역환경에서의..

내일배움캠프 학습/JavaScript 2024. 11. 8. 20:40

실행 컨텍스트실행할 코드들, 우리가 작성한 코드들의 환경정보들을 모아놓은 '객체' 를 말한다.이를 '콜 스택' 에 저장하여 코드의 실행 순서를 보장하는 과정을 거친다.콜 스택Call Stack 이라고 부른다. 스택(Stack)과 큐(Queue) 를 먼저 이야기하면다음과 같이 Stack 은 Last in, First Out 의 LIFO, Queue 는 First In, First Out 의 FIFO 구조를 갖고 있다.실행 컨텍스트는 이 스택의 형태로 가장 마지막에 호출된 코드가 제일 먼저 동작하는 방식이다.하위 개념으로 Scope, 변수, 객체, Hoisting 등이 있는데 먼저 구성에 대해서 살펴본다.구성먼저 함수에 집중해서 살펴보자.// ---- 1번var a = 1;function outer() { ..

내일배움캠프 학습/JavaScript 2024. 11. 7. 20:51

데이터 타입은 크게 기본형, 참조형 두 가지로 나눌 수 있다참조형값의 크기가 크다 를 전제로 한다.따라서 기본적으로 Object 의 형을 가지며 Array, Function 등이 이에 해당한다. 이 참조형과 기본형을 구분하는 기준으로 1. 값의 복제 방식, 2. 불변성 여부를 들 수 있다.1. 복제 방식- 기본형 : 값이 담긴 주소값을 바로 복제- 참조형 : 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제참조형에 대한 이해가 조금 어려운데, 이후에 데이터 영역에 관해 설명하면서 다시 봐보도록 하자. 2. 불변성의 여부 : 이 또한 메모리, 데이터 영역의 관점에서 봐야 한다.- 기본형 : 불변성 O- 참조형 : 불변성 X, 가변적 불변성에 대해서 더 알기 전에 배경 지식을 먼저 파악하자데이터의..

내일배움캠프 학습/JavaScript 2024. 11. 6. 21:42

문제문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 ["sun", "bed", "car"]이고 n이 1이면 각 단어의 인덱스 1의 문자 "u", "e", "a"로 strings를 정렬합니다.제한 조건strings는 길이 1 이상, 50이하인 배열입니다.strings의 원소는 소문자 알파벳으로 이루어져 있습니다.strings의 원소는 길이 1 이상, 100이하인 문자열입니다.모든 strings의 원소의 길이는 n보다 큽니다.인덱스 1의 문자가 같은 문자열이 여럿 일 경우, 사전순으로 앞선 문자열이 앞쪽에 위치합니다. function Solution(strings, n){ let answer ..

내일배움캠프 학습/JavaScript 2024. 11. 5. 19:46