본문 바로가기

전체 글72

고차 함수_1 (feat. 일급 객체, 호이스팅) ✅고차 함수란? 고차 함수(higher order function)는 함수를 인자(argument)로 받거나 함수를 리턴하는 함수를 말한다. 이 때 다른 함수(caller)의 인자(argument)로 전달되는 함수를 콜백 함수(callback function)라고 한다. 우선 고차 함수에 대해 더 자세히 알아보기 전에 중요한 것이 있다. 어떻게 함수를 인자로 받거나 함수를 리턴할 수 있을까? 함수는 일급 객체(first-class citizen)다. 퍼스트 클래스 하면 보통 '특별한 대우를 받는다'라고 생각이 든다. 자바스크립트에도 특별한 대우를 받는 것들이 있는데, 이런 것들을 일급 객체라고 한다. 그 중 하나가 함수다! 함수가 자바스크립트에서 어떤 대우를 받느냐? 변수에 할당(assignment)할 .. 2021. 1. 8.
Closure ✅클로저(Closure)란? 클로저는 자바스크립트 고유의 개념이 아니므로 ECMAScript 명세에 클로저의 정의가 등장하지 않는다. 클로저에 대해 MDN은 아래와 같이 정의하고 있다. “A closure is the combination of a function and the lexical environment within which that function was declared.” 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다. 무슨 의미인지 잘 와 닿지 않는다. 위에서 중요한 키워드는 “함수가 선언됐을 때의 렉시컬 환경(Lexical environment)”이다. function outerFunc() { var x = 10; var inne.. 2021. 1. 8.
Scope ✅ Scope란? 변수에 접근할 수 있는 범위 무슨말인고 하니, 우리가 아는 변수는 어떠한 환경 내에서만 사용가능하다고 한다. 이때, 변수가 어디서부터 어디까지 유효한지를 판단하는 범위를 뜻하는 것이 scope이다. 자바스크립트는 기본적으로, 함수가 선언되는 동시(lexcical)에 자신만의 범위(scope)를 가진다고 한다. 선언이다 선언! 호출이 아니다. 전역 범위(Global scope)와 지역 범위(Local scope) 전역 범위 코드 어디에서든지 접근할 수 있다. 지역 범위 함수 코드 블록이 만든 스코프로 함수 자신과 하위 함수에서만 접근할 수 있다. 모든 변수는 Scope를 갖는다. 변수의 관점에서 Scope를 구분한다면 다음과 같다. 전역 변수(Global variable) 전역에서 선언된.. 2021. 1. 8.
원시 타입 VS 참조 타입 자바스크립트 자료형(데이터)은 크게 원시 타입(Primitive Type)과 참조 타입(Reference Type)으로 나눌 수 있다고 했다. 둘 다 변수를 선언하고 데이터를 변수에 할당할 수 있는데 무엇이 다른 것일까? 각각 특징을 알아보면 다음과 같다. 원시 타입 - 값을 그대로 저장 참조 타입 - 값을 주소로 저장하고, 출력시 주소와 일치하는 값을 출력 보다시피, 값의 저장형태가 다른데, 이는 변수에 할당하는 과정에서 차이가 발생한다. 어떠한 차이가 있는지 알아보자. 🖋 원시 타입(Primitive Type) 선언(declaration) let a; let b; 핟당(assignment) a = 1; b = 1; 재할당 b = 2; console.log(b) // 2 처음 a, b에 1이라는 원시 .. 2021. 1. 7.
자료형(Data Type) 변수는 '데이터를 저장하고 읽고 쓰고 할 수 있는 공간' 이라고 했다. 그렇다면 이 데이터에는 어떤 종류가 있을까? ✅ 자료형(Data type) 이란? 프로그램에서 다룰 수 있는 값(데이터)의 종류 자바스크립트에서는 여러 가지 형태의 타입을 미리 정의하여 제공하고 있으며, 이를 기본 타입이라고 한다. 자바스크립트의 기본 타입은 크게 원시 타입(Primitive Type)과 객체 / 참조 타입(Object / Reference Type)로 구분할 수 있다. 🖋 원시 타입(Primitive Type) 원시 타입의 값은 변경 불가능한 값(immutable value)이며 값을 그대로 저장한다. 종류 boolean null undefined number string symbol (ECMAScript 6 에 추.. 2021. 1. 7.
변수(Variable) ✅ 변수(Variable)란? 데이터를 저장하고 읽고 쓰고 할 수 있는 공간 데이터는 프로그래밍에서 기본이라고 한다. 즉, 어떠한 정보든지 전부 데이터다. 이러한 데이터를 처리하기 위해서 데이터를 저장하는 공간이 있어야 하는데, 이때 저장하는 공간을 변수라고 한다. 변수를 사용하는 법은 다음과 같다. 선언(Declaration)과 할당(Assignment) var 변수명; // 선언(Declaration) 변수명 = 데이터; // 할당(Assignment) let 변수명 = 데이터; // 선언과 할당을 동시에 가능! const 변수명 = 데이터; 선언(Declaration)이란? 저장소를 확보 자바스크립트 엔진(자바스크립트 코드를 해석하는 도구)에게 '이름은 변수명이라고 하고, 데이터 저장공간을 만들어놔.. 2021. 1. 7.
TIL_210106 📝오늘 한 일 / 배운 것 🖋 Hiring Assessment 오늘은 프리코스에서 이머시브과정으로 넘어가는 중요한 과정인 HA과제를 진행했다. 약 한달동안 배웠던 것들을 생각해보면 자바스크립트 변수부터 시작해서 조건문, 반복문, 재귀, DOM 등.. 정말 많이 배웠구나 싶었다. 지금까지 쌓은 것들을 바탕으로 알고리즘 문제를 풀면서 복습을 더 해야겠다는 생각이 들었다. 풀긴 다 풀었지만, 아직 빈약한 상태라고 생각한다. 이머시브 과정을 진행한다면 지금까지의 한달동안 배웠던 속도보다 더 빠른 속도로 많은 것들을 배울 것인데, 이 상태라면 따라가기도 벅찰 것 같다. 내일 목요일 부터 주말동안 계속 미뤄왔던 블로깅들을 마무리하는 시간을 가지며 복습을 해야겠다! 2021. 1. 6.
TIL_210105 📝오늘 한 일 / 배운 것 🖋 날씨 앱 만들기 오늘은 코드스테이츠 PRE COURSE의 마지막 날이자 마지막 과제인 날씨 앱 만들기를 진행했다. 지금까지 배웠던 HTML, CSS, Javascript를 바탕으로 만들었다. 처음 접한 개념은 오픈 API를 이용하는 것이었다. 전날에 배웠던 JSON 개념을 바탕으로 이해하니 막 어렵진 않았는데 함수를 사용하는 부분에서 쪼끔 헷갈렸던 것 같다. 결론은 데이터를 받을 때 String 타입인 JSON데이터를 객체화 시켜줘야 우리가 쓸 수 있다! 🖋 코플릿 복습 내일은 HA과정 즉, PRE COURSE에서 IMMERSIVE COURSE로 넘어가는 관문이다. 지금까지 배웠던 모든 내용들을 바탕으로 알고리즘 문제 혹은 다른 개념 문제들이 나올 것이라고 한다. 약 한달동.. 2021. 1. 6.
날씨 APP 구현해보기(feat. Open API) 기능 검색창에 원하는 도시를 '영어'로 입력하면 그 도시의 이름, 온도, 날씨 상태, 날씨를 나타내는 아이콘을 알려준다. (참고로 현재 시간이 밤이라 배경이 일정한데, 낮이 되면 배경이 밝게 된다!!) 오늘은 Open API를 이용해 본인의 지역을 검색하면 현재 날씨를 알려주는 앱을 구현해봤다. 부족한 점, 개선해야할 점도 많고 디자인도 맘에 들지 않지만... 일단 깔끔하게 만들고, 기능을 구현했다는 것에 의의를 둘 것이다! 만들었던 과정들을 정리하면서 '분명히 해봤던 건데 기억이 안나네...?' , '처음 보는거네' 했던 것들도 기록으로 남기려고 한다. ⭐중요했던 것 Open API 이용하기 이번 프로젝트에서 이용한 Open API는 OpenWeatherMap 이라는 곳에서 제공해주는 날씨 API이다... 2021. 1. 5.
매개변수(parameter) vs 인자(argument) 공부할 때 은근히 헷갈렸던 매개변수와 인자에 대해 정리해보려고 한다. 더 이상 헷갈리지 말자! 매개변수(parameter) vs 인자(argument) function 함수이름(매개변수1, 매개변수2...) { 실행문; } 함수이름(인자1, 인자2, ...) 매개변수(parameter) 함수 선언에서 활용하기 위하여 사용하는 변수 인자(argument) 함수를 호출할 때 사용하는 것 즉 '전달인자' 2021. 1. 4.
TIL_210104 📝오늘 한 일 / 배운 것 🖋 JSON 재귀 함수를 이용해 JSON.stringify 함수를 구현해봤다. 자바스크립트 언어 환경에서의 객체(Object)를 이 함수를 통해 String 구조의 값으로 반환시켜주는 함수이다. 이때 객체의 키-값 쌍에서 값에 함수, undefined 다 들어갈 수 있지만, 이 함수를 사용할 땐 이 값들이 무시당한다. 🖋 Tree UI 구현 재귀 함수와 DOM을 이용해 다음과 같은 Tree UI를 구현해봤다. 객체 속의 객체 속의 객체... 와 같이 복잡한 데이터들 사이에서 마지막 (제일 깊은 위치) 데이터의 속성만 다르게 주었다. 그리고 트리 구조를 만드는 함수와 다른 속성 일때 멈추게 하는 재귀 함수를 통해 만들 수 있었다. 🖋 CSS - checked 다음과 같은 방법으로.. 2021. 1. 4.
블로그 옮기기! 2021. 1. 4.

티스토리툴바