구조분해할당(Destructuring) 자바스크립트 개발을 하다 보면 객체를 함수끼리 주고 받는 상황이 아주 많다. 그로 인해 전달 받은 객체의 프로퍼티를 변수로 선언하려면 각 프로퍼티를 별도의 변수로 할당하기 위해 각 프로퍼티마다 독립된 할당문을 작성해야 했다. 하지만 구조분해할당이라고 불리는 문법이 추가되어 변수 선언이 훨씬 더 편리해졌고 코드가 간결해졌다. 변수 선언 먼저 변수의 프로퍼티를 쉽게 선언하는 예제이다. 객체의 구조분해할당은 변수로 선언하고자 하는 객체의 프로퍼티명을 { } 안에 나열하면 각 프로퍼티의 이름으로 변수가 생성되고 프로퍼티의 값이 자동으로 할당된다. 배열의 구조분해할당 또한 비슷한데 [ ] 안에 나열하는 변수의 이름에 맞는 인덱스의 요소가 변수의 값으로 할당된다. ES5fu..

ECMAScript(ES6나 ES2015의 ES는 ECMAScript의 줄임말)는 Ecma 인터내셔널에서 정의한 ECMA-262 기술 규격에 정의된 표준 스크립트 프로그래밍 언어다. ECMAScript는 1997년 1판 배포 이후로 매년 2, 3판이 배포되었고 그 뒤 10년 뒤에 5판(ECMAScript 5. 이하 ES5), 다시 6년 뒤인 2015년에 6판(ECMA2015)이 배포되었다(4판은 버려짐). 6판의 정식 명칭은 ECMAScript 6이 아닌 ECMAScript 2015(이하 ES6)이다. 이전에는 배포 주기가 길었지만 빠르게 변화하는 개발 환경을 반영하여 숫자 대신 연도를 붙여 배포되는 추세이다. ES6에서는 ES5 이하 명서에서 문제가 되었던 부분들이 해결되었고, 기존 코드를 더 간결하게..

&& 연산자의 조건문 표현자바스크립트의 AND 연산자(&&)는 양쪽 피연산자가 모두 true일 때 true를 반환하고 그렇지 않을 때에는 false를 반환한다. 이러한 특성을 이용하여 자바스크립트의 if문을 한 줄로 단축시킬 수 있다.if (num !== 0) { console.log('num is not zero');}num !== 0 && console.log('num is not zero'); // if를 없애고 && 연산자로 한 줄로 단축num === 0 || console.log('num is not zero'); // || OR 연산자로도 가능하다. 이 때는 첫 번째 식이 false일 때만 다음 식이 실행됨&& 연산자와 소괄호 표현그런데 console.log()와 같은 함수 호출이 아닌 연산..

이번에는 자바스크립트의 Scope에 대해 알아보려 한다. Scope는 변수 또는 함수를 선언할 때 해당 변수/함수의 유효 범위를 의미한다. Scope에는 총 3가지 종류가 있다. 1. Global (전역) Scope: 코드의 모든 범위에서 사용 가능.2. Function(함수) Scope: 함수 안에서만 사용 가능.3. Block(블록) Scope: if, for, switch 등 특정 블록 내부에서만 사용 가능. 이제 한 번 아래의 예시를 통해 Scope를 이해해 보자.const value = 'hello!';function myFunction() { console.log('this is myFunction. value: ', value); // 1. hello!}function otherFunc..

클로저에서든 어디서든 자바스크립트를 사용하다 보면 간혹 함수 자체를 반환하는 함수를 보게 되는 경우가 있다. function hello() { return function world() { return 'hello world!'; }}const a = hello(); // function world 아니 뭐 대략 원리는 알겠다. 사용법도 알겠다. 그런데 대체 이러한 기법이 어디에 쓰이는 걸까? 왜 값을 반환하면 되는 걸 굳이 함수 안에 함수를 리턴시키는 건지? 지금부터 return function { ... }에 대한 실용 기법을 알아보자. 일반적인 이벤트 콜백 함수 등록 방법 여기 버튼이 3개 있는 웹 문서가 있다. C1 C2 C3 이제 저 3개의 버튼마다 다음과 같이 이벤..

이번 글에서는 여러 상황에서 자바스크립트 조건문을 보다 더 잘 활용하는 방법에 대해 알아보려 한다. 특정 값이 여러 값 중 하나인지 확인할 때 만약 어떤 값이 여러 값들 중 하나인지 확인해야 하는 상황이 생겼다고 가정해 보자. 그렇다면 우선 아래와 같은 시도를 해 볼 수 있을 것이다. function isAnimal(text) { return ( text === '고양이' || text === '강아지' || text === '거북이' || text === '너구리' );}console.log(isAnimal('강아지')); // trueconsole.log(isAnimal('휴대폰')); // false 이러한 코드는 비교해야 할 값이 많아질수록 길어진다. 이를 간단하게 해결할 수 있는..