profile
개발자로서 한걸음

자바스크립트 스코프(scope)

🔷현재 실행되는 컨텍스트를 말한다. 여기서 컨텍스트는 값과 표현식이 표현되거나 참조 될 수 있음을 의미한다. 만약 변수 또는 다른 표현식이 "해당 스코프"내에 있지 않다면 사용할 수 없다. 스코프는 또한 계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프에 접근할 수 있지만 반대는 불가하다. 👉 함수의 매개변수는 함수 몸체 내부에서만 참조할 수 있고 함수 몸체 외부에서는 참조할 수 없다. 이것은 매개변수를 참조할 수 있는 유호범위, 즉 매개변수의 스코프가 함수 몸체 내부로 한정되기 때문이다. 예제 > 🔷 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 이를 스코프라 한다. 즉 스코프는 식별자가 유효한 범위를 말한다. 예제 > 🔷 코드의 가장 바깥 영역과 foo함수 내부에 같은 이름을 같는 X변수를 선언했고 ⑴과⑵

2022년 12월 12일
·
0개의 댓글
·
post-thumbnail

JS 이터러블 Iterator

iterable iterable protocol 은 JavaScript 객체들이, 예를 들어 for..of 구조에서 어떠한 value 들이 loop 되는 것과 같은 iteration 동작을 정의하거나 사용자 정의하는 것을 허용합니다. 다른 type 들(Object 와 같은)이 그렇지 않은 반면에, 어떤 built-in type 들은 Array 또는 Map (en-US) 과 같은 default iteration 동작으로 built-in iterables 입니다. iterable 하기 위해서 object는 @@iterator 메소드를 구현해야 합니다. 이것은 object (또는 prototype chain 의 오브젝트 중 하나) 가 Symbol.iterator key 의 속성을 가져야 한다는 것을 의미합니다 ![](https://velog.velcdn.com/images/kminu0819/post/09a09988-9778-434b-a4d1-64c18ca47e7

2022년 12월 5일
·
0개의 댓글
·
post-thumbnail

JS promise

promise Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다. 설명 Promise는 프로미스가 생성된 시점에는 알려지지 않았을 수도 있는 값을 위한 대리자로, 비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있습니다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스)을 반환합니다. > **대기(pending): 이행하지도, 거부하지도 않은 초기 상태. 이행(fulfilled): 연산이 성공적으로 완료됨. 거부(rejected): 연산이 실패함. ** ![](https://velog.velcdn.com/images/kminu0819/post/71b44487-b4cd-45b7-896e-5e5bb23c02f9/im

2022년 12월 5일
·
0개의 댓글
·

자바스크립트 this

1. 상황에 따라 달라지는 this 1- 1 this는 실행 컨텍스트가 생성될 때 결정(this binding) === this는 함수를 호출할 때 결정 전역 공간에서의 this > ### 1. 전역 공간에서 this는 전역 객체를 가리킴 2. window(브라우저 환경), global(node 환경) 1-2 메서드로서 호출할 때 그 메서드 내부에서의 this 함수 vs 메서드 **1. 기준 : 독립성 함수 : 그 자체로 독립적인 기능을 수행 메서드 : 자신을 호출한 대상 객체에 관한 동작을 수행** 함수와 메서드가 호출될 때, this는 각각 다르게 할당 > 함수로서의 호출과 메서드로서의 호출 구분 기준 : . [] > 메서드 내부에서의 this > 함수로서 호출할 때 그 함수 내부에서의 this 함수 내부에서의 this **1. 어떤 함수를 함수로서 호출할 경우, t

2022년 12월 1일
·
0개의 댓글
·
post-thumbnail

자바스크립트 실행 컨텍스트

1. 실행 컨텍스트란? a. 스택 vs 큐 b. 콜 스택(Call stack) > #### 1. 실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 > #### 2. 모아서 콜 스텍에! 3. 가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하는 방법으로 코드의 환경 및 순서를 보장 컨텍스트의 구성 방법 > #### 1. 전역공간 2. eval() 함수 3. 함수 4. 실행 컨텍스트 구성 예시 5. 코드실행 → 전역(in) → 전역(중단) + outer(in) → outer(중단) + inner(in)→ inner(out) + outer(재개) → outer(out) + 전역(재개) → 전역(out) → 코드종료

2022년 11월 30일
·
0개의 댓글
·

자바스립트 데이터 타입

데이터타입의 종류 1. 기본형(Primitive type) > Number, String, Boolean, Null, Undefined, Symbol 2. 참조형(Reference type) > object => Array, Funtion, Date, RegExp, Map, WeakMap, Set, WeakSet 기본형과 참조형의 구분 기준(불변성) > #### 1. 기본형: 값이 담긴 주소값을 바로 복제 > #### 2. 참조형: 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제 3. 변수 선언과 데이터 할당 > #### a. 할당 예시 /* 풀어 쓴 변수 할당 방식 / var testValue; testValue = 'test value!'; /* 붙여 쓴 변수 할당 방식 / var testValue2 = 'second test value!'; 주소 ... 1002 1003

2022년 11월 29일
·
0개의 댓글
·

setTimeout 이미지 자동 변경하기

메인 페이지의 이미지를 하나의 사진으로 고정시키고 다른 사진으로 교체되는 기능을 구현하고 싶었다. 검색과 고민 끝에 자바스크립트의 setTimeout을 이용하면 됐다. setTimeout > #### 전역 setTimeout() 메서드는 만료된 후 함수나 지정한 코드 조각을 실행하는 타이머를 설정합니다. > > #### function 타이머가 만료된 뒤 실행할 function입니다. 비동기 함수로 작업하기 > 나의 코드 >

2022년 11월 28일
·
0개의 댓글
·

Hash #

- Hashed url path vs. Non-hashed url path https://example.com/abc/#def > #### 해시(#)이전까지의 url을 브라우저에서는 호스팅서버에서 데이터 또는 문서를 GET 받아오는 것으로 인식 > > #### 그래서 왜 Hashed Url Path가 SPA에 적용되야 하는지? url에 해시(#)가 붙는 이유 (Hash Routing 사용 이유) > #### - Hashed url path vs. Non-hashed url path > https://example.com/abc/#def > > 해시(#)이전까지의 url을 브라우저에서는 호스팅서버에서 데이터 또는 문서를 GET 받아오는 것으로 인식 > 그래서 왜 Hashed Url Path가 SPA에 적용되야 하는지? > - url에 해시(#)가 붙는 이유 (Hash

2022년 11월 22일
·
0개의 댓글
·

javascript Map/Set에 대하여

set set 객체는 중복되지 않는 유일한 값들의 집합이다. set 객체는 배열과 유사하지만 차이점들이 있다. > #### 1. 동일한 값을 중복하여 포함할 수 있다. 배열O, set객체 X > #### 2. 요서 순서에 의미가 있다. 배열O. set객체 X > #### 3. 인덱스로 요소에 접근할 수 있다. 배열O, set객체 X > > Map Map 객체는 키와 값의 쌍으로 이루어진 컬렉션이다. Map 객체는 객체와 유사하지만 차이점이 있다. > #### 1. 키로 사용할 수 있는 값 > #### 객체: 문자열 또는 심벌 값, Map 객체: 객체를 포함한 모든 값 > #### 2. 이터러블. 객체X, Map객체 O > #### 3. 요소 개수 확인 > #### 객체: object.key(obj).length, Map 객체: map.size > > > > > 배열과 객체랑 비슷한데 왜 쓰는가??😮😮 그 이유는

2022년 11월 16일
·
0개의 댓글
·

Array 배열 (javascript)

배열의 여러가지 속성을 알아보자 > // 배열 안에서 찾고자 하는 것 > // 요소가 있는지 확인 // 배열 맨앞에 요소 추가 // 맨 뒤에 추가 // 맨 앞 제거 // 맨 뒤 제거 //중간에 추가, 삭제 지금까지는 배열 자체를 수정 한 것이었다. 다음부분은 새로운 배열로 반환해주는 것이다. > // 특정부분 잘라서 새로운 배열 반환 // 배열을 이어줌 // 순서를 거꾸로 반환 // 중첩된 배열을 하나의 배열로 펴준다 // 특정한 값으로 배열을 채우기

2022년 11월 14일
·
0개의 댓글
·

function 함수

함수 function > #### 일급함수: 모든 연산 가능 > #### 고차함수: 인자로 함수를 받거나(콜백), 함수를 반환한다. Hoisting function 선언문으로 선언한 함수는 함수 이름이 hoisting 되어 파일 안에서 언제든지 접근 가능. 그러나 표현식으로 선언된 함수는 호이스팅이 되지 않는다. ❗❗ 함수 밖에서 선언된 객체를 함수 내에서 임의로 바꾸는 것은 안좋다. >

2022년 11월 11일
·
0개의 댓글
·

연산자 js

JAVASCRIPT 문법 연산자 > #### ==, ===, !=, !=== > #### 1. == 은 값이 같은지 확인하는 방법이다. > > #### 2. === 은 값과 타입이 같은지 확인하는 방법이다. > > #### !은 부정을 나타내는 것으로 !true 는 false가 되고, !false는 true가 된다. 조건식 > js let age = 26; if(age < 30){ console.log('어리시군요'); }else{ console.log('나이가 있으시군요'); } //어리시군요

2022년 11월 10일
·
0개의 댓글
·

js 변수 설정

변수 var, let, const var 과 let, const는 es6문법 전후로 나뉘어지는 변수 키워드이다. 3개의 키워드는 선언과 할당에 있어서 차이를 나타낸다. > > > const는 상수 개념으로써 재할당이 불가능하지만, const 변수의 상속 값에 있어서는 수정이 가능하다.

2022년 11월 9일
·
0개의 댓글
·

내배캠 7일차

새로운 팀 편성이 되었다. 처음 됐던 팀과는 다르게 지금 조원 분들은 되게 유쾌하셔서 팀 분위기가 매우 좋았다. 프로젝트 할 때만 대화를 나누는 것보다 평소에도 친목을 쌓아서 같이 공부하는 것이 더 효율적이고 바람직하다고 생각한다. 오늘은 파이썬 기초 문법을 배웠다. 자바스크립트랑 언어는 다르지만 비교적 쉽게 따라갈 수 있는 쉬운 언어이기에 강의를 들으면서 이해하기에는 무리가 없었다. > #### 변수선언 > js 4 > 2 # True 크다 5 = 5 # True 크거나 같다 4 #### 문자열 > first_name = "Harry" last_name = "Potter" > > firstname + lastname # HarryPotter

2022년 11월 8일
·
0개의 댓글
·

내배캠 6일차

자바스크립트 기초 문법에 대해 배웠다. 그 중 Class함수를 배운 것이 기억에 남는다. class 이름을 선언하여 this를 이용해 내부 값에 다가갈 수 있다. > js const p = new Rectangle(); // ReferenceError class Rectangle {} Class 표현식은 이름을 가질 수도 있고, 갖지 않을 수도 있다. > // unnamed let Rectangle = class { constructor(height, width) { this.height = height; this.width = width; } }; > // named let Rectangle = class Rectangle2 { constructor(height, width) { this.height = height; this.width = width; } };

2022년 11월 7일
·
0개의 댓글
·