Javascript 48

나의 손가락 관절을 지켜줄, 화살표 함수 표현 (arrow function expression), 리팩토링

화살표 함수 표현 =>이란 전통적인 함수 표현인 function을 대신해서 쓸 수 있다. 문제를 푸는데 처음보는 => 표시가 있어 찾아보았다. 처음에는 ‘연산' 관련한 표시인가 싶었지만 문맥에 조금 생뚱맞았기에 다시 찾아보니 ‘화살표 함수 표현’이었다. *이하를 뜻하는 를 함수를 활용하면 2자로 확연히 타자를 치는 속도를 줄일 수 있다. const element = [ 'Hydrogen', 'Helium', 'Lithium', 'Beryllium' ]; //1.일반적인 function element.map(function(element) { return element.length; }) //[8, 6, 7, 9] //2.화살표 함수 표현으로 줄였을때 element.map((element) => { ret..

Javascript 2022.05.01

[개념 문제] 배열 07.array - 08.splice/ 14.splice2/15. splice 3

08.splice splice 메서드는 배열 내의 특정한 요소를 삭제하거나, 다른 요소로 대치하거나 새로운 요소를 추가할 때 사용합니다. splice 메서드를 쓸 때는 인자의 순서에 주의해야 합니다. splice(start, delete, item) 위의 그림에서는 인자 3개가 들어갔지만, splice 메서드는 필요에 따라 인자를 최소 1개만 쓸 수도 있습니다. 첫번째 인자 : 배열의 index의 시작점 두번째 인자 : 삭제할 요소의 개수 세번째 인자 이후 : 추가하고 싶은 요소 예를 들어, [1,2,3,4,5] 라는 배열에서 숫자 3을 제거하고 그 자리에 10을 추가하려고 합니다. 그럴 땐 다음과 같이 메서드를 활용하시면 됩니다. let num = [1,2,3,4,5]; num.splice(2,1,10..

Javascript 2022.04.30

[개념 문제] 배열 07.array - 09.filter 1/ 10.filter 2

09. filter 1 filter filter() 메서드는 array 관련 메서드로 조건에 맞는 요소들만 모아서 새로운 배열을 반환합니다. 만약 조건에 부합되는 요소가 아무것도 없다면 빈 배열을 반환합니다. filter() 메서드도 map() 메서드와 마찬가지로 크게 2개의 인자를 가집니다. filter(callbackFunction, thisAgr) 그리고 callbackFunction 안에서 3개의 인자 (element, index, array) 를 가지는데 첫번째 부분인 element 인자만 필수로 지정되어야하고 나머지는 선택적입니다. 아래의 코드를 보면서 이해해봅시다. value > 10 이라는 조건에 맞는 요소들로만 이루어진 새로운 배열이 생겼습니다. let numbers = [10, 4, 3..

Javascript 2022.04.30

[개념, 문제] 배열 07.array - 06.slice / 07.slice 2

06. slice slice 메서드는 배열 내의 특정한 요소의 index 범위에 따라 새로운 배열을 리턴합니다. splice 메서드와는 다르게 slice 메서드는 원본 배열을 변형시키지 않습니다. 그렇기 때문에 이 메서드를 사용할 때는 slice 메서드를 적용한 새로운 변수를 선언해주어야 합니다. slice(시작점, 끝점) 위의 그림에서는 인자 2개가 들어갔지만, slice 메서드는 필요에 따라 인자를 최소 1개만 쓸 수도 있습니다. 첫번째 인자 : 배열의 index의 시작점 두번째 인자 : 배열의 index의 끝점 예를 들어, [1,2,3,4,5] 라는 배열이 있을 때, 숫자 2~4까지만 남기고 싶을땐 다음과 같이 메서드를 활용하시면 됩니다. let nums = [1,2,3,4,5] let nums_n..

Javascript 2022.04.30

내가 지금 뭘 배우고 있는거지? 자바스크립트가 뭐야?

부트캠프를 시작하기 전 사전 스터디에서 가장 먼저 배우는 것은 Javascript의 변수 선언하는 법과 console.log이다. 갑자기 replit이라는 사이트에 들어가라더니, 들어가 보니 막 영어를 쓰고 run을 누르고 있는 나를 발견하였다. 개발을 전혀 접하지 않은 상태에서는 자바스..하면 벌레퇴치제가 생각나고 변수 하면 변정수가 생각나는 수준이다. 이렇게 무지한 상태에서 큰 그림을 잡기위해 내가 도대체 지금 뭘 배우고 있는지 알아보기로 했다. 우선 나는 웹 개발을 배우고 있다. 웹을 구성하는 요소는 3가지인데, 이는 HTML, JavaScript, CSS이다. 각각은 웹에서 아래 역할을 맡고 있다. HTML: 내용, 구조 CSS: 디자인 JavaScript: 프로그래밍 언어 조금 더 자세히 보자면..

Javascript 2022.04.27

console.log 과 return의 차이. 함수란?

console.log 화면(콘솔)에 출력하는 기능. 코딩을 확인하거나 디버깅을 위해 사용됨 변수에 할당 불가능 return 자바스크립트 언어 함수에서 값을 반환함 변수에 할당 가능 하지만 반환, return이라는 말이 와닿지 않는다. return은 무엇을 어디로 반환하는 건가? MDN에서 Return의 정의를 찾아보자. The return statement ends function execution and specifies a value to be returned to the function caller. 한국어로 번역하면, 아래와 같다. return은 함수 실행을 종료하고 함수 호출자에게 반환될 값을 지정한다. 1. 함수의 실행을 종료하고 즉 return은 함수에서 사용된다. 함수가 필요한 이유는 반복..

Javascript 2022.04.27

변수의 선언과 var, let, const 의 차이 (feat. 호이스팅)

함수를 선언하는 방법은 let 변수의 이름 = 데이터 이다. 하지만 구글링을 하다보면 let 이외에도 var, const로 변수를 선언하는게 보인다. 그 차이를 알아보자. var let const Global scope O X X Script scope X O O 함수 스코프 Functional local scope O O O 블록 스코프 Block scope : 함수, if, for, while, try/catch 문 등 X O O 재선언 O X X 재할당 O O X 재할당: 값이 바뀔 수 있는냐 없느냐 재선언: var는 재선언이 가능해서 엄격하지 않기 때문에 소프트웨어가 쉽게 망가질 수 있음, let, const는 재선언 불가 let이 var보다 무엇이 좋아졌나? var는 global scope에 들..

Javascript 2022.04.27

변수의 이름 컨벤션 (Variable naming convention)

주의점 대소문자 구문 변수이름, 함수이름, 연산자 모두 대소문자를 구분합니다. 따라서 myName과 MyName은 다른 변수입니다. 변수 이름을 정할 때, 첫 번째 문자는 반드시 글자나 밑줄(_), 달러기호($)중 하나 입니다. 두 번째 문자부터는 글자, 밑줄, 달러, 숫자 중에서 자유롭게 쓸 수 있습니다. 변수이름, 함수이름 등 camelCase(카멜케이스) 방식으로 쓸 것. snake_case 표현법도 있지만 잘 사용하지 않음(변수이름에 -는 사용할 수 없으므로, _를 사용한 것) 변수의 이름을 작성하는 방식 중 가장 흔한 방식 camelCase(카멜 케이스) : 첫 문자는 소문자 그 뒤로 단어를 구분하기위해 대문자 let someVariable; let anotherVariableName; let ..

Javascript 2022.04.23