리코딩 : 자바스크립트(JavaScript) 20

자바스크립트 - 화살표 함수(Arrow Function)

점점 편리하게 살아가고 싶은 사람의 본심이랄까...? 함수 표현식, 함수 선언식을 쭉 써오다 보니, 함수를 작성하는게 그렇게 귀찮거나 복잡하다는 생각이 들지 않았다. 하지만 이 방법을 알게 되면서 새로운 세상에 눈을 떴다. 기록해보자! 화살표 함수는 단순하고 간결하게 함수를 작성할 수 있게 해준다. (물론 난 아직도 조금 어색...) let add = function(x, y) { return x + y; } 보통 우리는 함수를 이렇게 작성한다. 하지만 화살표 함수를 만나게 되는 순간 정말 놀랍도록 간결해 진다. // ex1 let add = (x, y) => { return x + y; } // ex2 let add = (x, y) => x + y; 3줄이었던 함수 코드가, 1줄로 표현이 가능해졌다. ..

자바스크립트 11. 배열메소드(2)

계속해서 메소드를 기록해보자! 첫 번째로 기록해볼 메소드는 forEach이다. forEach는 반복문과 마찬가지고 반복적인 기능을 수행할 때 사용한다. 하지만 for문 처럼 초기화, 조건식, 증감문을 작성하지 않아도 된다. let arr = [1, 2, 3, 4]; let result1 = []; for (let i = 0; i < arr.length; i++) { return result1.push(arr[i]) }; console.log(result1); // [1, 2, 3, 4] let result2 = []; arr.forEach(function (el) { return result2.push(el) }); console.log(result2); // [1, 2, 3, 4] 두개의 코드다 두개의..

자바스크립트 11. 배열 메소드

고차함수를 배웠으니까! 알아두면 유용한 배열 메소드를 기록해보자! (underbar과제인데 정말 정말 정말 정말 쉽지 않았다구....) 먼저 slice부터 기록해보자! let arr = ['s', 't', 'a', 'r', 'b']; // arr.slice([start], [end]) arr.slice(0, 2); // ['s', 't'] slice에는 인덱스 값을 주어서 시작하는 인덱스 번호(start)를 포함하고, 끝 번호(end)를 제외한 사이에 있는 요소를 리턴한다. 위의 코드는 배열을 0번째 인덱스 요소를 포함하고 2번 이전에 있는 요소를 리턴했다. slice경우에는 기존의 배열의 건드리지 않으면서 배열을 조작해 새로운 배열을 만들 때 유용하다. let arr = [1, 2, 3, 4, 5]; ..

자바스크립트 9. Scope(범위)

처음에 Scope에 대해서 배울 때 쉽지 않았다.... 그래도 최선을 다해서 기록을 남겨보자. 먼저 코드를 통해서 살펴보도록 하자! let greeting = 'Welcome'; // global scope function greetUnknown() { // local scope let name = 'Unknown'; return greeting + ' ' + name; } // local scope greetUnknown(); // 'Welcome Unknown' name; // ReferenceError, global scope 위의 코드를 살펴보고 함수를 실행하게 되면 아름답게 'Welcome Unknown'을 반환해준다. 하지만 name을 실행하게 되면 Error가 띄게 된다. 즉, name이라는..

자바스크립트 8.1 Spread 문법 (전개문법)

