자바스크립트 최신 기술에 대해 알아보자

 

 안녕하세요. 진득 코딩입니다.

 

 프로그래밍 언어도 계속해서 발전하기 위해 업데이트를 하게 됩니다.

 

 자바스크립트도 계속해서 업데이트가 되어가면서 새로운 기술들이 나오게 됩니다.

 

 이번 시간에는 자바스크립트 최신 기술들에 대해 알아보도록 하겠습니다.

 

ES6

 

 

 먼저 ES6 업데이트에서 나온 여러 최신 자바스크립트 문법에 대해 알아보도록 하겠습니다.

 

 첫 번째는 객체 초기화 방법입니다.

 

 원래는 각각의 요소들을 console에 출력하기 위해서는 key:value 꼴로 작성하여 출력하였습니다.

 

 이때 변수 이름이 키값과 동일하다면 해당 키값만 적어주면 해당 키값이 변수 이름이 되어 출력됩니다.

 

 

 console에 출력된 값을 보시면 키값이 변수 이름이 되어 해당 키값에 있는 데이터 값을 잘 가지고 온 것을 확인할 수 있습니다.

 

 

 다음은 객체 안에 있는 값을 꺼내서 변수로 만드는 방법입니다.

 

 원래 객체의 값을 가지고 오고 싶을 때는 변수에 (객체 이름).(키값)으로 가져왔습니다.

 

 ES6에 추가된 최신 문법을 사용하게 되면 'let {key값, key값} = 객체 이름'으로 쉽게 분해할 수 있습니다.

 

 

 console에 출력된 값을 보게 되면 잘 분해되어 출력된 것을 확인할 수 있습니다.

 

 

 다음은 객체에서의 Spread 연산자입니다.

 

 spread 연산자는 배열에서도 사용할 수 있지만 일단 객체의 spread 연산자를 살펴보도록 하겠습니다.

 

 spread 연산자는 ...으로 표현하고 앞에 표현된 요소를 제외한 모든 요소를 의미합니다.

 

 

 console 출력을 살펴보게 되면 앞에 그냥 적은 personName은 그대로 출력되고 나머지 요소들은 다시 객체로 묶여서 출력된 것을 확인할 수 있습니다.

 

 

 다음은 배열의 ES6 새로운 문법에 대해 살펴보도록 하겠습니다.

 

 배열에 있는 요소들을 변수에 넣고 출력할 때는 'let (변수명) = (배열 이름)[index값]'으로 변수에 배열의 요소를 넣어주었습니다.

 

 ES6의 새로운 문법을 사용하게 되면 'let[(변수명), (변수명), (변수명)] = (배열 이름)'으로 간단하게 3개의 배열 요소를 변수에 넣을 수 있습니다.

 

 

 a, b, c를 출력했을 때 array에 있는 요소들이 잘 들어간 것을 확인할 수 있습니다.

 

 

 

 배열에서도 spread 연산자를 사용할 수 있습니다.

 

 위와 같이 표현하게 되면 맨 앞에 있는 요소는 변수 a에 들어가게 되고 나머지 요소들은 rest에 들어가게 됩니다.

 

 

 console에 출력된 결과를 보게 되면 a에는 첫 번째 요소만 들어가고 rest에는 나머지 요소들이 모두 들어가 있는 것을 확인할 수 있습니다.

 

 

 다음은 여러 배열에 있는 요소들을 한 번에 출력하는 문법입니다.

 

 해당 기능은 concat() 함수를 사용할 수도 있지만 spread 연산자를 사용할 수도 있습니다.

 

 위와 같이 ...(배열 이름)을 이용해서 result라는 변수에 넣고 출력해 보았습니다.

 

 

 ar, br, cr에 있는 요소들이 모두 배열에 들어가서 출력되는 것을 확인할 수 있습니다.

 

 

 다음은 ES6 업데이트에서 제일 핫했던 문법인 화살표 함수에 대해 살펴보도록 하겠습니다.

 

 화살표 함수는 =>를 사용하여 함수를 좀 더 간편하게 사용하는 함수 표현 방법입니다.

 

 이때 함수가 한 줄이고, 리턴이 있으면 {}를 생략할 수 있어 굉장히 간단하게 함수를 표현할 수 있습니다.

 

 

 일반 함수와 화살표 함수를 출력해 보면 같은 결과가 나오는 것을 확인할 수 있습니다.

 

 그렇다면 화살표 함수가 더 간단하기 때문에 일반 함수는 사용하지 않을까요?

 

 화살표 함수가 있음에도 여전히 일반 함수가 사용되는 이유는 this 때문입니다.

 

 

 this는 메서드가 호출된 객체를 가리키는 키워드입니다.

 

 위에 있는 객체에 있는 함수를 호출하게 되었을 때와 아래에 있는 객체에 있는 함수를 호출하게 되었을 때의 차이를 살펴보겠습니다.

 

 위에 있는 person3 객체에 있는 함수는 변수를 출력하고, person4에 있는 함수는 this. 변수를 출력합니다.

 

 

 이때 출력값을 살펴보게 되면 person3는 전역변수를 부르고, person4는 지역변수를 부릅니다.

 

 이렇게 this를 사용하게 되면 객체 안에 있는 변수를 부르고, 사용하지 않으면 전역 변수를 부르게 됩니다.

 

 이 this를 화살표 함수에서는 사용하지 못하기 때문에 this를 사용할 일이 있다면 일반 함수를 사용해야 합니다.

 

 

 다음은 동적인 데이터 사용하는 문법에 대해 알아보도록 하겠습니다.

 

 예시로 위와 같은 문장을 출력하려면 각각의 데이터들을 ,나 +로 묶어서 하나의 문자열로 만들었습니다.

 

 하지만 ``을 사용하여 동적인 데이터만 ${}로 감싸서 한 번에 적어서 사용할 수 있습니다.

 

 

 console에 출력된 값을 살펴보게 되면 세 가지 모두 같은 출력값인 것을 확인할 수 있습니다.

 

