[자바스크립트] Day1 문법 공부

자바스크립트 기본

* 이용툴 : https://plnkr.co./edit/?p=preview&preview 

Plunker

 

1. Statement : 문

    어떤 작업을 수행하는 문법 구조와 명령어를 의미함

 

// 잘못된 예시
alert('Hello');alert('World);

// 올바른 예 = 코드의 가독성을 위함
alert('Hello');
alert('World');

 

2. semicolon : 세미콜론

// 줄 바꿈이 있으면 '암시적 세미콜론'으로 해석하여 생략 가능 
// "세미콜론 자동 삽입"이라고 부름
alert('Hello')
alert('World')

// 예외의 경우
// 불완전한 표현식이므로 세미콜론 해석 안함 
alert(3 +
1
+ 2);

// 예외의 경우2
// 에러 예제
alert("에러가 발생합니다.")
[1, 2].forEach(alert)	// alert 출력 후 에러 발생

// 예제 수정
// 자바스크립트가 대괄호[] 앞에는 세미클론이 있다고 가정하지 않는 특징이 있음
alert("에러가 발생합니다.");
[1, 2].forEach(alert)	// 정상 출력

 

3.  comment : 주석

   : // 은 한줄짜리 주석, /* */ 은 여러줄의 주석

 

4. use strict : 엄격 모드

 

---

 

5.  variable and constant : 변수와 상수

   :  변수는 let 상수는 const

 

// 방법1.
// 문자열이 변수와 연결된 메모리 영역에 저장
// 변수명 호출을 통해 문자열에 접근 가능
let message;

message = 'Hello';

// 방법2.
let message = 'Hello!';
alert(message);

// 방법3. = 가능은 하지만 올바른 클린 코드는 아님.
let user = 'John', age = 25, message = 'Hello';

// 방법3-1. 올바르게 정정
let user = 'John';
let age = 25;
let message = 'Hello';

// 재할당이 가능한 let
let message;

message = 'Hello';
message = 'Hi';

alert(message) // 'Hi'

// 변수 두 개 선언 후, 한 변수를 다른 변수에 복사 가능
let Hello = 'Hello World';

let message;

message = Hello;

alert(message)	// Hello World

// 한 변수를 두 번 선언 시 에러
let message = "a";

let message = "b";	//SyntaxError

 

  ** 변수 명명 규칙

[1] 변수명에는 오직 문자와 숫자, 기호 $와 _만 들어갈 수 있다
[2] 첫 글자는 숫자 불가능
[2] 여러 단어 조합 시 카멜 표기법으로 사용 ex) getPrettyName
[4] 대,소문자 구별 ex) apple, AppLe
[5] 비 라틴계 언어도 선언 가능하지만 권장안함
[6] 예약어 목록에 있는 단어는 변수명으로 사용 불가능 ex) let, class, return, function 등  

 

// const 상수
const myBirthday = '95.02.18';

// 재할당 불가능
const birthday = '950218';

birthday = '0218';	// Error 

// 대문자 상수
// 기억하기 힘든 값을 변수에 할당해 별칭으로 사용하는 것은 관습처럼 인식
const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";

 

---

6. 자료형

 : 자바스크립트에서 값은 항상 문자열이나 숫자형 같은 특정한 자료형에 속하는데, 여덟 가지의 기본 자료형이 있다.

  숫자형 / Biglnt / 문자형 / Boolean형 / 'null'값 / 'undefined'값 / 객체와 심볼 . typeof 연산자

// 숫자형 (정수, 소수, Infinity, -Infinity, NaN 등
let n = 123;
n = 12.345;


// Infinity 는 어떤 숫자보다 더 큰 특수 값
alert( 1 / 0 ); // 무한대
alert(Infinity)	// 무한대


// NaN 는 계산 중에 에러가 발생했다는 것을 나타내주는 값. 부정확하거나 정의되지 않은 수학 연산을 사용하면 에러 발생
alert( "숫자가 아님" / 2 );	// NaN


// BigInt 는 끝에 'n'이 붙으면 BigInt형 자료
const bigInt = 1234325948593485n;