이전에 매개변수를 기록하면서 매개변수를 Rest Parameter를 활용해서 배열로 받아왔다. 그러면 반대의 경우인 배열을 통째로 매개변수에 넘기려면 어떻게 해야하는지 기록해 보자! function showNatoAlphabet(a, b, c) { console.log(a); // Alpha console.log(b); // Bravo console.log(c); // Charlie } let arr = ['Alpha', 'Bravo', 'Charlie']; showNatoAlphabet(...arr); 먼저 함수를 하나 만들어 주었다. 이 함수는 매개변수 하나하나를 찍어주는 함수를 만들었다. 그리고 나서 배열을 하나 만들어 주었다. 그리고 마지막에 함수를 실행시켜 주었는데, '...'을 활용해 주었다...

자바스크립트 8. 매개변수(Parameters)

오늘은 자바스크립트 매개변수에 대해서 기록해보자. function timeToGoCafe (speed, distance) { // () 소괄호 안에 들어가는 것이 매개변수, 여기서는 speed와 distance let time = distance / speed; return time; } timeToGoCafe(10, 100); // 여기 ()소괄호 안에 들어가는 것을 전달인자(arguments)라고한다. 전달인자가 아름답게 갯수에 맞게 들어간다면 얼마나 좋을까? 그런데 만약에 전달인자의 길이가 유동적이라면? 어떻게 해야할까? 이럴 때는 Rest Parameter를 이용해서 매개변수를 지정해준다. 이 때 매개변수는 배열의 형태로 전달된다. function numbers(...nums) { console...

자바스크립트 6.1 배열, 객체의 반복문

반복문을 배열과 객체에는 어떻게 사용하는지 기록해보자! 먼저 배열에서 반복문을 어떻게 사용하는지 봅시다아~ let arr = ['apple', 'bee', 'cookie', 'doll'] ; //1번 반복문 for (let i = 0; i < arr.length; i++) { console.log(arr[i]) }; //2번 반복문 for (let el of arr) { console.log(arr[el]) } /* apple bee cookie doll */ 두개의 반복문 다 밑에 있는 주석처럼 하나씩 해당하는 배열의 요소를 뱉어낸다. 1번 반복문 코드는 반복문에서 봐서 쉽게 이해가 되지만 두번째 반복문은 처음보는 형태이다. 두번째 반복문은 for...of을 사용하고 있다. 하지만 결국 두개의 반복문 ..

자바스크립트 7. 객체(Object)

만약에 해리포터에 대한 자료와 정보를 넣고싶을 때, 어떻게 정리하면 좋을까? 1. 일일이 해당하는 정보들을 선언하고 할당한다. 2. 배열을 만들어서 줄줄이 설명한다. 1번은 너무 귀찮고 정보의 양도 많아지고 보기 힘들 것 같고, 2번의 경우에는 1번보다는 조금 정리가 되있겠지만, 정보를 부를때 각각의 index의 값을 알아야 하기때문에 활용도가 떨어진다. 정보나 자료를 정리할 때 좋은 방법은 객체 인것 같다. 객체는 키(key)와 값(value)이 쌍(property라고 부른다)으로 이루어져 있다. let HarryPotter = { birthday : "1980-07-31", pureBlood : false, job : 'Auror', graduatedSchool : 'Hogwarts', hogwart..

자바스크립트 6. 반복문 탈출!

여기서 '탈출'은 공부가 끝나서 자유로운 몸이되어, 굴레와 속박을 벗어나 나의 행복을 찾아가는 그림이라기 보다는 반복문이 하염없이 돌아가면 비싸게 주고 무이자 할부를 때려가면서 산 노트북이 미쳐날뛸수 있으니 어떤 조건을 주어서 탈출을 시켜주자 그런의미다...(이미 코딩에 발을 들인순간 탈출은 없다.) 반복문이 계속 끈임없이 돌다가는 내 노트북도 돌아버릴 수 있으니, 반복문을 빠져나가는 방법을 기록해보자! 반복문을 빠져나오는 방법은 'break'와 일정부분을 건너뛰는 'countinue'가 있다! let i = 0; while (i < 10) { if (i === 5) { break; } i = i + 1; } console.log(i); // 5 코드를 살펴보면, while문을 작성해 주었고, if문에 ..

자바스크립트 6. 반복문

for... while... 내가 알던 그 의미가 아닌데...? 1에서 10까지 더한다고 생각하면 1+2 해주고 다시 코드써서 이전에 구했던 녀석을 불러서 3을 더해주고... 이렇게 반복적으로 무언가를 해야하는 상황에 부딪힌다. 이때마다 코드를 새로 짜준다면 나는 아마 대머리가 될꺼야!!! 머리아파!! 다행히도 우리에게는 '반복문'이라는 기회가 주어졌다. 기록해보자! 배운 반복문은 'for'과 'while'에 대해서 배웠다. 반복문에는 초기화(begin), 조건식(condition), 증감문(step)이 들어가게 된다. let sum = 1; for (let n = 0; n