Array.prototype.map() 란?map은 배열 내의 모든 요소 각각에 대하여 제공된 함수를 호출하고, 그 결과를 모아서 새로운 배열을 반환하는 메소드입니다. 우리가 가져온 프로필 정보를 map 메소드를 통해서 컴포넌트에 다 전달해보도록 하겠습니다.map 메소드의 매개변수map 메소드는 현재 값, 인덱스(현재 처리되는 요소의 배열 내 인덱스), 본래 배열의 순서로 매개변수 값을 가집니다. 위의 예시를 보면 nums라는 배열에 1~5까지의 숫자가 들어있고, map을 통해서 인덱스를 곱한 새로운 배열을 만들어 냈습니다. 인덱스는 0부터 시작하니 [0, 2, 6, 12, 20]이라는 배열을 가지게 됩니다.renderProfile 함수 만들기map 메소드를 통해서 우리가 가져온 프로필들을 전달 받은 컴..
일반적인 매개변수의 형태매개변수는 함수에 들어가는 값입니다. 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 + ..
조건연산자란?자바스크립트에는 피연산자 3개(3항)를 필요로 하는 조건 연산자가 있습니다. 조건에 따라서 값이 할당됩니다. 삼항 연산자라고도 합니다. const foo = true; const bar = foo ? "true" : "false"; 물음표 앞에 있는 첫 번째 피연산자가 true(또는 참 같은 값)이면 :(콜론)의 왼쪽에 있는 값이 bar에 할당되고, false(또는 거짓 같은 값)이면 :(콜론)의 오른쪽에 있는 값이 할당됩니다.if...else문과 조건연산자if...else문을 통해서 변수의 값을 얻을 수 있습니다. const foo = true; let bar; if(foo){ bar = "true"; } else{ bar = "false"; }; 어떤가요? 위의 소스코드는 foo의 값에 ..
for...of를 이용하자.배열과 객체 내에서 값을 꺼내야 할 순간은 많습니다. 하나만 꺼내면 될 때는 인덱스나 키 값을 넣어서 갖고오면 되지만 전체나 또는 어떤 조건으로 값을 추려내야 할 때는 반복문을 통해 값을 갖고옵니다. let arrs = ["arr1","arr2", "arr3", "arr4"]; for(let i=0; ilet arrs = ["김수한무","거북이", "두루미", "삼천갑자", "동방삭"]; for(let arr of arrs){ if(arr.length
es6에서의 객체 문법 추가function func(name, content){ return { name: name, content: content } }; 위의 함수는 함수의 매개변수인 name과 content를 받아서 name과 content라는 같은 이름의 프로퍼티를 가진 객체를 리턴합니다. es6에서는 매개변수 이름과 객체의 프로퍼티가 같을 시에 중복을 제거할 수 있도록 수정되었습니다. function func(name, content){ return { name, content } }; name과 content가 중복이 사라지고 한 번 적은게 보이시나요? { name : name, content : content }가 {name, content}로 변했다는 것을 미리 알아두시면 객체의 구조분해를..
배열이란? 배열도 객체와 같이 여러가지 값들을 저장할 수 있습니다. 객체와 다른점은 순서가 있다는 것입니다. 네! 배열은 바로 순서가 있는 객체입니다. 그리고 많은 값들을 한 곳에 저장할 때도 아주 유용하게 쓰일 수 있습니다. 배열 선언하기 let arr = ["컴퓨터", "티비", "냉장고"]; 배열은 위와 같은 형태로 선언합니다. 대괄호 사이에 값을 적고, 값 끼리는 ,로 구분합니다. 지금은 문자열로만 채웠지만 숫자, 또 다른 배열, 객체 등 모든 값들을 넣을 수 있습니다. let arr2 = new Array("컴퓨터", "티비", "냉장고"); arr2처럼 선언하는 방법도 있습니다. 둘 다 배열을 만들지만 첫 번째 방법이 더 쉽기 때문에 많이 쓰입니다. 첫 번째 방식처럼 직접 값을 넣는 방법을 리..
저번 포스팅에서 객체에 키(key)로는 문자열만 들어갈 수 있다고 말했습니다. 하지만 es6에 심볼이라는 원시 타입이 생기면서 객체의 키로 심볼도 들어갈 수 있게 되었습니다.객체의 키(key)로 심볼(symbol) 넣기 const S = Symbol("this is symbol"); 심볼을 만드는 방법은 Symbol() 하나밖에 없습니다. 이제 객체에 다른 키-값들과 함께 넣어보겠습니다. const obj = { name: "lemon", S: "not symbol", [S]: "symbol" }; obj라는 객체에 세 개의 프로퍼티를 주었습니다. 그냥 S라고 적힌 key는 문자열이고, [S]라고 적혀 있는게 위에서 생성한 심볼입니다. 괄호를 하지 않으면 당연하게도 문자열로 인식해서 우리가 생성한 심볼이..
저번 시간까지 변수에 대해서 배웠습니다. 오늘부터는 변수에 어떤 값들이 들어갈 수 있는 지에 대해서 알아볼 시간입니다. 자바스크립트에서 값으로 들어갈 수 있는 데이터 타입은 두개로 나뉘어 집니다. 바로 원시 타입과 객체(참조 타입)입니다. 원시 타입 이란? 원시 타입이란 말이 어려울 수도 있습니다만 기본 타입이라고 간단하게 생각하면 됩니다. 원시 타입의 특징 중의 하나는 불변성(immutable)입니다. 이 부분에 대해서 의문이 있을수도 있을 것이라고 생각합니다. 저번시간에 배운 const라면 값을 수정하는데 에러가 떳지만 let이나 var의 경우엔 undefined에서 문자를 갖게 되기고 했고, 숫자가 되기도 했으니까요. 하지만 이런 수정은 변수에 다른 값을 대입하는 것이었을 뿐 기존의 값을 변경하는 ..
지난 포스팅에서 변수를 배웠습니다. var라고 하고 식별자를 쓰고 등호를 통해 값을 할당했습니다. 오늘은 에크마스크립트6(es6)를 통해 새롭게 추가된 let과 const를 다룰 예정입니다. 난이도가 좀 있으니 이해가 안되시면 그냥 넘어가시면 됩니다. 변수에 대한 전반적인 설명을 보시려면 아래 링크를 클릭해주세요. 자바스크립트의 변수var를 대체할 let과 const에 대해 알아보기 우선 let은 변수를, const는 상수를 의미한다는 것을 알아두셔야 합니다. var와 let, const는 각각 어느 차이가 있는지 지금부터 하나씩 알아보도록 하겠습니다. 실습은 콘솔창에서 진행하시면 됩니다. var x = 3; console.log(x + " : " + y); var y = 7; 위의 소스코드를 콘솔창에서..