// 문자형 은 문자열(string)을 따옴표로 묶어서 표현.
let str = "Hello";
let str2 = 'Single Quotes';
let phrase = `can embed another ${str}`

// 큰따옴표, 작은따옴표, 역따옴표(백틱)
let name = 'John';
alert( `Hello, ${name}` );
alert( `the result is ${1+2}` };

// 큰따옴표, 작은따옴표는 중간에 표현식을 넣을 수 없다
alert( "result is ${1+2}" ); // the result is ${1+2}


// Boolean형 은 true, false 두가지 값만 존재
let nameFieldChecked = true;
let ageFieldChecked = false;

let isGreater = 4 > 1;
alert( isGreater );	// true


// 'null'값 은 소개한 자료형 중 어느 자료형에도 속하지 않는 값. 오로지 null 값만 표현하는 별도의 자료형을 만듦
// 자바스크립트에서의 'null'은 '존재하지 않는 값', '비어 있는 값', '알 수 없는 값'을 나타내는데 사용
// JS 이외의 언어엣는 'null'을 '존재하지 않는 객체에 대한 참조'나 '널 포인터'를 나타낼 때 사용
let age = null;


// 'undefined'값 은 null값처럼 자신만의 자료형을 형성.
// '값이 할당되지 않은 상태'를 나타낼 때 사용
let age;
alert(age);	// 'undefined'

// 개발자가 변수에 undefined를 명시적으로 할당하는 것도 가능
let age = 100;
age = undefined;
alert(age);	// "undefined"


// typeof연산자 는 인수위 자료형을 반환. 
// 자료형에 따라 처리 방식을 다르게 하고 싶거나 변수의 자료형을 빠르게 알아내고자 할 때 유용
// typeof 연산자는 두 가지 형태의 문법을 지원
// 1.연산자일 경우: typeof x		2.함수일 경우: typeof(x)

typeof undefined	// "undefined"
typeof 0			// "number"
typeof 10n			// "bihint"
typeof true			// boolean
typeof "foo"		// "string"
typeof Symbol("id")	// "symbol"
typeof Math			// "object" - 수학 연산을 제공하는 내장 객체
typeof null			// "object"
typeof alert		// "function"

 

 

7. alert, prompt, confirm을 이용한 상호작용

  * alert : 사용자가 '확인(OK)'버튼을 누를 때까지 메세지를 보여주는 창(modal window)이 계속 떠있게 하는 함수

  * prompt : 텍스트 메세지와 입력 필드, 확인 및 취소 버튼이 있는 창을 띄워주는 함수

  * confirm : 매개변수로 받은 question(질문)과 확인 및 취소 버튼이 있는 창을 띄워주는 함수

 

// alert
alert("Hello")

//prompt
// title : 사용자에게 보여줄 문자열,	default : 입력 필드의 초깃값 ( []의 의미는 이 매개변수가 필수가 아닌 선택값이라는 것을 의미 )
result = prompt(title, [default])

// prompt 예시
let age = prompt('나이를 입력해주세요.', 100);
alert(`당신의 나이는 ${age}설 입니다.`);

// confirm
result = confirm(question);

