반복문 응용

김우성·2021년 8월 19일
0

JavaScript

목록 보기
11/17
post-thumbnail

반복문 응용



배열 반복

고정값 console.log(arr[]);

가변값 : 0, 1, 2 (1씩 증가하는 규칙)


var arr = ['바나나', '사과', '수박', '토마토', '배', '포도'];

for (var i = 0; i < 6; i++) {
	console.log(arr[i])
}


배열 안에 들어가있는 데이터 갯수가 많아서 수치를 모를 경우 범위를 설정하기 어려움

그래서 자바스크립트에서는 배열 안에 데이터의 갯수를 알려주는 property가 존재


length

데이터를 추가하더라도 추가된 데이터 갯수만큼 출력시켜준다


var arr = ['바나나', '사과', '수박', '토마토', '배', '포도'];

for (var i = 0; i < arr.length; i++) {
	console.log(arr[i])
}


for ~ in

배열에서 사용할 수 있는 또다른 반복문

arr이라는 배열에 접근할 때 i 자체가 배열의 좌표 역할

범위 지정할 필요없이 for in 자체가 범위가 되는것


var arr = ['바나나', '사과', '수박', '토마토', '배', '포도'];

for (var i in arr) {

	console.log(i);
	console.log(arr[i])
}


forEach

배열 안에 기본적으로 존재하는 메서드

for, for in과 같은 역할

인수로 무조건 함수가 들어가야함

매개변수로 ele와 i를 전달(매개변수 이름은 아무거나)

첫번째 매개변수 ele는 배열 안에 있는 데이터를 의미

두번째 매개변수 i는 데이터가 들어가있는 좌표를 의미


var arr = ['바나나', '사과', '수박', '토마토', '배', '포도'];

arr.forEach(function(ele, i) {
	console.log(ele);
	console.log(i);
})


foreach를 사용한다는 자체가 함수를 호출했다라는 이야기 (메서드를 호출한것)

이름이 없고 어떤 조건하에서 호출이 되는 함수를 익명함수, 콜백함수라고 했음

위에 인수로 전달되는 함수도 함수이름이 없고 foreach라고 하는 메서드를 사용했을때 첫번째 인수로 전달한 함수를 호출했기 때문에 콜백함수이다


map

map 메서드도 마찬가지로 콜백함수를 전달해주고 매개변수를 넣으면 같은 결과가 출력된다

마찬가지로 첫번째 매개변수는 데이터, 두번째는 데이터의 좌표이다


arr.map(function(elem, ind) {
	console.log(elem);
	console.log(ind);
})


forEach와 map의 차이점

map은 return을 사용할 수 있다

map을 사용한 어떤 값을 변환 시켜서 다른 변수에 전달할 수 있다는 의미


var arr = ['바나나', '사과', '수박', '토마토', '배', '포도'];

var resu = arr.map(function(elem, ind) {
	return elem + " " + "10";
});

console.log(resu);


1. arr.map()로 map을 호출

2. map은 return을 사용할 수 있기 때문에 return된 값은 다이렉트로 resu안에 할당이됨

3. 모든 데이터에 일괄적으로 공백과 10이 들어감

map 메서드를 사용하게되면 return을 사용해서 각각의 데이터에다가 일관된 값을 새롭게 삽입할 수있다.

map 전체를 return으로 받은 값은 지금처럼 배열형태로 출력, 다른변수(resu)에다가 전달할 수도 있다.

for each는 return 활용 불가




객체에서 활용할 수 있는 반복문

객체를 만들고 그 안을 name ~ skill property와 sum 메서드로 구성


var stude = {
	name: "Kim",
	age: 20,
	skills: ["자바스크립트", "HTML", "CSS"],

	sum: function(num1, num2) {
		console.log(num1 + num2);
	}
}

위 객체 안에 있는 값들을 반복문을 사용해 출력하고 싶을때

for 사용불가, for in 사용가능


for (var prop in stude) {

	console.log(prop);
	console.log(stude[prop]);
}


변수(prop)를 만들고 in 안에 탐색할 객체를 넣어줌

console.log로 prop과 객체안에 있는 데이터에 접근할건데 객체 안에 접근하는 방식이 두가지있음

student.name

student['name']

두 방식 모두 기억

prop은 key값(좌표값)

prop은 name, age, skills를 출력

stude[prop]은 값을 출력

profile
매우 긍정적인 개발자

0개의 댓글

관련 채용 정보