배열과 객체의 비구조화배열과 객체에서 원소나 속성을 추출하여 변수에 할당하는 비구조화 할당 문법이 있는데, 이 기능을 사용하면 코드를 간결하게 작성할 수 있고, 필요한 값들을 효율적으로 추출할 수 있다. 배열의 비구조화배열의 비구조화는 배열에서 값을 추출하여 변수에 할당하는 것이다. 배열의 각 요소는 순서대로 할당한다.const numbers = [1, 2, 3, 4, 5];// 배열의 비구조화 할당const [first, second, , fourth] = numbers;console.log(first); // 1console.log(second); // 2console.log(fourth); // 4 객체의 비구조화객체의 비구조화 역시 객체에서 속성을 추출하여 변수에 할당하는 것이다. 변수 이름과 ..
FrontEnd/자바스크립트
여러 줄 문자열 (Multi-line String)탬플릿 리터럴을 사용하면 여러 줄의 문자열을 간편하게 작성할 수 있다. 이전에는 줄 바꿈 문자를 사용하여 여러 줄을 나눠야 했지만, 템플릿 리터럴을 이용하면 백틱 문자 '를 이용하여 손쉽게 작성할 수 있다.아래의 예제처럼 작성하게 되면 줄 바꿈과 들여쓰기는 그대로 유지된다.const multiLineString = ` This is a multi-line string.`;console.log(multiLineString); 문자열 보간 (String Interpolation)문자열 보간은 템플릿 리터럴을 사용하여 변수나 표현식을 문자열 안에 삽입하는 기능이다. 이전에는 문자열을 연결할 때 '+' 연산자를 사용했지만, 템플릿 리터럴을 사용하..
Object 선언객체는 자바스크립트에서 중요한 데이터 구조중 하나이다. 객체는 키-값 쌍의 집합으로, 각 키는 문자열이고 각 값은 어떤 타입이든 될 수 있다. 객체는 중괄호'{ }'를 사용하여 선언한다.// 빈 객체 선언const emptyObject = {};// 속성이 있는 객체 선언const person = { name: 'John', age: 30, isEmployed: true};console.log(person.name); // Johnconsole.log(person['age']); // 30 계산된 속성명계산된 속성명을 사용하면 객체의 속성 이름을 동적으로 생성할 수 있다. 계산된 속성명은 대괄호'[ ]'를 이용하여 정의한다.let propName = 'name';let p..
상수/변수 선언var (function scope) 대신에 const/let을 사용하기 (block scope)ES6문법에서 가장 큰 변화중 하나는 변수 선언 방식이라고 한다. 'var'는 함수 스코프를 가지지만, 'const와 'let'은 블록 스코프를 가진다. 이를 통해서 변수의 범위를 더 명확히 할 수 있다. var의 문제점var 키워드는 함수 스코프를 가지며, 이는 블록 내에서 선언된 변수가 블록 외부에서도 접근이 가능하다는 것을 의미한다.아래 예제처럼 'x'는 if 블록 내부에서 선언되었지만, 블록 외부에서도 접근이 가능하고, 이는 의도치 않은 버그를 유발할 수 있다.function varTest() { if (true) { var x = 1; } console.lo..
웹 프로젝트를 진행하면서 html에서 views.py로 데이터를 전송해줘야 할 필요가 있었는데 데이터를 딕셔너리 형태로 변환해 줘서 보내야 했다. 딕셔너리는 key값과 value값을 가지고 저장이 되어서 key값으로 접근하여 원하는 값을 빠르게 찾을수 있다는 장점이 있어다. 물론 파이썬에서는 딕셔너리를 완벽히 구현할 수 있으나 자바스크립트는 아직 부족한 부분이 많아 정리해 두려고한다 아래의 예제들만 알면 앞으로 딕셔너리 구현은 쉽게 할수 있을거 같다. 소스코드 // Dictionary 사용하는 방법 var dictObject = {} dictObject['apple'] = '사과'; dictObject['banana'] = '바나나'; dictObject['orange'] = '오렌지'; console...
