본문 바로가기

FE/Javascript22

null & undefined 어떤 언어든 프로그래밍을 배운다면 항상 이 두가지는 언급하는 듯하다. 0, null, false, undefined 등... 없는거나 무의식에선 거짓이나 같은게 아닌가 하고 넘어가게 만드는 값들이다. 이중 null과 undefined가 최정점에 있다. 두 값의 공통점과 차이점을 짧게 정리한다. 공통점 1. 자바스크립트를 이루는 원시 값 중 하나다. 2. 불리언 연산에서 거짓으로 취급한다. console.log(Boolean(undefined)) // false console.log(Boolean(null)) // false console.log(null==undefined) // true 차이점 1. null은 '없는' 값이고, undefined는 '존재하지 않는' 값이다. console.log(null.. 2022. 9. 15.
let, const, var 자바스크립트를 배우다보면 자주 듣는 말중 하나가 자바스크립트는 자유로운(유연한) 언어라는 거다. 조금 더 나아가면 지멋대로인 언어라는 표현도 있다. 아무래도 C언어 같이 다른 언어에 비해 자료형을 정확히 기재하지 않아도 사용할 수 있기 때문이다. 이 중심에 var이 있었다. var은 ES5까지 주로 쓰였던 변수 선언인데, 자바스크립트를 자유롭게 하는 선언이면서 반대로 얽매는 선언이었다. 이를 보완하고자 나온 게 let과 const다. var, let, const를 하나씩 살펴보자. var var는 자바스크립트가 태어나 ES5까지 메인으로 쓰였다. 모든 선언은 전부 var이였기 때문. 함수든 클래스든 어디든 자바스크립트는 var 하나로 모든 변수 선언이 가능했다. 그러나 독특한 특징 때문에 발목을 잡히기도.. 2022. 9. 14.
Destructuring Assignment Destructuring Assignment은 배열이나 객체의 속성을 해체해 그 값을 개별 변수에 담는 자바스크립트 표현식이다. 쉽게 말하면 배열이나 객체를 dot notation이나 bracket notation로 쓰지 않고, 그 구조를 풀어서 안에 있는 키 혹은 값을 그대로 쓸 수 있게 한다. 한국말로 구조 분해 할당이라 부른다. 사용 조건 용어 그대로 구조를 분해하는 것이기에 구조가 있는 배열과 객체에서 사용할 수 있다. 사용 방법 1. 객체 const {key1, key2, ...key} = 객체; 기본 표현은 위와 같다. 구조 분해하고 싶은 객체를 할당값으로 주고 앞에 해당 객체에서 가져올 키 값을 중괄호 안에 적는 것. 위와 같이 적을 경우 key1을 출력하는 것만으로도 해당 객체 안에 있는 .. 2022. 9. 13.
hoisting 호이스팅은 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. 보통 변수를 선언하고, 할당한다. 또는 선언과 동시에 할당하거나 재할당하기도 한다. 이때 어떤 자료형을 쓰느냐에 따라 호이스팅이 일어나기도, 없기도 한다. var 선언, let 선언, const 선언, 그리고 함수 선언식, 함수 표현식를 통해 호이스팅을 알아보고자 한다. 자바스크립트 ES6에서는 var보다 let과 const 사용을 권장한다. let과 const는 ECMAScript® 2015(ES6)에서 처음 나온 것으로 이전엔 var만 존재했고, var가 자바스크립트의 일반적인 사용방식이었다. ES6에서 var를 두고 let과 const 선언을 따로 만든 이유 중 하나가 바로 호이스팅이다. 호이스팅이 무엇인지.. 2022. 9. 11.
loop method - filter, map, every, some 반복문은 프로그래밍 언어의 기초 중 기초다. 기계어나 초기 초급언어 빼고는, 반복문이 없는 고급 언어는 없지 않을까 싶다. for와 while로 모든 반복문을 끝낼 수 있지만, 가독성이 떨어진다. 속도면에서는 for와 if가 가장 빠르지만, 유지보수성에서는 메서드를 사용하는 게 훨씬 좋을 수 있다. 반복문 메서드는 필수다. filter() filter는 주어진 (콜백)함수의 조건을 통과하는 모든 요소, 즉 true인 모든 요소를 모아 새로운 배열로 반환한다. const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']; const result = words.filter(word => word.length > 6); con.. 2022. 9. 8.

티스토리툴바