JavaScript

JS 유사배열과 배열의 차이점

유사 배열과 배열은 어떻게 다를까? 유사 배열 형태 아래 변수들을 출력해보면 모두 배열과 형태가 같습니다. 하지만 진짜 배열은 array 뿐입니다. 브라우저에서 데이터를 넘겨줄 때 배열처럼 보이는 객체를 넘겨줍니다. 이것을 유사 배열이라고 합니다. let array = [1, 2, 3]; // [1, 2, 3] let nodes = document.querySelectorAll('div'); // NodeList [div, div, div, div, div, ...] let els = document.body.children; // HTMLCollection [noscript, link, div, script, ...] Array.isArray() 메서드로 array 인지 확인할 수 있습니다. Array..

JS 구조분해 할당

구조 분해 할당 Destructuring Assignment 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우에 객체나 배열을 변수로 '분해’할 수 있게 해주는 특별한 문법인 구조 분해 할당을 사용할 수 있습니다. 객체 구조분해 할당 // 일반적인 객체 속성 접근 const user = {name: "징징", age: 10}; console.log(user.name); // 징징 console.log(user.age); // 10 // 구조분해 할당 사용 ✅ const { name, age } = user; console.log(name); // 징징 console.log(age); // 10 구조 분해를 사용하면 데이터에 접근하기 편합니다. 그러나 키 값으로 불러온 것이기에 name 이 아..

JS 실행 컨텍스트와 콜 스택

https://medium.com/sjk5766/call-stack%EA%B3%BC-execution-context-%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90-3c877072db79 Call Stack과 Execution Context 를 알아보자 이 글에서 Call Stack과 Execution Context에 대해 다룹니다. 각 용어는 한국어로 해석하지 않고 영어 그대로 표기합니다. medium.com 위 링크를 참고하여 제가 이해한 부분만 제 식대로 정리했습니다. 위 링크를 보시면 더 자세하게 그림과 함께 정보를 얻을 수 있습니다. 실행 컨텍스트 Execution context 실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 말합니다. 크게 2가지로 나뉩..

JS 호이스팅과 TDZ

호이스팅 hoisting 자바스크립트 엔진은 코드를 실행하기 전 코드 전체를 스캔하면서 형상화 및 구분하는 과정을 거치는데 이 과정에서 변수, 함수, 클래스 등 모든 선언을 위로 끌어 올립니다. 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var 의 경우 호이스팅 시 undefined 로 변수를 초기화 하지만, let 과 const 변수는 초기화 되지 않습니다. 때문에 아래와 같은 코드(1) 가 가능합니다. 그러나 선언부만 끌어올려 놓은 것이기에, (2) 코드처럼 할당된 값을 가져 오는 것은 불가능 합니다. add(1, 3); // (1) 함수 선언보다 위에 있지만 오류 나지 않고 실행됩니다. console.log(a); // (2) 에러. 할당되지 않은 것을 출력..

JS 스코프와 스코프 체인

스코프 Scope 스코프는 식별자(변수, 함수, 클래스 이름) 접근 규칙에 따른 유효 범위입니다. 즉, 간단하게 변수를 참조할 수 있는 유효한 범위라고 생각하면 됩니다. 스코프는 블럭 { } 혹은 함수에 의해 나눠집니다. (블럭이라 하면, if(){}, for(){} ... 등도 포함합니다.) 아래 예시를 보면, 블럭 안에서는 블럭 밖에 있는 k 도 블럭 안에 있는 x 도 잘 출력됩니다. 그러나 블럭 밖에서 블럭 안에 있는 x 를 출력하려고 하면 에러가 발생합니다. 함수 밖에서 정의된 k 를 전역 변수, 전역 스코프 ( 전체에서 접근 유효) 함수 내에서 정의된 x 를 지역 변수, 지역 스코프 라고 합니다. (지역 내에서만 접근 유효) 밖(전역) 에서는 안(지역)의 변수를 참조할 수 없지만, 안(지역)에서..

JS Equality operators == === != !==

자바스크립트에서 값이 같은지 아닌지를 비교할 때 사용하는 동일 연산자를 알아보겠습니다. == : 값이 같음 === : 값과 타입 둘 다 같음 != : 값이 다름 !== : 값과 타입 둘 중에 하나만 달라도 다름 기본 자료형 예시입니다. console.log(1 == '1'); // true console.log(1 === '1'); // false console.log(1 != '1'); // 📍 false console.log(1 != 1); // 📍📍 false console.log(1 !== '1'); // true 값은 같지만 타입이 다름 console.log(1 !== 2); // true 값은 다르지만 타입이 같음 console.log(1 !== 1); // 📍📍📍 false 처음에는 != ..

JS undefined 과 null 비교

undefined 과 null 은 둘 다 텅텅 빈 상태를 말하는데, 미묘한 차이가 있습니다. let item; // 값이 아직 할당 되지 않은 상태 console.log(item); // 결과 : undegined item = null; // 빈 값이 라는 것을 할당 해준 상태 console.log(item); // 결과 : null 또한 타입에서도 차이가 납니다. console.log(typeof null); // object console.log(typeof nudefined); // undefined null 은 엄밀히 말하자면, 비어있는 객체입니다. 그러나 undefined 는 비어있는지 아닌지 모르는 상태를 나타 냅니다. 공부를 하다 보면 출력 값에서 null 혹은 undefined 를 마주치는..

JS 느슨한 타입의 동적 언어

