프로그래밍/JAVASCRIPT 사전
[JS] 객체에 조건부 프로퍼티 적용하기
[JS] 객체에 조건부 프로퍼티 적용하기
2022.06.05객체에 조건부 프로퍼티 적용하기 작업 중에 query 객체에 특정 프로퍼티를 조건부로 적용해야하는 경우가 있었다. 예를 들어 page라는 param을 주는 상황에서 특정 값이 있을 때 param을 주고 싶다. const query = {}; if (page) { query.page = page; } 위 코드처럼 if문으로 query 객체에 prop을 추가해줄 수 있다. 하지만 조금 더 간단하게 짤 방법을 알아봄 const query = { ...(page && { page }) }; // 여러 params가 있는 경우 const query = { ...(page && { page }), ...(category && { category }), ...(type && { type ) }; spread 연산자..
[JS] 호이스팅(Hoisting)을 이해해보자!
[JS] 호이스팅(Hoisting)을 이해해보자!
2022.01.13[JS] 호이스팅(Hoisting)을 이해해보자! 1. 호이스팅이란? 호이스팅은 어원 그대로 변수나 함수의 선언이 코드 최상단으로 끌어올려지는 듯한 현상을 말한다. var name = 'global name'; function callName() { console.log(name); // ? var name = 'local name'; }; callName(); 위 예제 코드에서 출력되는 변수 name의 값은 'global name' 일 것 같지만, undefined 이다. 특정 스코프 안에서 선언된 변수(name)는 코드에 적힌 순서와 상관없이 "최상단에서 선언한 것처럼" 끌어올려진다. 이것을 호이스팅이라고 한다. var name = 'global name'; function callName() { v..
[JS] 모듈 import/export 문법 빠르게 정리하기
[JS] 모듈 import/export 문법 빠르게 정리하기
2021.09.18[JS] 모듈 import/export 문법 빠르게 정리하기 자바스크립트의 import, export 사용법 빠르게 정리해보겠습니다. export 문은 JavaScript 모듈에서 변수, 함수, 클래스를 내보낼 때 사용 다른 파일에서 내보낸 값을 import 문으로 가져올 수 있음 export 사용법 변수, 함수, 클래스 선언할 때, 앞에 export 를 붙이면 내보내기 가능 📌 주의 대부분의 자바스크립트 style guide에서 클래스, 함수 선언부 앞에 export를 붙여 내보내기 시에, 선언 끝에 세미콜론 붙이지 말라고 권유 import 사용법 항목별로 불러오고 싶다면 import { ... } 불러올 항목이 많다면 import * as 📌 주의 import할 모듈이 모두 사용할 경우가 아니라면, ..
[JS] scope 와 실행 컨텍스트
[JS] scope 와 실행 컨텍스트
2021.06.11scope와 실행 컨텍스트 의아한 예제 라이프 사이클(Life Cycle) 이해하기 왜 필요할까? 위 예제 코드를 살펴보면, 변수 a와 b는 메모리 주소(0x1234 / 0x1235)에 a, b라는 이름을 붙인 것이고, 실제 데이터는 해당 메모리 주소에 저장된다. (마치 네이버의 url인 www.naver.com 이 ip주소 125.209.222.141을 가리키는 것처럼..) 코드에서 자원들(값, 변수, 함수 등)이 선언되면, 컴퓨터의 자원(보통 컴퓨터의 메모리)에 저장되게 됩니다. 하지만, 컴퓨터 시스템의 모든 자원은 유한한 것이고 한정적이기 때문에, 프로그래밍 언어에서 자원은 라이프 사이클 이라는 것을 갖습니다. 라이프 사이클이란? 코드에서 자원들이 생성되고 사용되며(열리고) 소멸되는 메커니즘을 의미..
[JS] this란? 모든 케이스를 정리해보자
[JS] this란? 모든 케이스를 정리해보자
2021.06.08[JS] this란? 모든 케이스를 정리해보자 ⚡️ this란? '그'는 나에게로 와서 꽃이 되었다. 위 문장에서 '그' 는 누굴까? 상황에 따라 바뀔 것이다. 옆집 아저씨가 될 수도 있고, 할아버지가 될 수도 있고, 편의점 알바생이 될 수도 있다. 그를 파악하기 위해서는 전, 후 문장에서 단서가 필요하다. 그 단서를 통해 문맥 상황에서 '그'가 누군지 추론할 수 있다. - 자바스크립트 세계관에서도 '그' 와 같은 개념이 this 라는 예약어이다. - this는 자바스크립트 엔진에 의해 암묵적으로 생성되기 때문에, 상황에 따라 가리키는 대상이 바뀔 수 있다. 즉, this는 문맥에 따라 그 의미(값)가 변경된다. 👨🏻💻 예시 코드 const name = 'something box'; function g..
[JS] 화살표 함수, 쉽고 빠르게 정리하기
[JS] 화살표 함수, 쉽고 빠르게 정리하기
2021.05.11화살표 함수(Arrow function)란? 함수 표현식보다 단순하고 간단한 문법으로 함수를 만드는 방법이다. const arrowFunc = (arg1, arg2, ...argN) => expression; function originFunc(arg1, arg2, ...argN) { return expression; } arrowFunc 는 arg1~argN 을 인자로 받는 화살표 함수 이다. 화살표 함수는 화살표(=>) 우측의 표현식(expression) 을 평가하고 평가 결과를 반환(return)한다. arrowFunc는 originFunc 의 축약 버전이라고 할 수 있다. 구체적 예시 let sum = (a, b) => a + b; /* 위 화살표 함수의 원본 */ let sum = functio..
[YOU DON'T KNOW JS 정리] THIS (1)
[YOU DON'T KNOW JS 정리] THIS (1)
2021.05.08[YOU DON'T KNOW JS 정리] THIS (1) 해당 포스팅은 카일 심슨의 you don't know js - this와 객체 프로토타입, 비동기와 성능 편 중 This 내용을 정리한 포스팅 입니다. 자바스크립트에서 가장 헷갈리는 개념 중 하나가 this 키워드이다. this는 모든 함수 scope 내에 자동으로 설정되는 특수한 식별자이다. 경험이 많은 js개발자도 this가 무엇을 가리키는지 정확히 파악하는건 힘든일이니. 모른다고 부끄러워 하지말고 정확하게 공부해보자. 1.1 this 가 필요한 이유 일단 this가 "무엇을 가르키는지" 보다 "왜" 필요한 지부터 살펴보자. ⇒ this 의 유용함과 필요성을 먼저 파악해보자. identify() { return this.name.toUpperC..
[JS] arguments 객체 그리고 유사배열 객체
[JS] arguments 객체 그리고 유사배열 객체
2021.05.05[JS] arguments 객체 그리고 유사배열 객체 arguments 객체란? 자바스크립트에서 함수를 호출 할 때, 함수에서 인자를 받기로 정해둔 형태로 인자를 넘기지 않아도 에러를 발생시키지 않는다. function sum(x, y) { console.log(x, y); return x + y; } sum(); // undefined undefined sum(1); // 1 undefined sum(1, 2); // 1 2 sum(1, 2, 3); // 1 2 sum(1, 2, 3, 4); // 1 2 1. 필요 인자 보다 적은 수의 인자가 전달되었을 때 : sum(), sum(1) ⇒ 값이 주어지지 않은 인자에는 undefined 가 할당된다. 2. 필요 인자 보다 많은 인자가 전달되었을 때 : s..
[JS] 문법정리 > 확실한 프로토타입 체이닝 정리
[JS] 문법정리 > 확실한 프로토타입 체이닝 정리
2020.12.29[JS] 문법정리 > 확실한 프로토타입 체이닝 정리 '자바스크립트'는 기존 C++ 이나 자바 같은 객체지향 프로그래밍 언어와는 다른 프로토타입 기반의 객체지향 프로그래밍을 지원한다. 즉, 프로토타입(prototype) 에 대해 잘 이해하고 있어야, 자바스크립트의 동작 과정을 제대로 이해할 수 있다. 이번 포스팅의 결론이자 규칙을 먼저 기억하자. 📌규칙 JS에서 "모든 객체" 는 자신을 생성한 생성자 함수의 prototype 프로퍼티가 가리키는 객체를 자신의 프로토타입 객체(부모 객체)로 취급한다. 예제 function Factory(name) { this.name = name; } // box 객체 생성 var box = new Factory('box'); console.dir(Factory); cons..
[JS] 문법 정리 > 함수: 선언, 호이스팅, 일급 객체
[JS] 문법 정리 > 함수: 선언, 호이스팅, 일급 객체
2020.12.20[JS] 문법 정리 > 함수: 선언, 호이스팅, 일급 객체 Javascript 는 다중 프로그래밍 패러다임이다. 패러다임의 종류 1) 절차적 프로그래밍 - 조건문 - 분기분 - 반복문 - 프로시져 2) 함수형 프로그래밍 - 함수는 1급 객체 - 고차 함수 - 익명 함수 3) 객체지향 프로그래밍 - 객체 생성 - 객체 상속 - 다형성 Javascript 에서는 모든 것을 함수가 책임진다. 함수 선언 방법 함수를 선언하는 방법에는 함수 선언식, 함수 표현식, Function 생성자 함수 총 3가지 방법이 있다. 1. 함수 선언식 (function statement) function name(arg) { // ... return "반환값"; } - JS에서는 함수도 일반 객체처럼 값으로 취급되기 때문에, 함수..
[JS] 문법정리 > 타입과 변수
[JS] 문법정리 > 타입과 변수
2020.12.09[JS] 문법정리 > 타입과 변수 자바스크립트의 특징 - 싱글스레드 이벤트 기반 - 다중 패러다임 - 다이나믹 타입 - 크로스 플랫폼 - Prototype 기반 표준 규격 - 자바스크립트 출시 1995 - ES1 - 1997 - ES3 - 1999 - ES5 - 2009 - ES6 - 2015 - ES Next - 2020~ - http://kangax.github.io/compat-table/es5/ 타입과 변수 타입의 종류 Primitive Type(원시형) - Number : 123 / NaN / Infinity - Boolean : true / false - String : "sangziii" - Undefined : undefined - Null : null - Symbol : Symbol() ..