ES6 문제

 

 

 문제 1은 key:value 꼴로 되어 있는 축약 표기법을 사용해서 표현하였습니다.

 

객체를 변수 이름과 key가 동일하면 축약 표기법을 사용할 수 있습니다.

 

 

 표기법은 달라졌지만 결과값은 같은 것을 확인할 수 있습니다.

 

 

 객체는 문제 1에 있는 객체를 사용하였습니다.

 

 ES6 문법에서의 동적 데이터를 출력하는 방법을 사용하였습니다.

 

 

 문제에서 요구하는 대로 출력되는 것을 확인할 수 있습니다.

 

 

 Destructuring(구조 분해 할당)은 배열이나 객체에서 값을 쉽게 추출하여 변수에 할당하는 문법입니다.

 

 위와 같이 각각의 객체의 value값을 가져와서 더할 수도 있지만 a, b, c에 있는 객체를 한 번에 분해해서 return에 a + b + c로 적을 수도 있습니다.

 

 

 calculate() 함수에 매개변수를 넣고 출력해 보면 1 + 2 + 3의 답이 6이 출력되는 것을 확인할 수 있습니다.

 

 

 객체 안에 있는 요소를 가져올 때 (객체 이름):{key 값}으로 표현할 수 있습니다.

 

객체 구조 분해 할당 (Destructuring)을 사용하여 이름과 도시 이름을 추출합니다.

 

 return에서 추출한 값들이 문자열과 일치하므로 true가 나올 것입니다.

 

 

 예상한 대로 출력값이 true가 나온 것을 확인할 수 있습니다.

 

 

 배열에 있는 요소를 각 변수에 넣어서 추출하는 방법을 사용하였습니다.

 

 이때 건너뛰고 싶은 요소가 있다면 , , 을 사용하여 해당 자리를 비워두면 됩니다.

 

 

 출력값이 위에서 요구한 결과값과 일치한 것을 확인할 수 있습니다.

 

 

 getCalender() 함수에 들어가는 매개변수 중 가장 앞에 있는 매개변수만 first에 들어가고 다른 모든 변수들은 모두 rest에 들어가게 됩니다.

 

 이때 rest[0]과 rest[2]에 Febuary와 March가 들어가고 rest[2]에는 undefined가 나오게 하려면 1월부터 3월까지 순서대로 넣어주면 됩니다.

 

 

 출력값에서 true가 나온 것을 확인하면 예상한 대로 매개변수들이 들어간 것을 확인할 수 있습니다.

 

 

 문제 7은 return 값은 하나인데 배열은 두 개이기 때문에 두 배열을 한 번에 넣어서 min() 함수를 돌려야 합니다.

 

 이때 spread 연산자를 사용하여 쉽게 배열 a와 배열 b의 요소들을 합칠 수 있습니다.

 

 

 배열 a와 배열 b 중에서 가장 작은 수인 9라는 숫자가 출력된 것을 확인할 수 있습니다.

 

 일반 함수를 화살표 함수로 바꾸는 문제입니다.

 

 화살표 함수는 return이 있고 문장이 하나밖에 없다면 { }를 생략할 수 있습니다.

 

 그래서 위와 같이 표현하여 sum 함수에 40과 10이라는 매개변수를 넣으면  50이라는 수가 나올 거라고 예상됩니다.

 

 

 예상한 결과대로 50이라는 숫자가 나오게 되었습니다.

 

 

 문제 9는 함수가 계속해서 함수를 부르는 커링 함수(Curried Function)로 표현하면 됩니다.

 

 addNumber()이라는 변수에 들어가는 매개변수가 a, b, c이고 실행되는 함수는 a + b + c이기 때문에 이를 정리해서 위와 같이 표현할 수 있습니다.

 

 또한 화살표 함수는 일반 함수와는 달리 return이 위에 있으면 적용이 안되기 때문에 꼭 return의 위치를 아래에 위치하도록 해줘야 합니다.

 

 

 1 + 2 + 3의 결과인 6이라는 결과가 출력된 것을 확인할 수 있습니다.

 