// confirm 예시
let isBoss = confirm("당신이 주인인가요?")
alert(isBoss;	// '확인'버튼 클릭시 true 출력, '취소'버튼 클릭시 false 출력

 

8. 형 변환

   : 함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환되는데 이러한 과정을  '형 변환'이라고 한다

     이 외에, 전달받은 값을 의도를 갖고 웒는 타입으로 변환(명시적 변환)해 주는 경우도 형 변환이라고 한다

   

// 문자형으로 변환
let value = true
alert(typeof value)		// boolean

value = String(value)		// "true"
alert(typeof value)			// string


// 숫자형으로 변환
alert ( "6" / "2" )	// 3		--> 숫자형으로 변환은 수학과 관련된 함수와 표현식에서 자동으로 일어남

let str = "123"
alert(typeof str)			// string

let num = Number(str);		// 123
alert (typeof num)			// number

// 숫자 이외의 글자가 들어가 있는 문자열을 숫자형으로 변환하려할 경우, 그 결과는 NaN
let age = Number("임의의 문자열 20")
alert(age)					// NaN	--> 형 변환에 실패

// 숫자형으로 변환 시 적용되는 규칙
alert ( Number(undefined) )	// NaN
alert( Number(" 123 ") )	// 123
alert( Number("123z") )		// NaN
alert( Number(true) )		// 1
alert( Number(false) )		// 0


// Boolean형으로 변환
// 숫자 0, 빈 문자열, null, undefined, NaN 과 같이 직관적으로도 '비어있다고'느껴지는 값들은 false
// 그 외의 값은 true

alert( Boolean(1) )			// true
alert( Boolean(0) )			// false
alert( Boolean("Hello") )	// true
alert( Boolean("") )		// false

// 헷갈리는 부분
alert( Boolean("0") )		// true
alert( Boolean(" ") )		// true

 

9. 기본 연산자와 수학

   : 자바스크립트에서 제공하는 기본 수학 연산자 ( + , - , * , / , % , ** )

 

** 이 외의 자바스크립트에서 제공하는 특별한 연산자 기능들

// 이항 연산자 '+' 와 문자열 연결
let s = "my" + "string";
alert(s);						// mystring
alert( '1' + 2 );				// "12"
alert( 2 + '1' );				// "12"
alert( 2 + 2 + '1' );			// "41"

// 수학 관련식으로 이어지면 숫자형으로 자동 형변환
alert( 6 - '2' );				// 4
alert( '6' / '2' );				// 3

// 단항 연산자 +와 숫자형으로의 변환
let x = 1;
alert ( +x );					// 1

let y = -2;
alert( +y );					// -2

// 숫자형이 아닌 피연산자는 숫자형으로 변환됨
alert ( +true );				// 1
alert ( +"" );					// 0

let apples = "2";
let oranges = "3";

alert( apples + oranges );		// 23
// 헷갈릴 수 있는 tip -> 이항 덧셈 연산자가 적용되기 전, 단항 덧셈 적용으로 인해 숫자형으로 변환되고 나서,
//					  이항 덧셈 연산이 이루어 질때, 이미 숫자형으로 변환된 후 진행
// 단항연산자의 우선순위는 17, 이항연산자의 우선순위는 13
alert ( +apples + +oranges );	// 5 	

------------------------------------------------------------------------------------

// 할당 연산자(=)
// 할당 연산자의 우선순위는 3위로 매우 낮음
let x = 2 * 2 + 1;
alert( x );						// 5

let a = 1;
let b = 2;
let c = 3 - ( a = b + 1 );

alert( c );						// 0

// 할당 연산자 체이닝
let a, b, c;
a = b = c = 2 + 2;
alert( a );						// 4
alert( b );						// 4
alert( c );						// 4

// 복합 할당 연산자
let n = 2;
n += 5;							// 7
n *= 2;							// 14

------------------------------------------------------------------------------------

// 증가, 감소 연산자
// 대부분의 연산자들보다 우선순위 높음
// !중요 : 증가,감소 연산자는 변수에만 쓸 수 있음. 5++ 과 같이 쓰려고 하면 에러 발생
// 전위형
let counter1 = 1;
let a = ++counter1;

alert(a);						// 2

// 후위형
let counter2 = 1;
let a = counter++;

alert(a);						// 1

// 차이 비교1
let counter3 = 0;
counter++;
++counter;

alert( counter3 );				// 2

// 차이 비교2
let counter4 = 0;
alert( ++counter4 );			// 1

// 차이 비교3
let counter5 = 0;
alert( counter5++ );			// 0

------------------------------------------------------------------------------------

// 비트 연산자
// AND (&),	OR (|),	XOR(^),	NOT(~),	왼쪽 시프트(<<),	오른쪽 시프트(>>), 부호없는 오른쪽 시프트(>>>)

------------------------------------------------------------------------------------

// 쉼표 연산자
// 코드를 짧게 쓰려는 의도로 사용됨.
let a = (1 + 2, 3 + 4);
alert(a);						// 7	--> 첫번째 표현식 1+2는 버려짐

 

10. 비교 연산자

    * 보다 큼, 작음 : a > b, a < b

    * 보다 크거나, 작거나 같음 : a >= b, a <= b

    * 같음(동등) : a == b

    * 같지 않음(부등) : a != b

// 불린형 반환
alert( 2 > 1 );		      	     // true
alert ( 2 == 1 );	      	     // false 
alert ( 2 != 1 );	      		 // true

// boolean값 변수에 할당
let result = 5 > 4;
alert(result);		      	     // true

// 문자열 비교
// 사전순으로 비교하며, 사전 뒤쪽 문자열이 사전 앞쪽 문자열보다 크다고 판단함
alert( 'Z' > 'A' );			    // true
alert( 'Glow' > 'Glee' )		// true
alert( 'Bee' > 'Be' )			// true

// 다른 형을 가진 값 간의 비교
alert( '2' > 1 )				// true		--> 문자열'2'를 숫자2로 변환 후 비교 진행
alert( '01' == 1 );				// true		--> 숫자1로 변환 후 진행

// 일치 연산자
alert( 0 == false );			// true		--> 동등연산자 ==은 0과 false를 구별하지 못함
alert( '' == false );			// true		--> 마찬가지로 구별하지 못함

// 이때에는 형 변환없이 값을 비교할 수 있는 엄격한 동등연산자 === 를 사용
alert( 0 === false );			// false


// null이나 undefined 비교하기
alert( null === undefined );	// true	

// null vs 0 비교
alert( null > 0 );				// false	--> <,>,<=,>=일 경우엔 null이 숫자형으로 변환돼 0이 됨
alert( null == 0 );				// false	--> 동등연산자일 경우엔 null을 형변환하지 않음. 무조건 false 반환
alert( null >= 0 );				// true		--> 위의 이유와 동일

// 비교가 불가능한 undefined
alert( undefined > 0 );			// false	--> undefined가 NaN으로 변환, NaN이 피연산자일 경우 비교연산자는 항상 false 반환
alert( undefined < 0 );			// false	--> undefined는 NaN으로 변환
alert( undefined == 0 );		// false

 

11. If와 '?'를 사용한 조건 처리

   : if(..)문은 괄호 안에 들어가는 조건을 평가하는데, 그 결과가 true일 경우 코드 블럭이 실행됨

let ques = prompt('나는 현재 배가 고픈가요?', '');

if ( ques === "yes" ) alert('정답입니다!');

// 불린형으로 변환
// 숫자 0, 빈 문자열 "", null, undefined, NaN은 불린형으로 변환 시 모두 false이기 때문에,
// 위의 값들은 falsy(거짓 같은)값이라고 부름

// 실행 되지 않는 if문
if (0) {
	// 0은  falsey
}

// 실행 가능한 if문
if (1) {
	// 1은 truthy
}

// 평가를 통해 확정된 Boolean값을 if문에 전달
let cond = ( year == 2023 );
if (cond)	{
	...
}

// else 절

// 'else if'로 복수 조건 처리하기
let year = prompt('올해는 몇년도 인가요?', '')

if (year < 2023) {
	alert('좀 더 올려보세요!');
} else if (year > 2023) {
	alert('좀 더 내려보세요!');
} else {
	alert('정답!');
}

----------------------------------------------------------------

// 조건부 연산자('?')
// 평가대상인 condition이 true라면 value1, false라면 value2가 반환
let result = condition ? value1 : value2;

// 다중 '?'
let age = prompt('나이를 입력해주세요.', 18);
let message = (age < 3) ? '아기야 안녕? :
	(age < 18) ? '안녕!' :
    (age < 100) ? '환영합니다!' :
    '나이가 아주 많으시거나, 나이가 아닌 값을 입력하셨군요!';
alert( message );

// 위의 다중'?'을 if문으로 변환
if (age < 3) {
	message = '아기야 안녕?;
} else if (age < 18) {
	message = '안녕!'
} else if (age < 100) {
	message = '환영합니다!'
} else {
	message = '나이가 아주 많으시거나, 나이가 아닌 값을 입력하셨군요!';
}

 

12. 논리 연산자

    : || (OR), && (AND), !(NOT)

   * &&(AND)가 ||(OR) 보다 우선순위가 높다

// || (OR)
// OR의 여러가지 조건 예시
let hour = 12;
let isWeekend = true;

if (hour < 10 || hour > 18 || isWeekend) {
	alert( '영업시간이 아닙니다!' );
}

// 예외 및 비교 목록 중 첫번째 truthy 찾는 특징인 ||(OR)
alert( undefined || null || 0 );			// 0 (모두 falsy이므로, 마지막 값을 반환
alert( "" || null || "바이올렛" || "익명" );	 // 바이올렛

// 단락 평가를 제공하는 ||(OR)
true || alert('not printed');				// true를 만나면 나머지 값들은 건드리지 않은 채 평가를 멈춤
false || alert('printed');					// 때문에 두번째 메세지 alert('printed')만 출력됨

------------------------------------------------------------------------------------------------------------

// && (AND)
// 첫번째 falsy를 찾는 특징 && (AND)
// 첫번째 피연산자가 truthy이면 AND는 두번째 피연산자를 반환
alert( 1 && 0 );							// 0
alert( 1 && 5 );							// 5

// 첫번째 피연산자가 falsy면 바로 반환하고, 두번째 피연산자는 무시
alert( null && 5 );							// null

// 피연산자 모두 truthy일 경우, 마지막 피연산자 반환ㅇ
alert( 1 && 2 && 3 );						// 3

-------------------------------------------------------------------------------------------------------------

// ! (NOT)
// 피연산자를 Boolean으로 변환
alert( !true );								// false
alert( !0 );								// true

// !!는 이중 변환
alert( !!"non-empty string");				// true
alert( !null );								// false

13. nullish 병합 연산자 '??'

 

14. while과 for 반복문

    * while 반복문 : condition(조건)이 truthy일 경우 코드 실행

    * do..while 반복문 : 조건이 truthy인지 아닌지에 상관없이, 본문을 최소한 한 번이라도 실행하고 싶을 때만 사용

    * for 반복문 : begin 실행 ->  반복 { condition이 truthy이면 -> body 실행 후 -> step 실행 }

while (condition) {
    // 코드
}

do {
   // 코드
} while (condition);

for (begin; condition; step) {
   // 반복문 코드
}

// while 반복문
let i = 3;
while (i) {	// i가 0이 되면 조건이 falsy가 되므로 반복문 종료
    alert(i);
    i--;
}

// do..while 반복문
let i = 0;
do {
    alert(i);
    i++;
} while (i<3);

// break; 반복문 빠져나오기
let sum = 0;

while(true) {
   let value = +prompt("숫자를 입력하세요.",'');
   
   if(!value) break;	//(*)
   
   sum += value;
}
alert( '합계:' + sum );


// continue; 다음 반복으로 넘어가기
for (let i = 0; i<10; i++) {
   // 조건이 참이라면 남아있는 본문은 실행되지 않습니다
   if(i % 2 == 0) continue;
   
   alert(i);	// 1, 3, 5, 7, 9가 차례대로 출력
}

// break/continue와 레이블
// 여러 개의 중첩 반복문을 한 번에 빠져나와야하는 경우
// label은 반복문 앞에 콜론과 함께 쓰이는 식별자
// 반복문 안에서 break<labelName>문을 사용하면 레이블에 해당하는 반복문을 빠져나올 수 있다

outer: for (let i = 0; i<3; i++) {
   for (let j = 0; j<3; j++) {
      let input = prompt(`${i},${j}의 값`, '');
      
      // 사용자가 입력을 하지 않거나, cancel 버튼을 누르면 두 반복문을 모두 빠져나옴
      if (!input) 
      break outer;
   }
}
alert('완료!');

15. switch문

// switch

switch(x) {
   case 'value1':	// if (x === 'value1')
      ...
      [break]
   case 'value2':
      ...
      [break]
   case 'value3':
      ...
      [break]
   default:
      ...
      [break]
}

// 자료형의 중요성
let arg = prompt('값을 입력해주세요.');
switch(arg) {
   case '0':
   case '1':
      alert('0 또는 1을 입력하셨습니다.');
      break;
   case '2':
      alert('2를 입력하셨습니다.');
      break;
   default:
      alert('알 수 없는 값을 입력하셨습니다.');
}

 

16. 함수

17. 함수 표현식

18. 화살표 함수 기본

18. 기본 문법 요약