do-while 문
do 안의 내용을 while문의 조건에 해당할 때까지 출
let i = 0;
do {
console.log(i);
i++;
} while(i < 5);
ㄴ 0~4까지 출력, 5가 되면 끝난다.
do-while 사용법
document.querySelector로 html 파일을 읽어야하는 상황
const first = document.querySelector('.first'); //span의 클ㄹ스 태그
console.log(first)
defer를 사용하거나, html파일 맨 끝자락에 script 태그를 넣어서 자바스크립트가 위의 코드를 모두 로딩할 수 있도록 한다.
defer는 모든 로딩이 끝난 후 실행된다.
<선택한 요소의 다음 요소를 선택해보자>
dom에서 자바스크립트로 가져오는 querySelector를 사
first의 nodeType을 체크한다.
1번 노드타입은 엘리먼트노드(= 태그) 라는 뜻
fitst.nodeType
다음 형제요소를 체크하고 싶을 때
first.nextSibling
*한번 하면 공백이 나오기 떄문에
first.nextSibling.nextSibling 해줘야 second가 나온다.
let first = document.querySelector('.first'); //span의 클래스 태그
console.log(first);
do {
first = first.nextSibling;
} while(first.nodeType !== document.ELEMENT_NODE)
console.log(first);
ㄴ first에는 클래스명 first라고 하는 클래스의 태그를 넣는다.
ㄴ do 문에서는 first의 다음 형제 요소를 넣는다. (개행이 일어났다면 text값이 들어간다.)
ㄴ 이 때 다음 태그 요소를 담기 위해서 while문에 조건을 ELEMENT_NODE(태그요소) 가 아닐때는 계속해서 do 문장을 실행하도록 한다.
위의 예제 함수로 관리하기
let first = document.querySelector('.first'); //span의 클래스 태그
console.log(first);
function next(node) {
do {
node = node.nextSibling;
}while(node.nodeType !== 1) // 1 == ElementNode
return node;
}
const second = next(first);
console.log(second);
결과창
위의 예제 역방향 (previousSibling)
let second = document.querySelector('.second'); //span의 클래스 태그
function prev(node) {
do {
node = node.previousSibling;
}while(node.nodeType !== 1) // 1 == ElementNode
return node;
}
const first = prev(second);
console.log(first);
반복문 for
const frontEndDev = 'HTML CSS SVG JavaScript jQuery React Redux'.split(' ');
// split을 통해 배열로 만들어준다.
let i = 0;
let l = frontEndDev.length;
while(i < l) {
console.log(frontEndDev[i]); //배열 출력
i += 1;
}
반복문 for-in : 객체의 속성 포함 여부를 확인하는 방법
const js = {
creator: 'Brendan Eich',
createAt: '1995.05',
standardName: 'ECMAScript',
currentVersion: 2023,
};
// 객체의 속성(property) 포함 여부 확인 방법
const key = 'creator';
console.log( key in js );
ㄴ 'creator' key가 있으니까 true가 출력된다.
※부모의 속성까지 상속 받으니까 hasOwnPropety로 진짜 자신의 속성인지 확인이 가능하다.
console.log(js.hasOwnProperty(key));
ㄴ 자기가 갖은 키값들만 확인 가능하다.
주의사항!
만약, js 객체 내부에 동일한 hasOwnProperty를 정의한다면, js는 기존 내장 메서드인 hasOwnProperty를 보호해주지 않는다. 따라서 생성된 객체의 메서드로 덮어써지는. 그런 현상이 일어난다 (불안함)
const js = {
creator: 'Brendan Eich',
createAt: '1995.05',
standardName: 'ECMAScript',
currentVersion: 2023,
hasOwnProperty(){
return 나는 훼손을 시켜버렸다!
}
};
// 객체의 속성(property) 포함 여부 확인 방법
const key = 'valueOf';
console.log( key in js );
// - 모든 객체가 사용 가능하도록 속성이 확장되었을 때 포함 여부 결과는?
console.log(js.hasOwnProperty(key));
//자바스크립트는 hasOwnProperty를 보호해주지 않는다.
ㄴ 생성된 객체의 메서드는 불안하다. => 진짜 객체의 능력을 빌려 써야한다!!!
// 객체의 속성(property) 포함 여부 확인 방법
const key = 'valueOf';
console.log( key in js );
Object.prototype.hasOwnProperty.call(js, key);
//진짜 객체의 프로토타입의 hasOwnProprty를 빌려쓴다(call -> js에 있는 key라는 을 조회할거야 )!
조상의 메서드를 빌려쓰는 형태!
Object의 prototype에 있는!! hasOwnProperty를 불러다가 빌려쓰는 형태이다.
call-> js의 key라는값을 조회할게~ 라는 뜻. call(빌려쓰는 주체 , hasOwnProperty의 찐 인수);
<for-in을 사용한 키 탐색>
for (let key in js) {
console.log(key);
}
부모의 요소때문에 더럽혀진 것을 제외하기 위해서는
for (let key in js) {
if(Object.prototype.hasOwnProperty.call(js.key)){
console.log(key);
}
}
위에 나왔던 Object의 prototype hasOwnProperty.call을 사용하여 동일하게 존재하는지 확인 후 콘솔에 출력하면 순수한 객체의 key값만 확인할 수 있다!
for...of
반복 가능(iterable) 한 요소들에게 사용할 수 있다. (예를 들면 유사배열...)
//이터러블한 요소에만 of가 적용 가능하다! 문자열도 이에 해당
const str = '안녕하세요';
for(let key of str){
console.log(key);
}
const languages = [
{
id: 'ecma-262',
name: 'JavaScript',
creator: 'Brendan Eich',
createAt: 1995,
standardName: 'ECMA-262',
currentVersion: 2022,
},
{
id: 'java',
name: 'Java',
creator: 'James Gosling',
createAt: 1995,
standardName: null,
currentVersion: 18,
},
{
id: 'ecma-334',
name: 'C#',
creator: 'Anders Hejlsberg',
createAt: 2000,
standardName: 'ECMA-334',
currentVersion: 8,
},
];
// for ~ of 문
// - 특정 조건에서 건너띄기
// - 특정 조건에서 중단하기
for(let value of languages) {
const name = value.name;
if(name === 'Java') continue;
console.table(value);
}
※객체는 이터러블한 객체가 아니므로 for...of를 사용할 수 없다.
하지만 객체도 for...of로 순환한다.
->객체를 배열로 만들어버리기!
- Object.keys() : 객체의 key를 배열로 반환
- Object.values() : 객체의 value를 배열로 반환
- Object.entries() : key와 value 를 가진 하나의 쌍을 배열로 반환한다.
for(let keyvalue of Object.entries(randomUser)) {
console.log(keyvalue);
}
키만 추출하기 : keyvalue[0]
for(let keyvalue of Object.entries(randomUser)) {
console.log(keyvalue[0]);
}
키만 추출하기 : keyvalue[0]
벨류만 추출하기 : keyvalue[1]
for(let keyvalue of Object.entries(randomUser)) {
const key = keyvalue[0];
const value = keyvalue[1];
console.log(key, value);
}
함수는 최대한 지역변수에서만 사용해주는 것이 좋다!
ㄴ> 전역변수를 가져와서 사용 시 함수를 복사하거나 이동할때 전역변수까지 함꼐 이동해야하니까
디폴트 파라미터 (매개변수 값에 디폴트 값을 주는 것)
디폴트 파라미터를 이용해서 예외값을 처리해주는 것
논리연산자를 이용해서 예외값을 처리해주는 것
총합을 계산하는 함수
(예외 상황 생각하기)
// 함수 선언
function clacPrice(priceA, priceB, priceC, priceD) {
// if(!priceD) priceD = 0;
// priceD |= 0;
// priceD = priceD ?? 0;
if(!priceA||!priceB) {
throw new Error('calcPrice함수의 첫 번째와 두 번쨰 인수는 필수 입력값입니다. ')
}
let sum = priceA + priceB + priceC + priceD;
console.log(sum);
}
// 함수 호출
clacPrice(1000, 500, 1500, 3000) //argument
rem 변환 함수 만들어보기!
function rem(pxValue, base = 16){
if(!pxValue) throw new Error('rem 함수의 첫 번째 인수는 필수 입력 값 입니다.');
typeof pxValue === 'string' && (pxValue = parseInt(pxValue,10))
// if(typeof pxValue === 'string') pxValue = parseInt(pxValue,10);
// if(typeof base === 'string') base = parseInt(base,10);
return pxValue / base + 'rem'
}
// Test Driven Development (TDD)
console.assert(rem(20) === '1.25rem') // '1.25rem'
console.assert(rem('25px') === '1.5625rem')
base값을 고정으로 16으로 두는 것 주목!