배열 함수

 

 다음에 살펴볼 최신 자바스크립트 기술은 배열 함수입니다.

 

 프로그래밍을 하면서 많이 사용하는 배열과 for문을 위해서 나온 것이 배열 함수입니다.

 

 배열을 사용할 때 for문을 사용하지 않고 유용하게 사용할 수 있는 배열 함수들에 대해 알아보도록 하겠습니다.

 

 

 위와 같은 배열이 있을 때 각각의 문자열들을 출력하기 위해서는 아래와 같이 for문을 사용했습니다.

 

 하지만 for문을 사용하게 되면 조건문에 여러 가지 조건들을 사용해야 하기도 하고 불편한 점이 많습니다.

 

 

 그래서 사용하는 것이 foreach() 함수입니다.

 

 foreach()는 item을 매개변수로 받아서 console 출력하는 함수를 받아 사용합니다.

 

 이때 forEach문에 어떤 배열에서 사용하는지를 기재해 줍니다.

 

 

 foreach()문을 위와 같이 더 간단하게 작성할 수 있습니다.

 

 매개변수 자체에 함수를 넣고 실행될 코드를 안에 작성해서 사용이 가능합니다.

 

 

 함수를 매개변수로 넣는 방법에 ES6 문법을 사용하여 한 줄로 표현할 수도 있습니다.

 

 이때 item만 출력할 수도 있고 index도 함께 출력하는 등 다른 요소들도 출력이 가능합니다.

 

 

 위에서부터 살펴본 for문부터 ES6 문법을 사용한 foreach문까지 모두 같은 출력값을 갖는 것을 확인할 수 있습니다.

 

 또한 index를 포함해서 출력한 foreach문도 각각의 이름과 index가 잘 출력된 것을 확인할 수 있습니다.

 

 

 다음에 살펴볼 함수는 map()입니다.

 

 map()은 foreach()와는 달리 반드시 배열을 반환합니다.

 

 따라서 다른 함수에 담아서 해당 map을 이용해야 합니다.

 

 

 출력값을 보면 names에 있는 데이터들이 배열에 담겨서 출력되는 것을 확인할 수 있습니다.

 

 

 그렇다면 map()을 어디에서 어떤 식으로 사용하는지에 대해 살펴보도록 하겠습니다.

 

 맵은 위 코드와 같이 배열 안에 여러 객체들이 있을 때 객체 중에서 필요한 요소만 사용할 때 유용하게 사용할 수 있습니다.

 

 위와 같이 item.name을 통해 리스트 안에 있는 객체의 이름만 가져올 수도 있고 item.age를 사용하여 리스트 안에 있는 객체의 나이만 가져올 수도 있습니다.

 

 

 위와 같이 item.name을 사용하여 리스트 안에 있는 객체 요소 중 key값이 name인 값만 배열에 담아서 출력된 것을 확인할 수 있습니다.

 

 

 다음에 살펴볼 함수는 filter() 함수입니다.

 

 filter()는 위와 같이 특정 조건에 맞는 요소들만 return 할 때 유용한 함수입니다.

 

 예시로 위와 같이 L로 시작하는 요소들을 찾거나 나이가 23살 이상인 데이터만 찾을 때 유용하게 사용할 수 있습니다.

  

 

 위와 같이 해당 조건에 맞는 데이터들만 배열에 담겨서 출력되는 것을 확인할 수 있습니다.

 

 

 다음으로 살펴볼 함수는 some() 함수입니다.

 

 some() 함수는 조건에 맞는 데이터가 해당 배열에 존재하는지 여부를 boolean형으로 알려주는 함수입니다.

 

 

 names라는 배열에는 L로 시작하는 데이터가 존재하기 때문에 true가 출력된 것을 확인할 수 있습니다.

 

 

 다음으로 살펴볼 함수는 every() 함수입니다.

 

 every() 함수는 some() 함수와는 반대로 모든 데이터가 해당 조건에 부합하는지 여부를 boolean형으로 반환해 줍니다.

 

 

 names 배열에 있는 모든 데이터 중 L로 시작하지 않는 데이터가 존재하기 때문에 false가 출력된 것을 확인할 수 있습니다.

 

 

 다음은 find() 함수입니다.

 

 find() 함수는 해당 조건에 속하는 데이터 중 가장 먼저 발견된 데이터 하나를 반환합니다.

 

 filter() 함수와는 다르게 무조건 하나의 데이터만 찾습니다.

 

 

 L로 시작하는 데이터 중 가장 먼저 발견된 Larry Page라는 문자열이 출력된 것을 확인할 수 있습니다.

 

 

 마지막으로 살펴볼 함수는 findIndex() 함수입니다.

 

 findIndex() 함수는 특정 조건에 의해 가장 먼저 발견된 데이터의 index 값을 반환해 주는 함수입니다.

 

 

 find() 함수에서 출력된 Larry Page라는 문자열의 index인 6이 출력된 것을 확인할 수 있습니다.

 

