자바스크립트 개념정의

1. 배열 

- 배열 선언은 [] 대괄호를 통해 하며, 배열의 원소 타입은 다양하게 받을 수 있습니다.

const hobbies = ['Sports', 'Cooking', 1, 2, true];
for (let hobby of hobbies) {
    console.log(hobby);
}

 

배열은 스택처럼 pop, push를 사용해서 원소를 빼거나 더할 수 있으며 map함수를 많이 사용하여

Kev:Value 형태의 배열 변환 할 수 있습니다.

 

 

2. 스프레드 연산자 & 레스트 연산자

- 배열 내 원소 또는 객체 내 속성을 접근할 때 사용하는 방법입니다.

const hobbies = ["Sports", "Cooking", true, 1];
const copiedHobbies = [...hobbies]

for(let hobby of copiedHobbies){
   console.log(hobby);
}

 

이렇게하면 배열 hobbies에 있는 원소들이 copiedHobbies 배열에 들어가게 됩니다.

이후 출력했을때, 원소들이 잘 나오는 것을 확인할 수 있습니다. 

 

const person = {
   name: 'Haams',
   age : 31,
   greet(name){
     console.log(`Hi!, I am ${name}`);
   }
}

const copiedPerson = {...person}; // person 속성 -> copiedPerson

 

이렇듯, person의 객체내 속성들도 복사해서 다른 객체에 값을 부여할 수 있습니다.

 

레스트 연산자는 반대로 함수 내 접근하는 파라미터의 갯수를 유연하게 관리하고자 사용된 연산자입니다.

예를 들어 toArray라는 함수가 있는데 여기에 인자로 3개가 올 지, 4개가 올 지 정확히 모르고 유연한 상태일 경우 다음 레스트 연산자를 사용합니다.

 

const toArray = (...args) => {
   return args;
}

console.log(toArray(1, 2, 3, 4, 5)); // 1, 2, 3, 4, 5 출력

 

이렇듯, 유연하게 인자를 관리해서 값을 관리할 수 있습니다.

 

 

3. 구조분해 방식

- 구조 분해 방식은 배열과 객체 두 가지 방법이 있습니다. 

배열 객체는 인덱스에 따라 구조 분해가 가능하며 객체는 속성의 이름에 따라 구조 분해가 가능합니다.

배열 구조 분해 방식을 예를 들어 설명하겠습니다.

const hobbies = ['Sports', 'Programming'];
const [hobby1, hobby2] = hobbies;

console.log(hobby1, hobby2);

 

배열 구조 분해 방식은 인덱스에 따라 값이 부여되기에, hobby1은 Sports, hobby2는 Programming이 들어갈 것 입니다.

 

다음은 객체 구조 분해 방식을 예를 들어 설명하겠습니다.

const person = {
   name: 'Haams',
   age: 31,
   greet(name){
      console.log(`Hi, i am ${name}`);
   }
}

const printName = ({ name }) => {
   console.log(`My name is ${name}`);
}

printName(person);

 

이렇게 함수 선언할 때, name을 인자로 두는데 다른 인자와 다른점은 중괄호를 함께 넣어주는 것입니다.

이후에 해당 함수를 호출할 때, 객체를 넣어주면 자동으로 name이라는 객체 속성을 찾아서 해당 값을 반환합니다.

이 방식을 이용해서 객체 중 age, greet 또한 접근이 가능합니다. 

 

 

 

4. 비동기 코드와 프로미스

- 비동기 코드는 동기적으로 모든 것이 작업한 다음에 실행되는 코드로, 가령 A라는 것이 수행되고 나서 B가 수행되어야 한다는 로직을

짤 때 순차적인 흐름이 아닌 경우, 비동기로 처리할 수 있습니다.

코드로 설명을 하자면 다음과 같습니다.

const fetchData = () => {
  const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Done!');
    }, 1500);
  });
  return promise;
};

setTimeout(() => {
  console.log('Timer is done!');
  fetchData()
    .then(text => {
      console.log(text);
      return fetchData();
    })
    .then(text2 => {
      console.log(text2);
    });
}, 2000);

console.log('Hello!');
console.log('Hi!');

 

다음 코드에서는 Hello! 와 Hi! 가 동기적으로 먼저 수행될 것 입니다.

순차적으로는 fetchData가 먼저 수행되는 것이 맞지만, setTimeout이라는 비동기 함수처리가 되어 있고, Promise로 

setTimeout 함수가 작동한 다음에 resolve 처리를 하기 때문에 then으로 반환하는 부분에선 가장 마지막에 반환될 것입니다.

 

또한, Promise를 사용하는 방법은 콜백함수로 비동기처리를 구현한다면, 콜백에 콜백을 지속해서 반환할 것이므로 코드 상 복잡해지는 것과 콜백 지옥을 방지하고자 사용하기도 합니다.

> Promise를 사용하면 위에 내용처럼 .then을 횟수에 맞게 선언해서 작업이 가능하기 때문입니다.

 

Promise로 비동기 처리될 때 1.5초 이후 잘 처리가 되면 resolve 함수가 Done이라는 값을 같이 보내면서 성공 처리를 할 것입니다.

> 실패일 경우 reject로 넘어가지만, 다음 비동기 함수에서는 실패할 수 없기 때문에 reject를 처리하지 않았습니다.

처리 조건이 1.5초 이후 작동한다는 경우 밖에 없기 때문입니다. 

따라서 resolve 처리로 값(Done)이 반환되었을때, then(text)로 text가 해당 값을 받아 반환하여 처리합니다.

 

이상 자바스크립트 개념에 대해 정리하였습니다.  감사합니다.