자바스크립트는 느슨한 타입의 동적 언어입니다. 하나씩 풀어서 봅시다. 자바스크립트에는 타입이 있지만, 변수에 타입을 필수적으로 지정하지 않아도 됩니다. 때문에 ‘느슨한 타입 (loosely typed) 언어’ 라고 할 수 있습니다. 또한, 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있기 때문에 ‘동적 타입(dynamically typed) 언어' 라고도 부를 수 있습니다. 바로 이 특징이 자바스크립트의 약점이 됩니다. 자바스크립트는 컴파일 된 후 실행되는 것이 아니라 실행되는 순간 한 줄씩 읽으며 (인터프리터) 실행이 됩니다. 즉, 컴파일되는 과정이 따로 없기 때문에 타입 오류를 실행 전에 체크할 수가 없습니다. 이런 약점을 보완하기 위해서 개발자는 어떻게 해야 할까요? 1. 예상되는 타입 에러를 예..

JS 함수 선언문과 함수 표현식 차이

함수 선언문과 함수 표현식이 무엇인지 알아봅시다. 함수를 만든다는 목적은 동일 하나 만드는 방법이 다릅니다. // 함수 선언문 function add(a, b) { return a+b; } // 함수 표현식 const sum = function(a,b) { return a+b; } 함수 자체를 선언하면 함수 선언문, 선언한 함수를 변수에 담아서 사용하면 함수 표현식이라 합니다. 이 둘은 호이스팅 방식에서 차이가 납니다. add(1, 3); // 함수 선언보다 위에 있지만 오류가 나지 않습니다. function add(a, b) { // 함수 선언문 return a+b; } console.log(sum(1,2)); // 에러. // ReferenceError Cannot access 'sum' before..

JS 얕은 복사와 깊은 복사

객체(Object)를 복사하는 방법은 얕은 복사(Shallow Copy) 와 깊은 복사(Deep Copy) 로 나뉩니다. 사용하는 메서드는 여럿 있지만, 컨셉은 2가지 입니다. 값의 주소 값을 복사해 줄 것인지, 값 자체를 복사해 줄 것인지요. 객체같은 참조형 데이터를 복사하게 되면, 값이 메모리 셀에 할당되는 것이 아니라 값이 들어 있는 주소값(참조값) 이 메모리 셀에 들어 갑니다. 때문에 복사를 하게 되면, 값 자체가 아니라 값이 들어가 있는 주소가 전달 됩니다. 이렇게 복사되는 것을 Shallow Copy 라고 합니다. Shallow Copy spread syntax, Array.prototype.concat(), Array.prototype.slice(),Array.from(), Object.as..

JS 불변 객체 만들기

특정 객체를 수정이 불가능하게 만들 때, 불변 객체를 만들어 사용합니다. 불변 객체를 만드는 방법은 3가지 입니다. 각 방법마다 수정 가능 범위가 다르게 제한되기 때문에 필요에 따라 선택하면 됩니다. 1. Object.freeze() 속성 재정의 X, 추가 X, 수정 X, 삭제 X 그러나! 중첩된 company 는 freeze 되지 않습니다. 때문에 company.name 은 수정 가능합니다. 속성 재정의가 안된다는 것은 Object.defineProperty() 로 속성들을 재정의 할 수 없다는 뜻입니다. 아래 링크 참고. const company = { name: 'SS'}; const people = { name: 'lee', age: 20, work: company } Object.freeze(p..

JS Truthy 와 Falsy

숫자나 문자열도 어떤 값이냐에 따라 true, false 의 값을 가집니다. 이것을 정확하게 알고 있어야 나중에 헷갈리지 않으니 이번 기회에 외워 봅시다! Falsy 거짓 0 -0 '' null undefined NaN Truthy 참 1 -1 'hello!' {} Infinity 참고 자료 🌈 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Boolean Boolean - JavaScript | MDN Boolean 객체는 불리언 값을 감싸고 있는 객체입니다. developer.mozilla.org

JS 형 변환 (문자를 숫자로, 숫자를 문자로), 변수의 타입 확인 typeof

형 변환에 앞서 변수의 타입을 알 수 있는 방법을 알아 보겠습니다. 간단합니다. 을 사용하면 변수의 타입을 알 수 있습니다. boolean 형, 숫자형을 문자형 으로 바꿔 봅니다. let value = true; alert(typeof value); // boolean value = String(value); // string 으로 형 변환 alert(value); // "true" alert(typeof value); // string String() 을 사용하지 않고 +"" 를 사용하기도 합니다. 혹은 toString() 을 사용합니다. let cnt = 1; console.log(typeof cnt); // number console.log(typeof (cnt+"")); // string cons..

JS 기본형 데이터와 참조형 데이터의 차이

자바스크립트의 타입은 크게 2가지로 나뉩니다. 기본형 데이터(Primitive) 와 참조형 데이터(Reference) 입니다. 기본형 데이터에는 string, number, bigint, boolean, undefined, symbol, null 이 있습니다. 참조형 데이터에는 object 가 있고, 거게에 포함이 되는 array, function, RegExp(정규표현식), map, set 등이 있습니다. 두 타입의 가장 큰 차이는 값을 저장하는 방식입니다. 기본형 데이터는 바로 값을 메모리에 할당하지만, 참조형 데이터는 값이 들어 있는 메모리의 주소를 할당합니다. 예를 들어보면, 먼저 a 에 1 을 넣습니다. let a = 1; let b = a; a의 값을 받은 b를 출력하면 1이 나옵니다. 이것을..