자바스크립트에서 함수를 안전하게 사용하기 위한 방법 중 하나는 함수의 매개변수의 기본값을 넣어주는 것이다. 매개변수에 기본값을 넣어주면 함수의 인자에 값이 넘어오지 않아도 함수를 실행하는데 오류가 발생하지 않는다. function exampleFuc(options){ options = options || {}; const margin = options.margin || 0; const padding = options.padding || 0; const center = options.center || false; return { margin, padding, center, }; } console.log(exampleFuc()); // {margin: 0, padding: 0, center: false} 위..
null 병합 연산자를 사용하면 짧은 문법으로 여러 피연산자 중에 그 값이 ‘확정되어 있는’ 변수를 찾을 수 있다. a ?? b a가 null도 아니고 undefined도 아니면 a 그 외의 경우는 b null 병합 연산자를 사용하지 않고 let x = a ?? b와 동일하게 동작하는 코드를 작성하면 아래와 같다. let x = (a !== null && a !== undefined) ? a: b 확실히 코드의 길이가 길어지는 것을 볼 수 있다. 이처럼 null 병합 연산자를 사용하면 코드를 조금 더 간단하게 작성할 수 있다. let firstName = null; let lastName = null; let nickName = "홍길동"; console.log(firstName ?? lastName ?..
user의 정보를 담고 있는 객체가 있다. user라는 객체의 name이라는 값이 확실하지 않을 때, 아래와 같이 조건문을 사용할 수 있다. 위 조건문은 조건 중 하나라도 참일 경우 'no name'이라는 값을 반환하고, 거짓인 경우 해당 객체의 name 값을 반환하게 된다. 그런데 undefined와 false, '', null, 0은 거짓같은 값(falsy)이기 때문에 항상 false로 평가되는 값이다. 때문에 조건문을 아래와 같이 작성할 수 있다. if(user.name){ console.log(user.name); }else{ console.log('no name'); } 여기서 OR연산자를 사용하면 코드를 더 간단하게 작성할 수 있다. console.log(user.name || 'no name..
🌴 동기식 처리 모델 동기식 처리 모델(Synchronous processing model)_은 직렬적으로 작업을 수행한다. 즉 순차적으로 실행되며 어떤 작업이 수행중이라면 다음 작업은 이전 작업이 끝날 때까지 대기한다. (동기적 방식) 작업 하나가 수행 중일 때, 다른 작업을 동시에 수행할 수 없는 방식을 블록킹(blocking) 방식이라고 한다. 🙉 만약 커피 주문이 동기적(요청에 대한 결과가 동시에 일어남)으로 작동된다면 어떻게 될까? 1. 철수가 아메리카노를 주문한다. 2. 접수를 받은 직원이 아메리카노를 내린다. 3. 직원이 철수에게 아메리카노를 전달한다. 4. 영희가 카페라떼를 주문한다. 5. 접수를 받은 직원이 카페라떼를 만든다. 6. 직원이 영희에게 카페라떼를 전달한다. → 직원이 접수 받..
🌴 Array.prototype.join() join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만든다. (배열의 요소가 없을 경우, 빈 문자열을 반환한다.) // arr.join([separator]) const arr = ['I', 'AM', 'INEVITABLE']; console.log(arr.join()); // I,AM,INEVITABLE console.log(arr.join('')); //IAMINEVIYABLE console.log(arr.join('-')); // I-A,-INEVITABLE
🌴 Array.prototype.reverse() reverse() 메서드는 배열의 순서를 반전하여, 첫 번째 요소는 마지막 요소가 되고 마지막 요소는 첫 번째 요소가 된다. (호출한 배열을 반전하고 원본 배열을 변형한다.) const arr = [1, 2, 3, 4, 5, 6]; console.log(`arr : ${arr}`) // arr : 1,2,3,4,5,6 arr.reverse(); console.log(`arr : ${arr}`) //
🌴 고차함수(Higher-order-function) 자바스크립트에는 특별한 대우를 받는 일급객체(first-class citizen)이 있다. 대표적인 일급 객체 중 하나가 함수이다. 일급 객체(함수)의 특별 취급 변수에 할당(assignment) 할 수 있다. 다른 함수의 전달인자(argument)로 전달될 수 있다. 다른 함수의 결과로서 리턴될 수 있다. ⇒ 클로저 함수를 리턴하는 함수를 ‘커링함수’라고 한다. 함수를 변수에 할당할 수 있기 때문에, 함수를 배열의 요소나 객체의 속성값으로 저장할 수 있다. 함수를 데이터(string, number, boolean, array, object)처럼 다룰 수 있다. 고차함수(Higher-order-function)는 함수를 전달인자(argument)로 받..
**DOM(Document Object Model)**은 HTML 요소를 Object처럼 조작할 수 있는 Model이다. DOM은 웹 페이지를 구성하는 자바스크립트 객체들의 집합인데, DOM을 사용하여 자바스크립트로 HTML을 조작할 수 있다. (DOM은 HTML의 아주 작은 부분까지 접근 할 수 있는 구조를 가지고 있고, 자바스크립트를 사용하여 웹 페이지를 동적으로 움직이게 만들 수 있다.) “DOM은 자바스크립트에서 웹 페이지의 콘텐츠로 접근하는 창이자 통로이다.” HTML에서 자바스크립를 적용하기 위해서는 웹 브라우저가 작성된 코드를 해석하는 과정에서 요소를 만나면, 웹 브라우저는 HTML 해석을 멈추고 요소를 먼저 실행한다.(요소는 등장과 함께 실행된다.) 요소를 추가하는 방법은 크게 두 가지가 ..
🐊 원시형과 자료형 자바스크립트에서 원시 자료형이 아닌 모든 것은 참조 자료형이다.(Array, Object, function) const number = 3; const arr = ['a', 'b', 'c', 'd']; 변수 number에는 3이라는 원시 자료형 '값'이 할당되고, arr에는 참조 자료형의 '주소'가 할당된다. 참조 자료형은 실제 데이터가 저장된 주소를 가리킨다. 즉, 참조(reference)가 된다. 원시 자료형은 immutable하지만 참조 자료형은 그렇지 않다. 그렇기 때문에 '주소'를 할당할 수 밖에 없다. 배열에 요소를 추가 및 삭제하고, 객체에 속성을 추가 및 삭제할 수 있다. 이것은 참조 자료형이 immutable하지 않다는 것을 보여준다. (언제든지 데이터가 늘어나고 줄어..
🐊 spread & rest 🟢 spread 문법(Spread Syntax, ...) Spread 문법은 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때 사용한다. (Spreed 문법의 대상은 이터러블이어야 한다. - 일반 객체는 이터러블이 아니기 때문에 Spread문법의 대상이 될 수 없다.) console.log(...['a', 'b', 'c']); // a, b, c console.log('I am inevitable'); // I am inevitable console.log(...{a:1, b:2}); // TypeError: Found non-callable @@iterator Spread문법(...)을 사용하면 배열을 인수로 함수에 전달하여 분해된 배열의 요소를 ..