배열 문제

 

 

 

 모든 문제에서는 위 names 배열을 사용하여 문제를 해결하게 됩니다.

 

 

 처음 살펴볼 문제는 map() 문제입니다.

 

 모든 이름을 대문자로 바꿀 때는 toUpperCase() 함수를 사용하였습니다.

 

 이렇게 바꾼 문자열들을 map()에 담아 upperNames라는 변수에 넣어 출력하였습니다.

 

 성을 제외한 이름만 출력할 때는 split() 함수를 사용하였습니다.

 

 이름은 띄어쓰기로 구분되어 있기 때문에 " "를 이용해서 split() 함수를 사용하였고 이름은 가장 앞에 있는 문자열이기 때문에 0 index를 사용하였습니다.

 

 이름의 이니셜만 출력할 때는 일단 split() 함수로 단어를 나누고 charAt(0)으로 가장 앞에 있는 단어들만 가져와서 toUpperCase() 함수로 대문자로 바꿔주었습니다.

 

 이 상태에서 join() 함수를 사용하여 문자들을 합쳐주어 출력하였습니다.

 

 

 console에 출력된 결과물을 보면 문제에서 요구한 대로 잘 출력된 것을 확인할 수 있습니다.

 

 

 다음에 살펴볼 문제는 filter 문제입니다.

 

 이름에 a를 포함한 사람들을 찾을 때는 includes() 함수를 사용하여 찾아서 filter로 해당하는 사람들을 찾아서 변수에 넣어 출력하였습니다.

 

 이름에 같은 글자가 연속해서 들어간 사람을 찾을 때는 spread 연산자를 사용하여 모든 문자열에 대해 문자 배열로 바꿔서 해당 문자 배열에서 연속적으로 같은 글자가 있는 문자열을 some() 함수로 검출해서 filter() 함수에 남기게 됩니다.

 

 이렇게 검출한 문자열들을 console로 출력하였습니다.

 

 

 console에 출력된 배열들을 보면 문제에서 요구한 문자열들만 잘 검출되어 출력된 것을 확인할 수 있습니다.

 

 

 다음으로는 some() 함수에 관련된 문제들을 살펴보도록 하겠습니다.

 

 전체 이름의 길이가 20자 이상인 사람이 있는지를 판별하기 위해 spread 연산자를 이용한 배열에 length를 사용하였습니다.

 

 해당 조건에 맞는 문자열이 하나라도 있다면 some() 함수는 true를 출력하게 됩니다.

 

 성을 제외한 이름에 p를 포함한 사람이 있는지를 확인하기 위해 일단 띄어쓰기로 단어를 나누었습니다.

 

 이 상태에서 성을 제외한 나머지 이름 부분만 검출하기 위해 slice() 함수를 사용하여 변수로 따로 모아주었습니다.

 

 해당 변수에서 includes() 함수를 사용하여 p가 있는지를 검출한 뒤 some() 함수에서 true 또는 false 여부를 return 해줍니다.

 

 

 some() 함수의 결과가 모두 true로 출력된 것을 확인할 수 있습니다.

 

 

 다음으로 every문제에 대해 살펴보도록 하겠습니다.

 

 해당 문제는 some() 문제가 every()로 바뀐 것뿐이기 때문에 some문제에서 some만 every로 바꿔주면 원하는 결과가 나오게 됩니다.

 

 

 some문제의 결과와 달리 모든 문자열이 조건에 맞지 않기 때문에 false라는 결과가 나오는 것을 확인할 수 있습니다.

 

 

 다음으로 find()와 관련된 문제를 살펴보도록 하겠습니다.

 

 전체 이름의 길이가 20자 이상인 사람을 찾기 위해서는 length를 사용하여 검출하면 됩니다.

 

 미들 네임이 포함되어 있는 첫 번째 사람을 찾기 위해서는 split() 함수를 사용하여 길이가 3인 사람을 검출하면 됩니다.

 

 해당 조건을 find() 함수를 이용하여 검출한 결과를 변수에 담아 출력하였습니다.

 

 

 문제에서 사용되는 배열을 살펴보면 전체 이름의 길이가 20자 이상인 사람 중 가장 먼저 있는 사람과 미들 네임이 포함되어 있는 첫 번째 사람을 잘 찾아서 출력한 것을 확인할 수 있습니다.

 

 

 마지막으로 findIndex 문제를 살펴보도록 하겠습니다.

 

 문제 자체는 find문제와 똑같지만 인덱스 번호를 찾으라고 했기 때문에 find() 함수 대신 findIndex() 함수를 사용하면 됩니다.

 

 

 find() 함수에서 찾았던 사람들의 index 번호가 성공적으로 잘 출력된 것을 확인할 수 있습니다.

 

 모든 배열 문제를 한꺼번에 살펴보고 싶으시다면 아래 링크를 통해 살펴보실 수 있습니다.

 

https://hackmd.io/@ggBTzrTxSv2iIVFujwBOpw/SJpHSa_c1g

문제에 사용될 배열 - HackMD

 

---

 

 이번 시간에는 여러 가지 자바스크립트 최신 기술들에 대해 살펴보았습니다.

 

 아직까지는 낯설기도 하고 활용 방법도 어렵지만 계속해서 억지로라도 사용하다 보면 결국에는 익숙해지고 사용하기 편한 날이 올 거라고 생각합니다.

 

 이번 포스팅은 여기까지입니다.

 

 궁금하신 사항이나 문의하실 사항은 댓글로 남겨주시면 열심히 답글 달도록 하겠습니다.

 

 끝까지 봐주셔서 감사합니다.😊