Hello_coding

* 미리 말하고 가자면 옵셔널 체이닝은 스펙에 추가 된 지 얼마 안된 문법으로 구식 브라우저에서는 폴리필이 필요합니다. * 사건의 개요 - 프로젝트 진행중 user정보의 length값으로 처리해주어야 할 코드가 있었다. 이때 user정보가 잘 들어왔을경우는 괜찮은데 . . . user정보가 없을때 length를 접근하려 하면 에러가 떳다. 그래서 나는 일단 아래와 같이 코드를 짯다. const userLength ; if (user) { userLength = user.length; } else { userLength = null; } //len값을 사용 . . . 그런데 여기서 구글링을 통해 옵셔널 체이닝이라는것을 발견했다! 옵셔널 체이닝 ? - ?. 를 사용하여 프로퍼티가 없는 중첩 객체를 에러 없이..

DOM이란? - HTML 문서의 계층적 구조와 정보를 표현하며, 이를 제어할 수 있는 API (프로퍼티,메소드)를 제공하는 트리자료구조이다. - 이때 각각의 요소와 속성, 콘텐츠를 표현하는 단위를 "노드 (node)" 라고 한다. 여기서 나오는 트리자료구조에 대해 잠깐 알아보자. Tree Data Structure? - 트리자료구조는 노트들의 계층구조로 이뤄진다. - 부모,자식노드로 구성되어 노드간 계층적 구조를 표현하는 비선형 자료구조이다. - 최상위 노드는 root노드라고하고, 자식노드가 없는 노드를 leaf노드라고 한다. 노드타입? 노드타입은 총 12개지만 중요한 노트 타입 4가지를 살펴보자. 1. 문서노드 - DOM 트리의 최상위에 존재하는 루트노드 -> 노드들의 진입점역할 - document 객..

들어가기에 앞서, MDN에서 클로저의 정의를 보자 . " 클로저 함수는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. " 클로저를 알기 전 '렉시컬 스코프' 에 대해 알아보자. 🚀 렉시컬 스코프 (정적 스코프) - 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다. - 함수가 호출된 위치는 상위 스코프 결정에 어떤 영향도 주지 않는다. - 함수의 상위 스코프는 언제나 자신이 정의된 스코프다. ( 함수가 호출될 때마다 함수의 상위 스코프를 참조할 필요가 있기 때문) 🚀 클로저 - 폐쇄된 공간 안에 데이터에 접근하기 위한 테크닉 - 내부함수의 외부 함수 접근(권한) 테크닉 - 변수 은닉과 메모리 효율, 코드효율을 극대화 하기위해 사용 const..

🚀구조 분해 할당이란 ? - 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JS 표현식이다. - 디스트럭처링 할당이라고도 부른다. - 구조 분해 할당 구문이 없던 ES5에선 다음과 같이 할당 하였다. var categories = ['IT', 'life', 'TIL']; // 할당을 해주고자 하는 배열 var category1 = categories[0]; var category2 = categories[1]; var category3 = categories[2]; console.log(category1, category2, category3); // IT life TIL 위 코드와 같이 배열의 인덱스를 활용하여 요소에 접근하는 방법을 사용했다. 하지만 n개를 할당해줄시 n줄의..

🚀 in ? in 연산자는 객체 내 특정 프로퍼티가 존재하는지 여부를 확인한다. const person ={ name:'delina', age:24 }; console.log('name' in person); //true console.log('address' in person); //false name 프로퍼티는 person객체에 있으므로 true, address 프로퍼티는 person객체에 없으므로 false 🚀 for in ? 객체의 모든 프로퍼티를 순회하며 열거하기 위해 사용한다. const person ={ name:'delina', age:24 }; for (const key in person){ console.log(key +':'+person[key]); } - 이때 기본적으로 key값이 ..

🚀 splice() - 배열 내에 새로운 요소의 추가 가능하다. - 배열 내 특정 요소를 제거 할 수 있다. - 원본 배열이 변경된다. [사용법] 배열.splice(요소를 위치시키고자 하는 인덱스, 제거할 요소의 개수, 배열에 추가할 요소) 만약 배열 내 새로운 요소를 추가만 하고싶다면 2번째 인덱스에 0을 사용하면 된다. const cafe = ['coffee', 'cake', 'tea', 'cookie'] cafe.splice(1, 0, 'bread') cafe //1번째 인덱스에 bread를 추가한 cafe 배열 //expected output: ['coffee', 'bread', 'cake', 'tea', 'cookie'] 특정요소를 삭제하고 싶다면, 다음과 같이 사용하면 된다. 배열.splice..

🚀 String - 문자열타입 - 0개이상 16비트 유니코드 문자의 집합 표현가능 - 작은따옴표 , 큰따옴표 , 백틱으로 감싸서 표현 string = 'hi' ; //작은따옴표 string = "hi" ; //큰따옴표 string = `hi` ; //백틱 Q . 만약 따옴표로 감싸지 않는다면 ? - 식별자로 인식한다. 🚀 표현식 삽입 - 표현식을 삽입하려면 ${ } 으로 표현식을 감싼다. var food = "apple"; var drink = "juice"; console.log(`food = ${food} drink = ${drink}`); [결과] 🚀 불리언 타입 - 불리언 타입값은 참, 거짓을 나타내는 true,false가 있다. - 조건문에서 자주 사용한다. 🚀 undefined 타입 - var..

🚀 원시자료형? - 변경 불가능한 값 , 즉 한번 생성된 원시값은 읽기 전용값으로서 변경할 수 없다. (주의 ! : 원시값 자체를 변경할 수 없다는 것이지 변수 값을 변경 할 수 없다는 뜻이 아님) - 불변성을 갖는 원시 값을 할당한 변수는 재할당 이외에 변수 값을 변경할 수 있는 방법이 없다. - 값의 의한 전달 [ 원시자료형 종류 (7가지) ] typeof 'hello world' // String typeof 100 // Number typeof NaN // Number typeof true // Boolean typeof undefined // undefined typeof null // Object string, number (en-US), bigint (en-US), boolean, undef..

자바스크립트 탄생 -1995년, 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하기로 결정, 그래서 탄생한것이 브렌던 아이크가 개발한 자바스크립트다. 자바스크립트의 표준화 -1996년 8월 ms는 js의 파생버전인 jscript를 인터넷 익스플로러 3.0에 탑재했다.그러나 js와 jscript가 표준화 되지 못하고 적당히 호환되었다.이로인해 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하였다. (크로스 브라우징 : 웹 페이지 제작 시에 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게(호환성) 나오게 하는 작업을 말한다.) -> 이에 모든브라우저에서 정상적으로 동작하는 표준화된 자바스크립트 요청 1997년 7월 , ECMA-262 라 불리는 표준화된 JS 초판 사양 ..