filter()란?filter라는 이름에서 알 수 있듯이 배열 속에서 필요한 것들만 남길 수 있게 해줍니다. 물론 이런 상황은 for문을 통해서 처리될 수 있습니다. const len3 = []; const arr = ["lemon", "candy", "hot", "pie"]; for(let i=0; iconst beverage = [ {name: "아메리카노", price: 3700}, {name: "카페라떼", price: 4200}, {name: "쟈스민", price: 3000}, {name: "프라푸치노", price: 5100}, {name: "카페모카", price: 4400} ]; 음료에 대한 정보가 담긴 배열입니다. 이 배열을 예시로 filter 메소드를 사용해보겠습니다. 제 카드 잔액이..
새로 추가된 배열 메소드인 mapmap은 배열을 변형합니다. 전체를 바꾸기도 하고, 조건에 따라서 부분만 바꾸기도 합니다. 반복문 등을 이용하지 않고도 간단하게 새로운 배열을 만들 수 있습니다. 얼마나 편리한 지 코드로 확인해볼까요? const num = [2, 4, 6, 8, 10]; const num1 = num.map(x => x+1); num이란 배열엔 짝수가 들어있습니다. 다 홀수가 들어있는 배열을 만들려면 어떻게 해야할까요? num 배열의 요소에 1씩을 더하면 홀수가 됩니다. map은 콜백함수를 받습니다. 콜백함수는 매개변수로 현재의 값, 현재 인덱스, 배열 전체를 받습니다. num1을 확인하면 [3, 5, 7, 9 ,11]이라는 배열이 들어있는 것을 볼 수 있습니다. map은 사본을 반환하며..
배열이란?배열은 순서를 가진 객체입니다. 간단히 말하자면 여러가지 데이터들을 인덱스라는 순서로 저장해두는 것이 배열입니다. const arr = [1, "name", 5, "age", 17.2]; arr[0]; // 1 arr[1]; // "name" 대괄호 안에 인덱스를 넣으면 저장된 데이터를 알 수 있었습니다. 오늘은 배열 내에서 필요한 데이터를 찾는 방법을 알아보겠습니다.indexOf / lastIndexOfindexOf는 찾고자 하는 값과 정확히 일치하는 첫 번째 요소의 인덱스를 반환합니다. 코드를 통해 알아보겠습니다. arr.indexOf(1) // 0이 나옴 arr.indexOf("age") // 3이 나옴 첫 번째 요소의 인덱스라고 적었듯이 만약 똑같은 값이 여러개 들어있다면 맨 처음의 값의..
스코프란 무엇일까요?스코프는 유효범위, 가시성(visibility) 이라고 불립니다. 단어만 봐서는 어려울 수도 있습니다. 예시를 들어서 좀 더 설명해보겠습니다. const x = 10; console.log(x); //10 { const y = 9; } console.log(y); //? 아주 간단한 코드입니다. x를 정의하고 x의 값을 물어보고, y를 정의하고 y의 값을 물어보았습니다. 하지만 코드를 실행해보면 x 값은 콘솔창에 나오는데 y 값을 물어보면 에러가 뜹니다. 분명히 y를 정의했는데 정의되지 않았다고 나오는 이유가 뭘까요? 바로 스코프 때문입니다. 블록({}) 사이에 y 값을 정의했기 때문에 블록 밖에서는 y가 정의되지 않았다고 뜬 것이죠. 유효범위나 가시성이라는 단어가 조금은 이해가시나요..
화살표 함수의 추가es6에서 추가된 화살표 함수를 통해서 기존 문법에서 조금 단축되고, 약간의 차이점들이 생겼습니다. 비교해가면서 하나씩 적어보도록 하겠습니다. const func = function(name){ console.log("hello " + name); }; func("lemon"); //hello lemon 기존의 함수표현식은 위와 같은 형태였습니다. 하지만 똑같은 내용을 화살표 함수로 적으면 어떻게 될까요? const func = (name) => { console.log("hello " + name); }; func("lemon"); //hello lemon function이라는 단어도 없애면서, 함수에 매개변수가 하나라면 괄호도 생략하셔도 됩니다. name => {}이라는 형태를 적어..
일반적인 매개변수의 형태매개변수는 함수에 들어가는 값입니다. function f(a, b, c){ return a + b + c; }; f();//NaN f("I ", "LOVE ", "JS");//I LOVE JS 위의 소스코드에서는 a,b,c가 매개변수에 해당됩니다. 일반적으로 함수를 호출할 때 매개변수가 정의할 때의 수와 다르면 그 매개변수의 값은 undefined의 값이 됩니다. 그래서 인수(매개변수)를 아무것도 넣지 않은 f()는 NaN이 되는 것입니다.배열의 구조분해를 매개변수에 활용우선 배열의 구조분해에 대한 기초가 필요하시면 아래 링크를 통해 공부하고 오시면 이해하기가 더 쉽습니다. 자바스크립트 배열의 구조분해 function f([one, two, three]){ return one + ..
for...of를 이용하자.배열과 객체 내에서 값을 꺼내야 할 순간은 많습니다. 하나만 꺼내면 될 때는 인덱스나 키 값을 넣어서 갖고오면 되지만 전체나 또는 어떤 조건으로 값을 추려내야 할 때는 반복문을 통해 값을 갖고옵니다. let arrs = ["arr1","arr2", "arr3", "arr4"]; for(let i=0; ilet arrs = ["김수한무","거북이", "두루미", "삼천갑자", "동방삭"]; for(let arr of arrs){ if(arr.length
확산연산자란?es6에서 추가된 문법으로 ...을 사용해서 배열의 나머지 값들을 받아오거나 편하게 확장시킬 수도 있습니다. 또 매개변수에도 활용가능합니다. let arr = [1, 2, 3, 4, 5]; console.log(...arr); 우선 arr이라는 배열 안에는 1~5까지의 숫자가 들어있습니다. 그리고 확산연사자를 통해서 콘솔에 값을 확인하면 어떻게 될까요? ...arr은 1 2 3 4 5라는 안 쪽의 값을 리턴합니다. 그리고 [...arr]처럼 배열리터럴을 하고 확산연산자를 쓰면 arr이라는 배열과 값이 같은 배열을 만들어 냅니다. 기본적으로 이 사실을 알면 쉽게 활용할 수 있습니다.배열에서의 활용위에서도 언급했지만 배열리터럴 안에서 확산연산자 + 배열명을 사용하면 쉽게 값이 똑같은 배열을 만들..
저번 포스팅에서는 객체의 구조분해를 다뤘습니다. 마지막 부분에는 객체와 배열을 혼합한 구조에서 구조분해는 어떻게 할 것인지도 다루니 혹시 객체 구조분해를 모르신다면 보고 오시는 것을 추천드립니다. 자바스크립트 객체의 구조분해배열 구조분해 하기 let arr = ["first", "second", "third"]; let [first, second, third] = arr; first와 second, third의 값을 확인하시면 각각 "first"와 "second", "third"의 값이 담겨 있는 것을 볼 수 있습니다. 객체를 구조분해 할 땐 객체 리터럴을 사용했지만 배열을 구조분해 할 땐 배열 리터럴을 사용합니다. 할당 연산자 왼쪽에 배열 리터럴이 오고, 할당연산자 오른쪽에 오는 값은 null이나 un..
저번 포스팅에서 객체에 키(key)로는 문자열만 들어갈 수 있다고 말했습니다. 하지만 es6에 심볼이라는 원시 타입이 생기면서 객체의 키로 심볼도 들어갈 수 있게 되었습니다.객체의 키(key)로 심볼(symbol) 넣기 const S = Symbol("this is symbol"); 심볼을 만드는 방법은 Symbol() 하나밖에 없습니다. 이제 객체에 다른 키-값들과 함께 넣어보겠습니다. const obj = { name: "lemon", S: "not symbol", [S]: "symbol" }; obj라는 객체에 세 개의 프로퍼티를 주었습니다. 그냥 S라고 적힌 key는 문자열이고, [S]라고 적혀 있는게 위에서 생성한 심볼입니다. 괄호를 하지 않으면 당연하게도 문자열로 인식해서 우리가 생성한 심볼이..