본문 바로가기
반응형

Javascript, ES5, ES613

전개 연산자(Spread Operator) 정리 오늘은 Javascript의 전개연산자(Spread Operator)에 대해서 정리해 보겠습니다. 1. 전개연산자 ...는 전개 연산자(Spread Operator)로 ES6부터 도입되었는데요. 배열이나 객체를 확장해서, 다른 배열이나 객체로 복사하거나 병합할 때 사용합니다. 코드를 더 간결하게 해주고 가독성을 높여줍니다. 1-1. 배열병합 전개연산자를 이용한 배열병합을 잘 이해하도록 도와주는 코드를 보겠습니다. 아래의 arr1과 arr2는 전개 연산자인 '...'을 이용해서, 아래와 같이 conbinedArray라는 병합된 array를 쉽게 만들어 낼 수 있습니다. const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const combinedArray = [...arr.. 2024. 4. 15.
async 와 await 로 작성하는 읽기쉬운 비동기코드 # forEach Javascript에서 비동기를 사용할 때 Promise라는 API를 정리해 보았었는데요. 오늘은 또다른 API인 aysnc와 await에 대해서 정리해 보도록 하겠습니다. 1. async와 await Async와 await는 Javascript에서 비동기 처리를 쉽게 할 수 있게 해줍니다. 비동기 코드를 동기 코드처럼 읽고 쓰기 쉽게 만들어 주기 때문인데요. 콜백의 연쇄로 인한 복잡성을 피하고, 코드를 보다 직관적으로 만들 수 있게 도와줍니다. Promise에 대한 기본적인 이해가 있다면, async와 await의 개념을 쉽게 받아들일 수 있습니다. Promise에 대해서는 아래 글을 참조해 주세요. >> Javascript의 Promise를 알아보자 #ES6 1-1. Code를 통한 Promise 와.. 2024. 4. 6.
Javascript Spread 문법(...): 코드를 간결하게 만드는 비법 오늘은 Javascript의 spread 문법에 대해서 정리해 보겠습니다. 1. Spread(...)문법 이 문법은 ES6(ES2015)에 도입되었는데요. Spread 문법은 ... (세 개의 점)을 사용해 배열, 객체, 혹은 함수의 인자 등을 '펼쳐서(spread out)', 사용하게 해 주는데요. 이 점3개가 요소가 펼쳐짐을 의미합니다. 객체나 배열을 분해해 펼쳐서 사용하게 해주는 유용한 문법이지요. Spread 문법(...)을 이용하면, 배열이나 객체를 쉽게 조작할 수 있게 해주기 때문에, 코드가 간결해지고, 데이터 처리가 유연해 집니다. 함수 인자를 다루는 상황에서도 활용도가 매우 높구요. 2. Spread(...) 문법 사용 예 1-1. 배열 합치기 코드를 보면서 Spread 문법을 이해해 보겠.. 2024. 2. 17.
Javascript 구조 분해 할당에 대한 정리: JS destructuring assignment 오늘은 Javascript의 구조분해 할당(destructuring assignment)에 대해서 정리해 보겠습니다. 1. 객체 구조 분해 할당(destructuring assignment) 1-1. 구조 분해 할당의 Before and After 구조 분해 할당은, 객체나 배열을 분해하여서, 그 값들을 개별 변수에 담을 수 있게 하는 Javascript의 표현식을 가르킵니다. 먼저 객체에 대한 구조분해할당의 예제를 보겠습니다. 구조 분해 할당이 있기 전에는, 아래의 person이라는 객체의 값을, 각각의 변수에 담기위해서, 아래와 같이 일일히 객체에 접근해 변수에 담아주어야 했습니다. const person = { name: 'John Bark', age: 30, job: 'Software Engine.. 2024. 2. 6.
Javascript 의 import 와 export 마스터하기: default vs named JavaScript에서 import와 export는 코드를 나눠서 작성하고, 필요한 부분만 골라 쓸 수 있도록 해 줍니다. export는 특정 기능이나 데이터를 다른 파일에서도 사용할 수 있게 해주고, import는 필요한 기능이나 데이터를 다른 파일에서 가져와 사용할 수 있게 해 주지요. 이렇게 하면 코드를 여러 파일에 나눠서 관리할 수 있어, 보다 체계적이고 깔끔하게 코드를 작성할 수 있습니다. 1. Export (Named Export)와 import 변수, 함수, 클래스 등을 다른 파일에서 사용할 수 있게 하려면, 선언할 때 앞에 export 키워드를 붙여주면 됩니다. 이렇게 하면 해당 요소들을 내보내기 할 수 있어서, 다른 파일에서 import 해 가져다 사용할 수 있게 됩니다. 아래에서는 ar.. 2024. 1. 1.
Javascript 함수와 화살표 함수에 대한 정리 # Arrow Function 오늘은 Javascript의 화살표 함수에 대해서 정리하려고 하는데요. 이에 대해서 알아보기전에, 기존의 함수에 대해서 알아보고 정리해 보도록 하겠습니다. 1. 기존의 함수 (Function) 표현 방법 기존의 함수를 선언하는 방법은 크게 2가지가 있었는데요. 함수선언(Function Declaration)과 함수표현식(Functoin Expression)입니다. 1-1. 함수 선언 ( Function Declaration ) 기존의 자바스크립트의 함수선언 방법은, function키워드로 시작해서, 함수의 이름과, 인자를 전달한 후 "{ }"로 감싸서 표현하였구요. return 키워드를 통해서 값을 반환하고, 함수를 종료하여 빠져 나갑니다. 아래와 같이 기본 값을 정해줄 수도 있습니다. 두번째 인수인 b.. 2022. 12. 22.
JSON 파일 로 데이터 변환해 저장하기 # NodeJS Path Serialize 오늘은 Javascript 의 데이터를 JSON스트링 타입으로 변환해 파일로 저장하는 방법에 대해서 정리해 보도록 하겠습니다. 1. 데이터를 JSON 파일로 변경하기 1-1. JSON.stringify() 먼저 Javascript 의 값들을 JSON string으로 변환하는 함수에 대해서 알아보겠습니다. json객체의 stringify()함수가 이 역할을 해주는데요. 아래와 같이 Javascript의 값들을 json string형태로 변환시켜 줍니다. 2022. 12. 8.
Javascript Object 와 Function 에 관한 정리 오늘은 Javascript의 Object(객체)와 Function(함수)에 대해서 정리해 보도록 하겠습니다. 1. Object의 생성 Javascript의 Object르 생성하는 방법은 여러가지가 있지만, 다음과 같이 "{"과 "}"을 사용할 수 있습니다. 생성한 object의 property에는 아래와 같이 "." 또는 "[]"를 이용해 접근할 수 있습니다. 그럼 아래와 같은 log를 볼 수 있습니다. 2. Object의 값 변경 값을 변경하는 방버도 아래와 같이 간단합니다. 로그를 찍어보면 true로 값이 변경된 것을 볼 수 있습니다. 단순히 property의 값을 변경하는 것 이외에도, property를 추가할 수도 있습니다. 로그를 보면, iq라는 property가 추가된 것을 알 수 있습니다. 2022. 2. 1.
Array 정리 # Javascript 오늘은 Javascript의 Array에 대해서 정리해 보겠습니다. 1. Array 생성과 사용 Javascript에서 Array를 만드는 방법은 아주 쉽습니다. Javascript에서는 "["과 "]"을 이용해서 아래와 같이 Array를 생성할 수 있습니다. 위의 마지막 줄에서는 3번 인덱스의 아이템을 로그로 출력하도록 하고 있는데요. 한가지 주의할 점은 아이템의 순서는 0번째 부터 시작한다는 것입니다. 그래서 car2가 아니라, car3를 출력하여야 하는 것이구요. 아래와 같이 "model2"가 나오는 결과를 얻게 됩니다. 2022. 1. 31.
Javascript Prototype 에 관하여 정리해 봅니다 # JS 상속 자바스크립트는 prototype을 베이스로 한 언어라고 하는데요. ES2015에서부터 class라는 단어가 나오기 시작하였지만, 여전히 Javascript는 prototype 베이스의 언어입니다. 오늘은 이러한 JS의 prototype에 대해서 알아보겠습니다. 1. prototype 과 prototype Chain 1-1. prototype 과 prototype Chain prototype을 이해하기 위해서 아래의 객체를 보도록 하겠습니다. students라는 객체에는 fullName이라는 속성만 지정되어 있는데요. 'students.' 이라고 입력하면, 본적없는 속성들이 IDE에 아래와 같이 나열되는 것을 볼 수 있습니다. 이렇게 객체만 만들어도 접근할 수 있는 property에는 다음과 같은 값들이 .. 2021. 4. 27.
Javascript의 Promise를 알아보자 #ES6 비동기코드 하면 나오는 단어중 하나가 콜백헬입니다. 코드의 많이 중첩되어서, 가독성이 매우 떨어지는 문제를 애기하는 것으로 JavaScript 에서도 여러가지 대안들이 나왔었습니다. 이에 대한 대안중 하나가 Promise인데요. 이것은 Javascript es6에 채택이 되었습니다. 오늘은 이 Promise에 대해서 정리해 보겠습니다. 1. Promise 미래에 발생할 비동기 이벤트의 처리의 완료 또는 실패를 나타내는 일종의 Future 객체를 가르킵니다. 콜백헬에 빠지지 않고, 비동기 처리가 성공한 경우와 실패한 처리를 구분할 수 있게 해주는데요. Promise는 비동기 operation에 대한 상태들을 아래와 같이 정의하고 사용합니다. 상태 내용 pending Promise의 initial (초기)상.. 2021. 4. 27.
undefined 와 null 의 차이점은 무엇인가요? #Javascript Java나 Kotlin같은 언어를 배운 후에, Javascript를 배울경우 생소하게 다가오는 타입이 undefined입니다. 오늘은 이 undefined가 Javascript에서 어떠한 의미를 가지고 있고, null과는 어떻게 다른지 정리해 보겠습니다. 1. undefined 먼저, Undefined에 대해서 알아보겠습니다. 우리말로 정의되지 않았다는 의미인데요. MDN의 공식문서를 참조해 보면, 아래와 같이 primitive타입중의 하나이면서, writable하지 않는 타입이라고 나와있습니다. Javascript의 변수를 선언해 놓고 아무값도 대입하지 않고도 로그를 찍어 보겠습니다. 나오는 값은 null이 아니라 undefined가 됩니다. 2020. 3. 23.
자바스크립트의 var, let, const 를 알아보자 JavaScript에서 ES6로 넘어오면서, let과 const 까지도 알아야하는데요. ES5,6는 거부할 수 없는 대세여서일까요, 예제 코드들을 보면 let과 const를 활용하고 있는 것이 대부분 입니다. 이제 유연한 var만으로는 버티기 어렵습니다. 오늘은 var 와 새롭게 나온 let, const에 대해서 비교, 정리해 보도록 하겠습니다. 1. 유연성의 대명사 var vs 깐깐한 let, const 유연하기로 유명한 var를 먼저 보기로 하겠습니다. 같은 변수에 var를 두번 선언하더라도 가장 마지막에 선언한 변수에 담긴 값으로 에러없이 출력됩니다. 결과는 역시 varTest2로 나오고 있습니다. 하지만 let이나 const를 두번 선언한 경우에는 아래와 같이 에러가 뜨게 됩니다. 2. var와는.. 2020. 3. 22.

티스토리툴바