HYE-ON HYE-ON

개인적으로 ES6+에서 새롭게 추가된 기능 중 가장 편리하다고 생각하는 기능이다! Default Value ES6+에서는 함수에 인자를 받을 때 기본값을 지정할 수 있다. function sayHi(name) { return `hello ${name}`; } sayHi('HYEON'); // hello HYEON sayHi(); // hello undefined sayHi라는 함수가 있을 때, name에 값이 넘어가지 않으면 undefined가 뜬다. 이렇게 원치 않는 undefined가 뜨는 것을 방지하기 위해 function sayHi(name) { if(!name) name = 'stranger'; return `hello ${name}`; } 조건문으로 넘어온 값이 없는 경우 값을 세팅해주는 경우..

다이어리와 캘린더 앱과 사진 갤러리의 도움을 받아 2020년을 돌아보았습니다. 1월의 기억이 아직 생생하게 남아있는데 벌써 12월의 마지막 주라니... 20대가 되면 시간이 정말 빨리 흘러간다는 어른들의 말이 거짓말이 아니었음을 실감했습니다....... 🗞 올해의 빅뉴스 2020년 올해의 기억할만한 큰 사건들이 있었습니다. 한 해가 넘어가며 제가 할 수 있는 것도, 책임을 져야 할 것도 많아진 것 같네요. 🎓 졸업! 올해 저는 2020년을 맞아 20살 성인이 되었습니다! 한참 멀 것 같던 으른이 12시 땡 하자마자 되어버리더라고요. 어쩐지 허무한 느낌도 아무것도 바뀌지 않은 느낌도 있었지만 그래도 꿈에 그리던 20대가 되어서 행복했습니다! 코로나가 막 퍼지기 시작한 1월 말이 졸업식이었는데 그래도 다른 ..

저번 글에 이어 배열과 관련된 메서드들을 좀 더 살펴보겠다. Array.of Array.of는 []로 배열을 생성하지 않고 ,로 연결된 문자열들을 배열 형태로 만드는 메서드이다. Array.of() 메서드는 인자의 수나 유형에 관계없이 가변 인자를 갖는 새 Array 인스턴스를 만듭니다. Array.of()와 Array 생성자의 차이는 정수형 인자의 처리 방법에 있습니다. Array.of(7)은 하나의 요소 7을 가진 배열을 생성하지만 Array(7)은 length 속성이 7인 빈 배열을 생성합니다. MDN document const jediNormal = ['Rey', 'Yoda', 'Luke', 'Leia']; // 이렇게 배열을 생성할 수도 있지만 const jediOf = Array.of('Rey..

🚂 Array Function 기존 ES5에서는 배열을 컨트롤할 때 for문이나 each문 등 반복문 안에서 index값을 가지고 배열 내 요소들에 대한 작업을 하곤 했다. ES6+에서는 배열을 컨트롤하는 다양한 함수들을 제공해주기 때문에 반복문을 사용하지 않고도 배열로 원하는 값을 리턴 받는 등의 작업을 쉽게 처리할 수 있다. 🔭 find find는 이름 그대로 배열에서 조건에 맞는 요소 중 첫번째 요소를 리턴하는 메서드이다. find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다. MDN document 현재 요소, 현재 요소의 인덱스, 현재 배열을 파라미터로 전달받는다. const emails = ['aaa@abc.com..

➰ forEach forEach 반복문은 각각의 엘리멘트에 반복해 특정한 함수를 실행하는 반복문이다. forEach 안에서 동작하는 함수의 인자는 현재 요소, 현재 인덱스, 현재 배열 (배열 전체)로 총 3개가 있다. let crews = ['Kirk', 'Spock', 'Sulu', 'Uhura', 'Chekov', 'Scott', 'McCoy']; crews.forEach((crew, index, currentArr) => console.log(`This is ${crew}`)); 이때 forEach()는 Array에만 사용할 수 있다. 만약 Array-like Object에서 forEach를 호출한다면 let divs = document.getElementsByClassName('list-div')..

🔜 Arrow Function Arrow Function, 화살표 함수는 ES6에서 발표된 형태의 함수이다. 이름 그대로 화살표 => 모양을 사용한 함수로, 우리가 평소에 function 키워드를 이용해 함수를 사용했던 것에 비해 짧고 깔끔한 코드를 작성할 수 있는 것이 특징이다. 그럼 ES5에서 썼던 함수 형태와 ES6의 화살표 함수 형태를 비교해보자! // ES5 function helpMe() { console.log('Obi-Wan Kenobi'); } // or var helpMe = function() { console.log('Obi-Wan Kenobi'); } // ES6 const helpMe = () => { console.log('Obi-Wan Kenobi'); } 화살표함수는 이렇게..

🤔 ES6? ES6는 ECMA2015 버전으로, 2009년에 나온 ES5에서 Arrow function, map, filter 등이 추가되며 큰 폭의 변화가 생긴 자바스크립트 버전이다. ES6로는 더 쉽고 간결한 방법으로 코드를 짤 수 있으며 위에서 잠시 언급했다시피 Class, Module, Arrow function, let & const, 비구조화 할당, Promise 등 추가된 다양한 기능을 활용할 수 있다. 🕰 ES6 이전의 변수들 let과 const가 생기기 이전에 var라는 예약어가 있었다. var는 한 번 선언하면 함수, 블록에 관계없이 전역에서 사용할 수 있는 범위를 가져 언제 어디에서 어떻게 값이 변경되었는지 알기 힘들다. 이렇게 변수의 scope가 전역이고 hoisiting이 일어난다..

작년에 일정 때문에 아쉽게 참여하지 못했던 WTM에 동아리 부원들과 함께 다녀왔다. 연사자가 전부 여성인 여성을 위한 여성에 의한 여성의 테크 업계 컨퍼런스라니, 재미가 없을 리가 없었다. 입장하자마자 토스 부스부터 들렀다. 역사를 바꾼 여성 기술자들 굿즈와 포스터를 나눠준다는 사전 공지를 듣고 무조건 받아야한다고 생각했다. 달로 우주선을 쏘아 보내는 코드를 작성한 마가렛 해밀턴의 포스터는 내 방문에 붙어있다. 볼 때마다 내게 힘을 준다. 나는 '스타트업에서 마크업 개발자로 살아남기', '회사에서 똑똑하게 살아남기', '웹마스터에서 프론트엔드 개발자로의 여정', '원하는 것을 얻는 방법', '과학에서의 성차별에 과학적으로 맞서기', '여자답게 도전하기' 세션을 들었다. 그중 가장 기억에 남는 것은 첫 번..