개인 공부용 블로그

1. for 문 특징 배열을 반복문으로 순회해 값과 인덱스에 접근해야 하는 경우 for 또는 forEach문 사용 arrayList, array는 for문을 사용하면 성능면에서 빠르다. 단점 for문의 로직이 간단하지 않을 경우 코드 분석이 어려울 수 있다. For-each문은 For문 보다 얼마나 빠를까? 2. forEach문 문법 array.forEach( function( currentElement, index, array ){ }); currentElement : 처리할 현재 요소 index: 처리할 현재 배열 요소의 인덱스 array: forEach()를 호출한 배열 반환값: undefined 특징 자신의 내부에서 반복문 실행 배열의 경우 forEach문 사용 인덱스에 접근할 수 있다. 배열을 ..

See the Pen continue, break by limhaneul2244 (@limhaneul2244) on CodePen. continue문이란? 해당 조건문 블록을 빠져나와 아래 명령문을 실행하지 않고, 다음 반복문 실행 절차를 수행한다. continue문을 사용하게 되면 for문의 조건식이 i < 10으로 되어 있지만 if문에서 i === 5와 같게 되면 해당하는 조건만 제외하고 다음에 이어지는 반복문은 진행하게 된다. break문이란? break; 적어준 곳에서 해당 조건문 블록과 그 밖의 반복문 자체를 빠져나온다. for문이 돌면서 if문의 조건식을 만났을때 (즉, 5와 같아질때 그 조건식을 빠져나온다.) 그래서 for문의 조건식을 i

결과 계산하기 switch문 switch문 --> if문으로 바꿔보기 더하기 연산자는 숫자가 문자열로 바뀌기 때문에 parseInt를 써서 숫자로 변환해야 한다. 빼기, 곱하기, 나누기는 문자열이 숫자로 바뀌기 때문에 parseInt를 쓰지 않아도 된다고 한다. (하지만 헷갈리기 때문에 써주는게 나을것 같다...ㅎㅎ) 계산기 초기화 See the Pen 계산기 만들기 by limhaneul2244 (@limhaneul2244) on CodePen. 연관글 계산기 만들기1/2

계산기 만들어보다가 if문 코드 중첩을 줄이는 방법은 따로 빼서 작성하는게 나을 것 같아서 작성함. [JavaScript] 계산기 만들어보기 중첩을 제거하는 방법 1. if문 다음에 나오는 공통된 절차를 각 분기점 내부에 삽입 !operator인데 수정이 안되었네요! 2. 분기점에서 짧은 절차부터 실행하게 if문을 작성한다. 1번 절차에서 짧은 절차는 numOne이다. if 문 안으로 이동함과 동시에 operator는 값이 비어있어야 하므로 !를 없앤다. 3. 짧은 절차가 끝난 뒤 return(함수 내부의 경우)이나 break(for문 내부의 경우)로 중단한다. retur문이 나온 뒤에는 else를 사용하지 않아도 된다. 4. else를 제거한다(이때 중첩 하나가 제거됨). 5. 다음 중첩된 분기점이 나..

순서도 만들기 계산기 모양 코딩하기 7 8 9 + 4 5 6 - 1 2 3 / C 0 = x **readonly는 읽기 O, 쓰기 X 숫자와 연산자를 저장할 수 있는 변수를 만들고, 각 버튼마다 동작할 수 있도록 addEventListener를 달아준다. let numOne = ''; let operator = ''; let numTwo = ''; const $operator = document.querySelector('#operator'); const $result = document.querySelector('#result'); //저장한 값을 화면에 출력하기 위한 변수 document.querySelector('#num-0').addEventListener('click', () => {}); do..

조건 조건1. 3글자인가? 조건2. 제시어가 비어 있는가? 조건3. 첫 제시어의 마지막 글자와 새로운 단어 첫 글자가 일치하는가? (바나나 -> 나머지) 조건4. prompt를 취소했을 때 실행이 되지 않게 하였는가? HTML5 1번째 참가자 제시어: 입력 JavaScript const numberOfPeople = parseInt(prompt('참가 인원이 몇명인가요?')); const $button = document.querySelector('button'); const $input = document.querySelector('input'); const $word = document.querySelector('#word'); const $order = document.querySelector('#..

순서도 그려보기 순서도에 따라 입력해보기 const number = parseInt(prompt('몇 명이 참가하나요?')); const $button = document.querySelector('button'); const $input = document.querySelector('input'); const $word = document.querySelector('#word'); let word; //제시어 let newWord; //새로 입력한 단어 const onClickButton = () => { if(!word) { //제시어가 비어 있는가? //예 >> 공란이다. } else { //아니오 >> 공란이 아니다. } }; const onInput = (event) => { newWord = ..

객체는 여러개의 변수를 하나의 변수로 묶을 때 사용한다. 객체는 원시값(숫자, 불값)을 제외한 나머지값은 객체(object)이다. const name = 'aaa'; const year = 2000; const month = 9; const date = 15; const gender = 'F'; 사람의 정보를 객체를 사용하면 아래처럼 묶을 수 있다. const user = { name : 'aaa', year : 2000, month : 9, date : 15, gender : 'F', }; 📌객체 리터럴의 { } 는 블록 스코프를 의미하는 것이 아니다. 그렇기 때문에 닫는 중괄호 끝에 ; (세미콜론)을 붙여주어야 한다. 기본 형식 const 객체 = { 속성이름1 : 속성값1, 속성이름2 : 속성값2,..

function a(parameter) { console.log(parameter); } a('argument'); //argument 매개변수와 인수의 값은 일치하지 않아도 된다. z의 값은 undefined 로 출력된다. .📌화살표 함수 안에서는 arguments를 사용할 수 없다. (function 함수 선언식에서만 사용이 가능하다) ++21.10.09 추가 인자 활용하기 알림창 닫기 열기1 열기2 function btnDisplay(displayType, color, txt){ document.getElementById('btn').style.display = displayType; document.getElementById('btn').style.color = color; document.get..

함수 기본 형식 function () {} //또는 () => {} function이라는 예약어 사용하거나 => arrow function(화살표 함수) 사용 function a() {} //함수 선언문 const b = function() {}; //함수 표현식 const c = () => {}; //화살표 함수 📎함수 선언문 : function 키워드 뒤에 함수 이름을 넣는 방식 📎함수 표현식 : 상수나 변수에 대입하는 방식 function a() {} //선언하다 a(); //호출하다 (call) 함수를 사용하는 행위 -> 호출한다(call) return문 return명령문에 도달하면 그 값을 반환한다. c의 반환값은 hello이므로 hi는 실행되지 않는다. hi위에 return문이 실행되어 Hel..