My Boundary As Much As I Experienced

자료형을 생성하는 2가지 방식 프로토타입을 만들기 전에 예시로 배열을 만드는 데는 2가지 방법을 사용해보자 const fruits = ["Apple", "Banana", "Cherry"]; //배열 리터럴 방식 const fru2 = new Array("Apple", "Banana", "Cherry"); //사실 리터럴로 입력해도 컴퓨터는 생성자 함수 방식으로 생성한다. 하나는 배열 리터럴 방식으로, []을 이용해서 직관적으로 자신이 넣고싶은 데이터들을 넣을 수 있다. 나머지 하나는 생성자 함수를 사용하는 방법이다. new 연산자와 맨 앞글자가 대문자인(파스칼 표기법) 생성자 함수를 사용하는 방식이다. Array뿐만 아니라, Object도 이와 같이 생성할 수 있다. 생성자 함수(틀)에서 내가 원하는 객..

this라는 이 오묘한 녀석... 문맥에 따라 달라지는 한국어같은 녀석이다. 왜 자바스크립트는 이렇게 맥락적인 문법을 만들었을까? 쓰임새가 딱 한 가지로 고정되어 있는 문법 여러 개가 있는게 더 낫지 않을까. 면접을 위해 한 마디로 요약하자면: This는 쓰이는 위치에 따라 다르게 정의되지만, 주로 쓰이는 방식은 함수 객체나 클래스의 패러미터로 받아 그 값을 지정할 때 많이 씁니다. 기본적으로 메소드 안에 쓰일 땐 호출한 대상에게 바인딩되고 일반 함수에서 쓰일 땐 그 함수의 한 단계 상위 스코프에 바인딩 됩니다. 화살표 함수로 쓰일 땐 자신이 선언된 함수의 유효 범위에 정의됩니다. This의 쓰임새 일반 함수에서 쓰일 때: 함수의 주인에게 바인딩 메소드에서 쓰일 때: 호출 위치에서 정의(this 포함된 ..

1. 화살표 함수란? 전통적인 함수 선언 방식의 간편한 대안입니다. - MDN // 기존 익명 함수를 만드는 방법 function (a, b) { return a + b; } // 기존 기명 함수를 만드는 방법 function sum(a,b) { return a + b } 전통적인 함수 선언 방식은 위처럼 생겼고, 간단한 기능 하나만 만들어도 3줄은 잡는다. // 화살표 함수로 익명 함수 만드는 법 (a, b) => a + b // 화살표 함수로 기명 함수 만드는 법 const arrowSum = (a,b) => a + b 화살표 함수를 만들면 짧은 코드로 함수를 쉽게 만들 수 있다. 한 줄 처리인 경우 중괄호나 return을 생략 가능하다. // 한 행으로 처리가 안 될 시 중괄호 스코프를 사용할 수 ..

호출 스케줄링이란? 일정 시간이 지난 후 원하는 함수를 예약 실행할 수 있게 해주는 것 1. setTimeout (일정시간 이후에 함수 실행하기) setTimeout(()=> { console.log("time!") }, 1000) 기본형: setTimeout(함수, 밀리세컨드) 1초 이후 함수 실행 const setTime = setTimeout(()=>{ console.log("time!") }, 1000) setTimeout은 변수에 담기만 해도 예정대로 실행된다. 왜 변수에 담기만 해도 실행되는지... (추가 조사 필요) 2. clearTimeout ( 셋타임아웃 예약 취소하기) clearTimeout(setTime) clearTimeout을 하려면 앞서 setTimeout을 변수 지정하여 활용해..

함수를 선언할 때 매개변수를 쓰는 방법도 여러가지가 있다. 1. 매개 변수에 기본값을 지정 function sum(a, b = 1) { //기본값을 매개변수 선언 시 지정해놓을 수 있음. return a + b; } console.log(1) // 2 // a은 1, b가 지정되지 않을 시 1이 되어서 2가 되었다. console.log(sum(3, 4)); // 7 // b에 해당하는 값을 넣어주면 설정값대로 계산된다. 2. 매개 변수에 객체 구조 분해 할당 지정 const user = { name: "bumang", age: 85, }; function getName({ name }) { // 받은 객체를 매개 변수에서 바로 구조분해 할 수 있다. return name; } function getEm..

호이스팅이란? 함수 선언부가 유효범위의 최상단으로 끌어올려지는 효과를 말한다. 자바스크립트 파일을 컴파일러가 컴파일할 때, 함수 선언과 변수 선언들을 스크립트 최상단에서 해석한다. 함수 선언 이전에 함수를 호출할 시: console.log(hello()) // hello function hello() { return "hello" } 만약 함수 '선언'을 아래에다 하고, 함수 호출을 위에서 할 시, 참조 에러가 뜨지 않는 이유는 함수 선언들을 미리 호이스팅하기 때문이었다. 함수 표현식을 쓰기 전에 호출할 시: console.log(hello()) // Reference Error const hello = () { // var, let, const 뭘로 하든 함수 표현식은 호이스팅이 안 된다. return..

And 연산자(&&) 조건문에 쓰일 시: 두 조건 모두 만족해야 true를 반환한다. 하나라도 불만족할 시 false를 반환한다. 변수 할당에 쓰일 시: 가장 마지막 참인 항의 값을 할당한다. 특이하게도 만약 거짓된 항이 있을 시 탐색을 그만하고 거짓된 항의 값을 할당한다(!) const num0 = 0 if (num0 0) { console.log("both are valid!") } // "both are valid!..

While문 while문 안의 조건이 참인 이상 계속 순회합니다. 탈출 조건이 명확하지 않으면 무한 루프를 돌 수 있는 위험성이 있습니다. let cnt = 10 while (cnt >= 0) { console.log(cnt); cnt--; } // while문에 cnt가 0이 될때까지 반복하고 // cnt가 -1이 되는 시점부터 순회를 끝냅니다. Do-While문 Do문을 먼저 한 번 실행 한 다음, while문을 통해 반복할지 말지를 결정합니다. let cnt = 10 do { console.log(cnt); cnt--; } while (cnt); // while문의 cnt를 1만큼 줄여서 falshy값인 0이 될 때까지 반복하게 됩니다.

선택적 체이닝은 있을수도 있고, 없을 수도 있는 데이터를 다룰 때 유용하다. 아래와 같은 user 2명이 있다고 해보자. const userA = { name: "bumang", age: 20, address: { country: "korea", city: "gimpo", }, }; const userB = { name: "neo", age: 20, }; userA는 address라는 속성과 값을 가지고 있지만, userB는 가지고 있지 않다. 이 상황에서 getAddress라는 함수를 만들어서 사용하고자 할 때, function getAddress(user) { return user.address.city; } console.log("!", getAddress(userB)); //reference er..

구조 분해 할당은 객체나 배열을 해체하여 각각의 인자들을 한꺼번에 다른 변수의 값으로 설정해주는 문법이다. 한 배열의 인자들을 각기 다른 변수에 할당하고 싶을 때 구조 분해 할당을 이용하지 않을 시, const arr = [1,2,3,4,5] const arg1 = arr[0] const arg2 = arr[1] const arg3 = arr[2] const arg4 = arr[3] const arg5 = arr[4] arr에 있는 값들을 하나하나 원하는 변수에 지정해줘야 한다... 그러나 구조 분해 할당을 이용한다면, arr = [1, 2, 3, 4, 5]; const [a, b, c, d, e] = arr; 매우 간편하게 a,b,c,d,e라는 변수에 arr의 인자들을 할당할 수 있다! 이뿐만이 아니라..