오늘은 10시부터 6시까지 AWS 강의를 들었습니다
이 내용도 나중에 정리할 수 있다면 정리해 올려보겠습니다 :)
Java Script
자바스크립트 기초 문법(2)
1. 자료형과 기본 연산
자료형
자바스크립트에는 여덟가지 기본 자료형이 있습니다.
자바스트립트의 변수는 자료형에 관계없이 모든 데이터를 담을 수 있습니다.
이는 같은 변수가 문자열일 수도 있고 숫자가 될 수도 있다는 이야기입니다.
// 에러 안남!!!
let message = "Hello!!";
message = 12345;이와 같이 변수에 저장되는 값의 타입을 언제든지 바꿀 수 있는 언어를 동적타입 언어라고 합니다.
숫자형
let number = 123;
n= 123.4;숫자형은 정수 및 실수형을 나타냅니다.
숫자형과 관련된 연산은 곱셉* , 나눈셈 / , 덧셈 + , 뺄셈 - 등이 대표적입니다.
문자형
자바스크립트에선 문자열을 따옴표로 묶습니다.
let string = "Hello"; //큰 따옴표
let string2 = 'Hello World'; //작은 따옴표
let backtick = `Hello ${name}`; //역 따옴표(백틱)자바스크립트는 큰따옴표와 작은따옴표의 차이를 두지 않습니다.
역 따옴표로 변수나 표현식은 감싸고 ${...} 안에 넣어주면 문자열 중간에 편리하게 넣을 수 있습니다.
let name = 'kim';
alert(`Hello ${name}`);
alert(`1+2 = ${1 + 2}`);불린형
불린형은 true 와 false 두 가지 값만 갖는 자료형입니다.
긍정이나 부정을 의미하는 값을 저장할 때 사용한다. true 는 긍정 false 는 부정을 의미합니다.
let isGreater = 4 > 1;
alert(isGreater); // true;불린형은 논리 연산자에서 주로 쓰입니다.
'null' 값
let name = null;자바스크립트에서 null은 존재하지 않는 값, 비어 있는 값, 알 수 없는 값을 나타내는 데 사용합니다.
'undefined' 값
undefined는 '값이 할당되지 않은 상태'를 나타냅니다.
변수는 선언했지만 값을 할당하지 않았다면 해당 변수에 undefined 가 자동으로 할당됩니다.
let name;
alert(name); // 'undefined' 가 출력된다.typeof 연산자
typeof 연사자는 인수의 자료형을 반환합니다. 자료형에 따라 처리 방식을 다르게 하고싶거나 변수의 자료형을 알아내고자 할때 사용합니다.
typeof undefined // "undefined"
typeof 0 // "number"
typeof true // "boolean"
typeof "foo" // "string"형 변환
함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 변환됩니다. 이런 과정을 형 변환 이라고 합니다.
문자형으로 변환
문자형으로 형 변환은 문자형의 값이 필요할 때 일어납니다.
alert 함수는 매개변수로 문자형을 받기 때문에alert(값)에서 값이 문자형이여야 합니다.
만약 다른 형의 값이 들어가면 자동으로 문자형으로 변환됩니다.
String(값) 함수를 이용해 값을 문자열로 변환 할 수도 있습니다.
let isOK = true;
alert(typeof isOK); //boolean
isOK = String(isOK);
alert(typeof isOK); // string숫자형으로 변환
숫자형으로 변환은 수학과 관련된 함수와 표현식에서 자동으로 일어납니다.
alert("4" / "1"); // 4 , 문자열이 숫자형으로 자동변환된다.Number(값) 함수를 사용하면 주어진 값을 숫자형으로 명시해서 변환할 수 있습니다.
let str = "123";
alert(typeof str); // string
let num = Number(str);
alert(typeof num); // number불린형으로 변환
불린형으로 변환은 논리 연산을 수행할 때 발생합니다.
Boolean(값)을 사용하면 명시적으로 불리어느로 형 변환을 수행할 수 있습니다.
- 숫자 0 , 빈 문자열 , null , undefined , NaN 과 같이 '비어있는' 값들은 false 가 됩니다
- 그 외의 값은 true
alert( Boolean(1) ); // 숫자 1(true)
alert( Boolean(0) ); // 숫자 0(false)
alert( Boolean("hello") ); // 문자열(true)
alert( Boolean("") ); // 빈 문자열(false)연산자
- 덧셈 연산자 +
- 뺄셈 연산자 -
- 곱셈 연사자 *
- 나눗셈 연사자 /
- 나머지 연산자 % - a%b는 a를 b로 나눈 나머지 입니다.
- 거듭제곱 연산자 - ab는 a를 b만큼 곱한 것입니다.
- 할당 연산자 =
- 피연산자 - 피연산자는 연산자가 연산을 수행하는 대상입니다. 10*5 에서 왼쪽 피연산자 10과 오른쪽 피연산자 5 두개의 피연산자가 있습니다. 피연산자는 인수라고 불리기도 합니다.
- 단항 연산자 - 피연산자를 하나만 받는 연산자로 피연산자의 부호를 바꾸는 단한 마이너스 연산자는 단항 연산자의 대표적인 예입니다.
let x = 1;
x = -x;
alert( x ); // x = -1- 이항 연산자 - 두개의 피연산자를 받는 연산자입니다.
이항 연산자 '+' 와 문자열 연결
덧셈연산자 +는 보통 숫자를 더한 결과를 반환하지만 피연산자로 문자열이 전달되면 덧셈 연산자는 문자열을 연결합니다.
let hw = "Hello" + " World";
alert(hw); // Hello World피연산자 중 하나가 문자열이면 다른 하나도 문자열로 변환됩니다.
alert( '1' + 2 ); // "12"
alert( 2 + '1' ); // "21"
alert(2 + 2 + '1' ); // '221'이 아니라 '41'이 출력된다.복합 할당 연산자
변수에 연산자를 적용하고 그 결과를 같은 변수에 저장해야 하는 경우가 생깁니다
let number = 3;
number = number+5;이때 += *= /= -= 같은 복합 할당 연산자를 이용하면 쉽게 저장할 수 있습니다.
let number = 3;
number += 5; // number = 3+5증감 연산자
숫자를 하나 늘리거나 줄이는 자주 있는 연산입니다.
- 증가 연산자 ++는 변수를 1 증가시킵니다
let counter = 3;
counter++; // counter = counter + 1과 동일.
alert( counter ); // 4- 감소 연산자 ++는 변수를 1 증가시킵니다
let counter = 3;
counter--; // counter = counter - 1과 동일.
alert( counter ); // 2증감 연산자는 변수에만 사용가능!!!!
- count++ 와 같이 피연산자 뒤에 올 때는, '후위형' 이라 부릅니다
- ++count 와 같이 피연산자 뒤에 올 때는, '전위형' 이라 부릅니다
비교 연산자
- ~보다 크다 , 작다 : a > b, a < b
- ~보다 크거나 같다, 작거나 같다 : a >= b, `a <= b``
- 같음 : a == b
- 같지 않음 : a != b
불린형 반환
비교 연산자는 불린형을 반환합니다.
- true 가 반환되면 긍정, 참을 의미
- false 가 반환되면 부정, 거짓을 의미
alert( 2 > 1 ); // true
alert( 2 == 1 ); // false
alert( 2 != 1 ); // true반환된 불린값은 변수에 할당 할 수 있습니다.
let result = 10 > 1; // 비교 결과를 변수에 할당
alert( result ); // true문자열을 비교할 때에는 유니코드의 순서대로 크기를 비교합니다
비교하려는 값이 자료형이 다르면 값들을 숫자형으로 바꿉니다.
2. 조건문
if문은 괄호 안에 들어가는 조건을 평가하는데 그 결과가 true이면 코드 블록이 실행됩다.
let age = 20;
if (age<20) alert("미성년자입니다");위 예시에서 age가 조건에 부합하기 때문에 코드블럭이 실행되어 "미성년자입니다" 라고 창이 뜹니다.
조건문으로 여러 문들을 실행하고 싶으면 중괄호로 코드블록을 감싸야 합니다.
if (answer == 15) {
alert( "정답입니다!" );
alert( "아주 똑똑하시네요!" );
}실행되는 코드 구문이 한줄이여도 중괄호를 씌워주는 것이 코드 가독성에 좋습니다.
else 절
if문엔 else 절을 붙일 수 있다. else 뒤에 이어지는 코드 블록은 조건이 거짓일 때 실행됩니다.
let age = 20;
if (age<20) {
alert("미성년자입니다");
}else{
alert("성인입니다");
}else if로 복수 조건 처리
조건을 여러개를 처리할 때 else if 를 사용합니다.
let age = 20;
if (age<0) {
alert("나이는 음수일 수 없습니다");
}else if(age<20){
alert("미성년자입니다");
}else{
alert("성인입니다");
}자바스크립트는 위에서 부터 조건을 확인하며 실행합니다.
조건부 연산자 '?'
조건부 연산자를 사용하면 간단한 조건문을 짧게 작성할 수 있습니다.
let isAdult = (age >= 20) ? true : false;
// 위아래 두 식은 같은 식이다.
if(age >= 20){
isAdult = true;
}else{
isAdult = false;
}age>=20을 만족하면 isAdult 변수에 true, 만족하지 않으면 false가 할당됩니다.
age>=20 옆의 괄호는 생략 가능합니다.
논리 연산자
자바스크립트에는 세 종류의 논리 연산자가 있습니다.
- || (OR)
- && (AND)
- ! (not)
|| (OR)
OR 연산자는 두개의 수직선 기호로 표시합니다.
result = a||b인수중 하나라도 true이면 true를 반환하고 그렇지 않으면 false를 반환합니다.
let hour = 9;
if (hour < 10 || hour > 18){
alert( '영업시간이 아닙니다.' );
}&& (AND)
두 개의 앰퍼샌드를 연달아 쓰면 AND 연산자 &&를 만들 수 있습니다.
result = a&&b인수 두가지 다 true여야지 true를 반환합니다.
let hour = 12;
let minute = 30;
if (hour == 12 && minute == 30) {
alert( '현재 시각은 12시 30분입니다.' );
}! (NOT)
논리 연산자 NOT은 !를 써서 만들 수 있습니다.
result = !aNOT연산자는 인수를 하나만 받고 인수의 불린값의 역을 반환합니다.
alert(!true); // false
alert(!false); // true3. 반복문
개발을 하다 보면 특정 동작을 반복해야 하는 경우가 생깁니다.
이때 반복문을 사용하면 편하게 반복할 수 있습니다.
'while'반복문
while문의 문법은 다음과 같습니다
while(조건){
//반복할 코드
}조건이 참이라면 반복문 안의 코드가 실행됩니다
let i = 0;
while (i < 5) { // 0, 1, 2, 3, 4가 출력된다.
alert( i );
i++;
}위 코드는 i<5 를 만족할 때까지 i에 1을 더하며 i 값을 출력합니다.
'do while' 반복문
'do while'반복문은 'while'반복문과는 다르게 조건이 본문 아래에 위치합니다.
let i = 0;
do {
alert( i );
i++;
} while (i < 5);'do while'반복문은 반복문을 한번이라도 실행시키고 싶을때 사용합니다
'for' 반복문
가장 많이쓰는 반복문!!!!!
for(let i = 0 ; i < 5 ; i++){
alert(i);
}위 식의 let i = 0 부분은 초기식, i<5 부분은 조건식, i++ 부분은 증감식이라고 합니다.
while , do while 의 예시식과 같은 출력을 합니다.
반복문 빠져나오기
반복문은 대부분 false가 되면 빠져나오지만
특별한 지시자인 break 를 사용하면 언제든 원하는 때에 반복문을 빠져나올 수 있습니다.
let sum = 0;
while (true) {
let value = +prompt("숫자를 입력하세요.", '');
if (!value) break; // break!!!!
sum += value;
}
alert( '합계: ' + sum );break가 쓰인 줄에서 반복문이 참이 된다면 while반복문은 중단되고 그 다음인 alert가 실행됩니다.
다음 반복으로 넘어가기
continue 지시자는 break 의 약한 버전이다. continue는 전체 반복문을 멈추진 않고 실행 중인 반복이 다음 반복으로 넘어갑니다.
for (let i = 0; i < 10; i++) {
// 조건이 참이라면 남아있는 본문은 실행X.
if (i % 2 == 0) continue;
alert(i); // 1, 3, 5, 7, 9가 차례대로 출력됨
}switch 문
복수의 if 조건문은 switch 문으로 대체 가능합니다.
switch문은 하나 이상의 case 문으로 구성되는데 default문도 있지만 필수는 아닙니다.
let a = 2
switch(a) {
case 1:
alert('a값이 1입니다');
break;
case 2:
alert('a값이 2입니다');
break;
case 3:
alert('a값이 3입니다');
break;
default:
alert('이상한 값이에요!');
break;
}여러개의 case 묶기
코트가 같은 case 는 한데 묶을 수 있습니다.
let a = 2
switch(a) {
case 1:
alert('a값이 1입니다');
break;
case 2:
case 3:
alert('a값이 1이 아닙니다');
break;
default:
alert('이상한 값이에요!');
break;
}이러면 a가 2와 3일 때 모두 'a값이 1이 아닙니다'가 출력됩니다.
