[새싹x코딩온] 풀스택 개발자 부트캠프 과정 3주차-2 회고 | JavaScript

Javscript Vanilla

바닐라 스크립트는 자바스크립트 그 자체를 뜻합니다 그런데 왜 자바스크립트라고 하지 않고 바닐라 스크립트로 칭하는지 알아보았습니다 자바스크립트의 사용도가 높아지면서 다양한 프레임워크, 라이브러리가 탄생하게 되었는데 이 때문에 순수 자바스크립트로만 이루어진 코드를 바닐라 스크립트라고 칭하게 되었습니다 실제로 바닐라 Js 라고 불려 바닐라 Js가 별도의 프레임워크나 라이브러리 라고 생각할 수 도 있지만 아닙니다

 

바닐라 스크립트의 장점

바닐라 스크립트는 자바스크립트의 그 자체로 높은 호환성과 안정성을 보장합니다 특히 다른 프로젝트에 이식할때도 호환성이 굉장히 좋은 편이지만 반대로 너무 방대해진 코드로 유지보수성이 떨어지는 단점이 존재합니다

Array

배열은 모든 개발언어에서 사용되고있는 다양한 자료구조들 중 하나로 데이터순회, 리스트나열 등이 용이한 자료구조입니다 배열의 원소는 index값(숫자)으로만 이루어져있으며 문자열이 들어갈 수 없습니다 하지만 배열을 값에는 다양한 자료형타입이 들어갈 수 있어 단순하고 많은 데이터 처리에 효율적입니다

arr1 = [1,2,3,4,5,6]
arr2 = ['a','b','c']

object

오브젝트는 고차원 데이터를 핸들링하기에 좋은 객체타입의 자료향입니다 키와 값으로 이루어져 복잡한 데이터를 다루기에 적합한 타입입니다 세부적인 변수가 필요할때 용이합니다 배열, 함수도 넣을 수 있습니다

let obj = {
name:'홍길동',
age: 30,
}

 

배열, 객체 핸들링 문법 구조분해 할당

구조분해 할당은 배열이나 객체의 속성을 해체해 그 값을 개별 변수에 담는것을 구조분해 할당이라고 합니다

자료구조로 많이 사용되는 배열과 객체를 편하게 사용할 수있습니다 보통 배열이나 객체에 저장된 데이터의 일부를 가져오고 싶을때 사용합니다 구조분해 할당을 사용하면 arr[0], arr[1]  아닌 배열요소를 변수이름으로 접근할 수 있습니다

 

배열을 구조분해할당

const arr1 = [1,2,3]

let [a,b,c] = arr1

어러한 코드를 설명하자면 a,b,c변수를 선언하고 선언과 동시에 arr1변수의 원소값을 순서대로 초기화한다는 뜻입니다 그러면 a라는 변수에는 1, b라는 변수에는 2, c라는 변수에는 3이 들어가게됩니다

 

객체의 구조분해할당

객체는 배열과는 조금 달리 순서대로 할당되는것이 아닌 변수이름과 키의 값에 따라 일치될때 변수에 값이 할당됩니다

const obj = {
title: '제목',
content: '내용',
num: 0,
};
const { title, num, content } = obj
console.log(content); //'내용'

const title = obj.title;
const num = obj.num;
const content = obj.content;

위의 코드를 보면 obj이라는 객체를 초기화하고 새로운 상수에 {title, num, content} = obj 를 통하여 할당하는걸 볼 수 있습니다 배열은 순서대로 할당되면서 [] 대괄호로 할당할 수 있고 객체는 키값과 {} 중괄호로 할당되는걸 알 수있습니다

 

... 전개구문

전개구문이란  반복 가능한 객체에 접근하는 문법이며 배열 및 유사배열 등을 전개할수있는 문법입니다

요소에 접근하여 요소를 하나씩 분리하여 반환하며 사용방법은 아래와 같습니다

const arr1 = [1, 2, 3, 4, 5];
console.log(...arr1)

전개 구문은 ...객체 또는 배열이 사용됩니다 추가적으로 전개뿐만아니라

2개의 객체 또는 배열타입 요소를 합칠 수 있습니다

 

아래는 배열을 합치는 예제입니다

const arr1 = [1, 2, 3, 4, 5];
const arr2 = ["a", "b", "c"];

const arr3 = [...arr1, ...arr2];

console.log(arr3) //1,2,3,4,5,a,b,c