for문
: 조건이 true면 코드 실행
for (let i = 0; i < n; i++) {
...
}
for (let i = 0; i < 3; i++;) {
alert(i);
}
continue;
: 현재 반복문을 빠져나온다. (다음 반복으로 넘어간다.)
for (let i = 0; i < 10; i++) {
if ( i % 2 == 0) continue; // 짝수면 반복 중단, 다시 위의 for문으로 올라간다.
alert(i); // 1, 3, 5, 7, 9를 출력
}
in문
: key 값이 object(객체) 안에 있는지 확인
key in object
- prototype(부모) 안에 내용까지 확인해줌
(객체의 속성(property) 포함 여부 확인)
const javaScript = {
creator: 'Brendan Eich',
createAt: '1995.05',
standardName: 'ECMAScript',
currentVersion: 2023,
};
console.log('valueOf' in javaScript); // true
hasOwnProperty
: key 값이 객체 자신의 속성인지 확인하는 방법
객체.hasOwnProperty('키값')
- (in문과는 달리) 객체 안의 내용만 정확하게 확인 O
- 그러나 객체의 속성이 덮어쓰여질(훼손될) 위험이 있다.
javaScript.hasOwnProperty('key');
call()
: 다른 메서드 빌려쓰기
Object.prototype.hasOwnProperty.call(객체, '키값')
- 객체의 속성이 덮어쓰여질(훼손될) 위험이 적음👍
Object.prototype.hasOwnProperty.call(javaScript, 'key')
✨ 결론
☝ 자바스크립트 객체에서 in문을 사용하면 속성(사돈의 팔촌까지)까지 확인해서 찾음
☝ 원하는 값만(사돈의 팔촌까진 X) 찾으려면 hasOwnProperty를 사용하면 되는데, hasOwnProperty만 사용하면 훼손될 위험이 큼
👉 call()을 통해 우회적으로 메서드를 빌려씀
for of문
: 배열을 하나씩 반복하면서 엘리먼트를 하나씩 전개
- 이터러블 요소(문자열, Node List 등)에 사용 가능
- 이터러블 오브젝트를 대상으로 함
for (변수 선언 of 객체) {
...
}
const list = [1, 2, 3];
for (let value of list) {
console.log(value);
}
/*
1
2
3
*/
Object를 for-of로 전개할 수 있는 방법
- Object.keys()로 프로퍼티 이름을 배열로 만듦
- 만든 배열을 for of문으로 전개
const sports = {
soccer: '축구',
baseball: '야구',
};
const keyList = Object.keys(sports);
for (let key of keyList) {
console.log(key + ': ' + sports[key]);
// soccer: 축구
// baseball: 야구
}
✨ 객체 내부에 (Symbol.iterator)가 있으면 [for of문] 사용 가능⭕
for in문
: 객체를 넣으면 객체의 key를 순환함
- 변수 👉 순환되는 객체를 담을 변수
- 열거 가능한 프로퍼티를 대상으로 함
for (변수 선언 in 객체) {
...
}
- value값 확인하기
객체[키]
console.log(javaScript[key]);
- 배열도 순회할 수는 있으나 사용 ❌
- 배열의 정확한 순서를 보장해주지 않음 ❌
- 성능 저하 ⬇
const tens = [10, 100, 1000, 10_000];
for (let key in tens) {
console.log(key); // key 값
console.log(tens[key]); // value 값
}
예시
const javaScript = {
creator: 'Brendan Eich',
createAt: '1995.05',
standardName: 'ECMAScript',
currentVersion: 2023,
hasOwnProperty() {
return '에휴'
}
};
// 훼손된 객체 내용
Object.prototype.nickname = '호랑이';
for (let key in javaScript) {
// 조상에 있는 nickname도 뜨는 것을 제거하기 위한 코드
if (Object.prototype.hasOwnProperty.call(javaScript, key)) {
console.log(key); // key값 확인
console.log(javaScript[key]); // value값 확인
}
}
/* 출력 결과
creator
createAt
standardName
currentVersion
hasOwnProperty */
✨ prototype에 메서드를 추가했는데 특정 메서드만 조회되는 이유
👉 enumerable(열거 가능한) 속성과 아닌 속성이 나눠져있기 때문
- 옵션을 사용하면 조회가 가능하게 만들 수 있음
const obj = {}
obj.nickName = 'tiger'
// 속성 1개 정의
Object.defineProperty(obj, 'age', {
value: 30,
enumerable: true,
writable: false,
configurable: true
})
// 속성 여러 개 정의
Object.defineProperties(obj, {
age: {
value: 30,
enumerable: true,
writable: true
}
})
forEach
: 배열의 요소(아이템)를 각각 반복을 도는 반복문
배열.forEach(콜백 함수(item[, index, arr])) {
...
}
- 값 반환 ❌
- item 👉 순환할 배열의 요소
[1, 2, 3].forEach(function(item) {
console.log(`${index} : ${item}`)
})
// 출력 결과
0 : 1
1 : 2
2 : 3
- 사용하지 않는 매개변수는 _로 표현
- item은 안 쓰고 index만 사용한다면 👉 (_, i)
- 그냥 자리만 채우고 불러오지 않는거임
// index만 사용
[1, 2, 3].forEach(function(_, i, _) {
console.log(`${index} : ${item}`)
})
- arguments는 유사배열이라 forEach문 사용 불가 ❌
✨ 유사 배열을 배열로 만들어서 반복문 수행하기(arguments ➡ array)
: 전개 구문(spread syntax)으로 arguments를 분해해서 배열로 만듦
[...arguments]
Array.from를 사용하기도 함
: arguments를 배열로 만들어줌(arguments ➡ array)
Array.from(arguments)
let calculateTotal = function () {
let total = 0;
const arr = [...arguments];
// 전개 구문(spread syntax)으로 arguments를 분해해서 배열로 만듦
// const arr = Array.from(arguments);
// Array.from(arguments) => arguments를 배열로 만들어줌
arr.forEach(item => {
total += item;
});
return total;
};
const result = calculateTotal(1000, 5000, 2500, 4000, 2300);
while과 for 반복문
ko.javascript.info