My Boundary As Much As I Experienced

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의 인자들을 할당할 수 있다! 이뿐만이 아니라..

포지션 속성으로 원하는 좌표 기준에 따라 요소를 정렬할 수 있다. top, right, bottom, left 값에 따라 offset을 적용할 수 있는데, 그 기준이 좌표 기준은 아래와 같다. 속성값 특징 static (기본값) 특별한 특징 없음 relative 원래 자기 자신의 위치를 좌표 삼아 움직임 absolute 다른 레이아웃과의 관계를 벗어나 고정적인 위치를 갖는다. 자신에게 가장 가까운 포지션 값이 있는 상위 요소를 기준으로 삼게 된다. fixed 뷰포트(Viewport)를 기준으로 고정값을 가진다. 스크롤이 발생해도 뷰포트에서 고정적인 위치값을 갖는다. sticky 요소를 일반적인 문서 흐름에 따라 배치하고, 가장 가까운 스크롤이 가능한 조상과 가장 가까운 블록 레벨 조상을 기준으로 top,..