020 _ 자바스크립트에서 숫자 다루기 [적용] 자바스크립트에서 수를 계산하고 싶을 때 [내용] 숫자는 자바스크립트의 기본 데이터 타입 중의 하나로 정수와 소수(실수)를 사용하며, 타입은 Number이다. const a = 10; // 결과: 10 const b = 1.23; // 결과: 1.23 const c = -5; // 결과: -5 [수의계산] 수의 계산으로 다음과 같은 작업이 가능하다. 작업 예시 수학 계산하기 10의 2승 계산하기 어림 계산하기 세금을 포함한 금액을 정수로 산출하기 삼각 함수 다루기 애니메이션의 궤적 구하기 임의의 수(random) 다루기 애니메이션에 임의 값(움직임) 부여하기 [진수의 표현] 자바스크립트에서는 10진수 외에도, 2진수, 8진수, 16진수 등의 표현이 가능하다...

019 _ 자바스크립트에서 진위 여부(true or false) 판별하기 (Boolean) [적용] 브라우저 버전에 따라 알림창을 띄우고 싶을 때 입력 항목에 따라 확인 버튼을 무효화하고 싶을 때 [내용] A 조건의 경우 A 작업, B 조건의 경우 B 작업 등 조건에 따라 처리를 구분하는 것은 프로그래밍의 필수 요소이다. 자바스크립트의 데이터 타입 중 하나인 Boolean은 참과 거짓의 진위 여부 판별을 위한 데이터 타입이다. [예시1] 다음의 예제코드를 통해 boolean 데이타 타입의 사용을 확인해보자 JavaScript const a = 10; const b = 20; console.log(a b); // 결과: false [예시2] 주로..

