프론트엔드 개발자가 될거야./js
-
[모던 자바스크립트] 세트, 문자열 패딩프론트엔드 개발자가 될거야./js 2023. 4. 19. 15:37
set (세트) 세트란 어떠한 자료형의 값이든 각 원소를 고유하게 저장하는 객체이다. 고유한 값만 보유할 수 있는 set의 특징을 이용하여 배열에서 중복을 제거할 수 있다. const myArray = ['a', 'b', 'c', 'd', 'a', 'a', 'b', 'b']; const set = new Set(myArray); console.log(set); // Set {'a', 'b', 'c', 'd'}; // Set을 배열로 변환하기 const uniqueArray = Array.from(set); console.log(uniqueArray); // ['a', 'b', 'c', 'd']; // 한줄로도 구현가능 const uniqueArray = Array.from(new Set(myArray))..
-
[모던 자바스크립트] 루프프론트엔드 개발자가 될거야./js 2023. 4. 19. 15:18
- 배열에 대한 반복 1. 기존 for문 var fruits = ['apple', 'banana', 'orange']; for (var i=0; i < fruits.length; i++) { console.log(fruits[i]); } // apple // banana // orange 2. for of 문 const fruits = ['apple', 'banana', 'orange']; for (const fruit of fruits) { console.log(fruits[i]); } // apple // banana // orange - 객체에 대한 반복 Object.key()로 객체의 모든 키를 가져온 후, 키에 대해 반복을 수행하면서 값에 접근하자! const car = { maker : "BM..
-
[모던 자바스크립트] 템플릿 리터럴, 디스트럭처링프론트엔드 개발자가 될거야./js 2023. 4. 18. 18:41
템플릿 리터럴 ES6에서 문자열을 삽입하는 방식이 변경되었다. - 여러 줄 문자열 생성 전체를 백틱으로 감싸면 된다. 백슬래시의 지옥에서 벗어날 수 있다. const content = `hello, my name is jeongeun how are you?`; 객체 디스트럭처링 - 객체에서 변수를 생성하기 쉬워졌다. // 예전 var person = { first : "noh", last : "jeong eun", } var first = person.first; var last = person.last; // 현재 const person = { first : "noh", last : "jeong eun", } const {first, last} = person; 디스트럭처링을 이용하여 객체가 가진 속성..
-
[모던 자바스크립트] 함수 기본값 인수프론트엔드 개발자가 될거야./js 2023. 4. 18. 18:19
ES6에서는 함수 기본값 인수를 매우 쉽게 설정할 수 있다. - tax나 tip 값을 할당하지 않으면 기본 값으로 0.1과 0.05이 쓰인다. function calculatePrice(total, tax = 0.1, tip = 0.05) { return total + (total * tax) + (total * tip) } - calculatePrice(100, 0.15) 처럼 매개변수를 다 전달하지 않으면 어떻게 될까? tip에 0.15를 할당하려 했더라도 이렇게 쓰면 두번째 인수 tax에 0.15가 할당된다. => calculatePrice(100, undefined,0.15) 이렇게하면 tip에 0.15를 할당할 수 있다. 그렇지만 깔끔하지 않으니 개선해보자. - 디스트럭처링으로 함수의 인수를 객..
-
위코드 2주차 중간시험 리뷰프론트엔드 개발자가 될거야./js 2022. 7. 1. 17:25
위코드 1주차로 html,css,js replit 풀고 위코드 2주차로 인스타그램 클론코딩 + 몇가지 js 기능 구현을 했다. 그리고 나의 학습을 스스로 점검하기 위해 중간 시험을 치뤘다. 1시간동안 자바스크립트 5문제를 푸는 형식이었다. 4,5번 문제는 (나는..) 어려웠다.. ^__^ 01. isEven Q. 짝수인지 판별하는 함수 isEven을 작성 주세요. console.log(isEven(11)) // --> "짝수가 아닙니다." console.log(isEven(10)) // --> "짝수 입니다." 나의 방법 function isEven(num) { // 아래 코드를 입력해주세요. if (num % 2 === 0) { return "짝수 입니다." } else { return "짝수가 아닙니..
-
[instagram 클론코딩] input 창에 엔터치거나 "게시"누르면 댓글 추가 구현하기프론트엔드 개발자가 될거야./js 2022. 6. 29. 08:47
엔터치거나 "게시"누르면 댓글 추가 짠~~ 나만의 인스타그램을 만들었다. 레이아웃에 대해서도 할 말이 많지만 일단 이 게시물에는 JS로 구현한 사항에 대한 것만 작성해보려고 한다. 구현해야 할 사항은 댓글 input 창에 엔터치거나 "게시" 누르면 댓글 추가되도록 createElement로 요소 생성해서, input에 입력한 값이 추가 되어야합니다. 나의 코드 const input = document.querySelector('.input__comment'); const submit = document.querySelector('.input__submit'); const parentComment = document.querySelector('.contents__comments'); function isE..
-
[Replit Javascript] 어려웠던 문제 총정리프론트엔드 개발자가 될거야./js 2022. 6. 26. 22:18
10. 논리연산자 - rockPaperScissors 함수 index.js에 있는 가위 바위 보 게임 함수를 아래 조건에 맞게 구현해주세요. rockPaperScissors 함수를 구현해서 가위 바위 보 게임을 구현해주세요. 가능하면 || 와 && 연산자 둘다 사용해주세요. player1과 player2 중 이긴 사람이 누군지 리턴해주세요. 예를 들어, player1이 이겼으면 "player1" 이 리턴 되고 그 반대의 경우라면 "player2"가 리턴이 되어야 합니다. 만일 비기는 경우에는 무조건 "player1"이 리턴 되어야 합니다. player1 과 player2 의 값은 다음 셋 중 하나 입니다. "가위" "바위" "보" 예를 들어, player1은 "가위" 이고 player2는 "보" 이면 "..
-
[TIL] Today I Learned : 배열의 반복문 - .forEach() / .map() 차이프론트엔드 개발자가 될거야./js 2022. 6. 24. 21:46
for문처럼 array의 반복문으로 사용되는 map, forEach 메서드를 공부해보았다. 둘 다 정말 많이 쓰이는 메서드라는데... 무슨 차이가 있을까?? 일단 공통점은 두 메서드 모두 원본 배열을 건들지 않는 것이다. 원본 배열을 가지고 어떤 짓을 해도 원본 배열은 원래의 값을 그대로 가지고 있다. ✍🏻✍🏻✍🏻 그리고 arrow function은 map메서드와 forEach메서드와 같이 자주 쓰이니 arrow function에 대한 이해를 확실히 해야한다. * 참고 arrow function을 가장 많이 사용할 때는 callback 함수로 사용할 때이다. callback 함수란, 인자로 전달되는 함수라고 생각하면 된다. Array.map() 아래는 map 메서드에 대한 설명이다. https://www..