018 _ 자바스크립트 반복 처리 스킵 (continue) [적용] 반복 처리 중 특정 조건에 대해 스킵하고 싶을 때 for문은 루프 중 처리를 스킵하고 싶을 때 [내용] for문과 while문의 반복 처리 작업 중 일부 상황에서 처리 작업의 예외가 필요할 때가 있다. continue문을 사용하면 해당 루프의 작업을 실행하지 않고 다음 루프로 넘어간다. [문법] 구문 의미 continue for문 루프 중 처리 스킵 [예시1] index가 홀수인 경우에만 출력을 실행하는 코드를 통해 continue의 사용을 확인해 보자. continue의 적용 범위는 for문의 {} 내부이다. JavaScript for (let index = 0; index < 10; index++) { if (index % 2 ===..

017 _ 자바스크립트 반복문 사용하기 (while) [적용] 일정 조건을 충족할 때까지 반복 처리를 사용하고 싶을 때 [내용] while문은 조건을 만족하면 계속 반복 작업을 한다. for문과 유사하나 while문은 반복 조건만을 지정한다. 그러므로 코드를 통해 반복의 종료 시점을 지정해야 한다. [문법] 구문 의미 whiel (반복조건) { 반복처리내용 } 반복 작업 처리 [예시] myNumber 변수의 값이 10 이상이 될 때까지 +1을 반복 실행하는 코드를 만들어 보자. JavaScript let myNumber = 0; while (myNumber < 10) { console.log(myNumber); myNumber += 1; } [실행결과] 참조 : 실무에 바로 적용하는 자바스크립트 코드레시..

016 _ 자바스크립트 반복문 사용하기 (for) [적용] 반복 처리 작업을 하고 싶을 때 [내용] for 문은 반복 작업을 처리하며, 대량의 데이터를 처리하거나 배열을 다룰 때 유용하다. [문법] 구문 의미 for (초기화; 반복문 조건; 반복 중 처리 구문) { 반복처리내용 } 반복 작업 처리 [예시] for문을 사용하여 0부터 9까지 출력하는 코드를 만들어보자 JavaScript // 0~9까지 순서대로 출력 for (let index = 0; index < 10; index++) { console.log(index); } [실행결과] for문의 초기화는 반복 작업에서 처음 실행하는 내용을 삽입한다. 위의 예제코드에서는 'let index = 0;'으로 index변수에 0을 대입한다. 반복문 조건은..

015 _ 자바스크립트 조건문 사용하기 (switch) [적용] 조건을 만족하는 다수의 데이터를 처리하고 싶을 때 [내용] switch문은 조건을 만족하는 데이터를 처리하는 작업을 실시한다. [문법] 구문 의미 switch (식) 식에 따라 처리를 분기 case 값: 처리 내용 해당 조건 만족 시 처리 default: 처리 내용 만족하는 조건이 하나도 없는 경우의 처리 [예시1] switch문의 () 안 값과 case의 값이 일치할 경우에만 해당 case의 처리가 실행된다. case의 값 뒤에는 '콜론(;)'을 붙인다. 상수 myFruit의 값에 따라 알림창을 띄우는 샘플 코드를 확인해 보자. JavaScript const myFruit = '사과'; switch (myFruit) { case '사과':..

014 _ 자바스크립트 조건문 사용하기 (if) [적용] 조건을 만족하는 데이트를 처리하고 싶을 때 [내용] 프로그램의 내부 구조를 확인해 보면 조건에 따른 처리가 이루어지는 작업이 많다. 자바스크립트는 'if/else'를 사용하여 조건에 따른 처리가 가능하다. [문법] 구문 의미 if (조건1) {처리1} 조건1 O -> 처리1 실행 else if (조건2) {처리2} 조건1 X, 조건2 O -> 처리2 실행 else {처리3} 조건1 X, 조건2 X -> 처리3 실행 [예시1] 상수의 값에 따라 세 종류의 알림창을 띄우는 샘플 코드를 살펴보자. 상수 myPrice에 100을 대입하면, 'myPrice >= 50'은 참이 되므로 if 문의 처리 내용이 실행되고 else if 와 else문은 실행되지 않..

013 _ 자바스크립트 다수의 파라미터(인수)를 가지는 함수 정의하기 [적용] 임의의 파라미터를 가지는 함수를 정의하고 싶을 때 [내용] 정해지지 않은 파라미터의 개수를 가지는 함수는 '...'을 이용하여 '...파라미터'와 같은 방식으로 정의한다. 입력받은 파라미터는 인덱스를 이용하여 파라미터[0], 파라미터[1],의 방식으로 사용하며, 이와 같은 정의 방식을 '나머지 파라미터(Rest Parameter)'라고 한다. [문법] 구문 의미 function 함수명(...파라미터) {} 파라미터의 개수가 미정인 함수를 정의 (...파라미터) => {} 파라미터의 개수가 미정인 함수를 정의 파라미터[인덱스] 인덱스를 지정해서 파라미터를 사용 [예시] 파라미터의 합계를 반환하는 함수 샘플을 통해 사용법을 확인해..

012 _ 자바스크립트 함수의 파라미터(인수) 초기값 설정하기 [적용] 함수 파라미터의 초기값을 설정하고 싶을 때 함수 파라미터를 생략 가능하도록 설정하고 싶을 때 [내용] 함수의 파라미터에 '파라미터 = 값'을 사용해 파라미터의 초기값을 설정할 수 있다. 초기값이 설정된 파라미터는 값을 전달받지 않으면 초기값을 사용하는데, 이를 '디폴트 파라미터'라고 한다. [문법] 구문 의미 function 함수명(파라미터1, 파라미터2=초기값2, 파라미터3=초기값3) {} 함수에 값 전달 (파라미터1, 파라미터2=초기값2, 파라미터3=초기값3) => {} 함수에 값 전달 [예시] 예시 코드를 통해 세금을 포함한 가격을 계산하는 코드를 확인해보자. calcFunction()의 두 번째 파라미터인 tax에 0.1의 초..

011 _ 자바스크립트 화살표 함수(Arrow Function) 사용하기 [적용] 함수를 간략히 정의하고 싶을 때 this를 지정하고 싶을 때 [내용] function 외에도 화살표 함수를 사용하여 함수를 정의할 수 있다. 화살표 함수의 장점은 다음과 같다. 1. 함수를 간략히 기술할 수 있다. 2. this를 묶는 것이 가능하다 [문법] 구문 의미 (파라미터) => { 처리내용 } 함수를 정의 [예시1] 화살표 함수는 다음과 같이 정의하여 사용한다. JavaScript // 함수의 정의 const calcSum = (a, b, c) => { const result = a + b + c; return result; }; // 함수의 실행 calcSum(1, 2, 3); // 결과: 6 [예시2] 화살표 ..