[javascript] 기본 문법

코드 구조

여러개의 구문은 세미콜론을 기준으로 구분함

줄 바꿈으로도 구문을 구분할 수 있음(세미콜론 자동 삽입)

but 세미콜론 자동 삽입이 동작하지 않을 때도 있음

함수 선언문, 반복문 등 코드블록({...}) 안에서는 세미콜론 안붙여도 괜찮음

 

엄격 모드

모던 자바스킙트에서 지원하는 모든 기능을 활성화하기 위해서는 스크립트 맨 위에 'use strict'를 적어줘야 함

'use strict'는 스크립트 최상단이나 함수 본문 최상단에 있어야 함

이게 없어도 코드는 정상적으로 동작하지만, 모던한 방식이 아니라 옛날 방식으로 동작함.

몇몇 모던 기능과 클래스는 엄격 모드를 자동으로 활성화함

 

변수

-변수 선언 시 사용하는 키워드

• let
• const - 상수 정의 시 사용(한번 값을 할당하면 더는 값을 바꿀 수 없음)
• var - 과거에 쓰이던 키워드

- 명명규칙

숫자와 문자를 사용, 단 숫자는 첫글자가 될 수 없음

특수기호는 $와 _만 사용 가능

 

자바스크립트는 동적 타이핑을 허용함-> 자료형을 바꿔가며 값을 할당할 수 있음

let x = 5;

x = "John";

 

- 기본 자료형

• 숫자형 - 정수와 부동소수점 저장하는데에 쓰임
• BingInt형 - 아주 큰 숫자 저장
• 문자형 - 문자열 저장
• 불린형 - 논리값 true/false를 저장
• null - 비어있음, 존재하지 않음을 나타내는 null값만을 위한 독립자료형
• undefined - 값이 할당되지 않은 상태를 나타내는 undifined값만을 위한 독립자료형
• 객체형 - 복잡한 자료구조를 저장하는데에 사용됨
• 심볼형 - 고유한 식별자를 만들때 사용됨

tyypeof 연산자는 값의 자료형을 반환해줌

 

상호작용(대화상자)

호스트 환경이 브라우저인 경우, 아래와 같은 ui 함수를 이용해서 사용자와 상호작용 가능

셋 다 모달창을 띄워주는데, 모달창이 닫히기 전까지 코드 실행이 중지됨

사용자는 모달 창과만 상호작용 가능. 페이지에 있는 무엇과도 상호작용할 수 없음

prompt(question, [default]) - 사용자가 입력한 값을 받아옴

프롬프트 창에 매개변수로 받은 question을 넣어서 사용자에게 보여줌

'확인' 버튼을 눌렀을 때는 사용자가 입력한 값을 반환해주고, '취소' 버튼을 눌렀을 때는 null을 반환함

프롬프트 창, 출처 https://www.codingfactory.net/10431

confirm(question) - true(확인) 또는 false(취소)를 반환

컨펌 대화상자에 매개변수로 받은 question을 넣어 사용자에게 보여줌

사용자가 '확인' 버튼을 누르면 true를, 그 외의 경우엔 false를 반환함

컨펌 대화상자, 출처 https://www.codingfactory.net/10431

alert(message) - 메시지 전달. 반환값 없음

message가 담긴 alert 창을 보여줌

단순히 메시지를 전달하는 역할만 함. 반환하는 값이 없음

얼럿창, 출처 https://www.codingfactory.net/10431

 

연산자

산술연산자

사칙연산 관련 연산자(+ - * /)와 나머지 연산자 %, 거듭제곱연산자 ** 등이 있음

덧셈연산자 + 는 피연산자 중 하나가 문자열일때, 나머지 하나를 문자형으로 바꾸고 두 문자열을 연결함

 

할당연산자

a=b 형태의 할당연산자와 a *= 2 형태의 복합할당연산자가 있음

 

비트연산자

인수를 32비트 정수로 변환하여 이진연산을 수행함

 

조건부연산자

자바스크립트 연산자 중 유일하게 매개변수가 3개인 연산자

cond ? resultA : resultB 형태로 사용

cond가 참이면 resultA를, 아니면 resultB를 반환함

 

논리연산자

AND 연산자 &&와 OR 연산자 || 는 단락평가를 수행하고 평가가 멈춘 시점의 값을 반환함(꼭 true나 false일 필요는 없음)

NOT 연산자 ! 는 피연산자의 자료형을 불린형으로 바꾼 후 그 역을 반환함

 

nullish 병합 연산자

nullish 병합연산자 ?? 는 피연산자 중 실제 값이 정의된 피연산자를 찾는 데에 쓰임

a가 null이나 undifined가 아니면 a ?? b 의 결과는 a이고

a가 null이나 undifined이면 a ?? b 의 결과는 b가 됨

 

비교연산자

동등연산자 == 는 자료형이 다른 값끼리 비교할 때 피연산자의 자료형을 숫자형으로 바꾼 후 비교를 진행함

null과 undifined는 자기끼리 비교할땐 참을 반환, 다른 자료형과 비교할 땐 거짓을 반환

>, <, >=, <= 역시 마찬가지로 피연산자의 자료형을 숫자형으로 바꾼 후 비교를 진행함

일치연산자 ===는 피연산자의 형변환 안함. 형이 다르면 무조건 다르다고 평가함

대소를 비교하는 연산자의 피연산자로 문자열이 들어오면 글자단위로 크기 비교가 이루어짐. 다른 타입의 값이 들어오면 숫자형으로 형변환 후 비교 진행

 

기타연산자

쉼표 연산자 등

 

반복문

*출처 https://ko.javascript.info/while-for

출처 https://ko.javascript.info/javascript-specials

while 반복문

condition이 truthy 이면 반복문 본문의 코드가 실행됨

 

do-while 반복문

while문에서의 condition을 본문(body) 아래로 옮긴 구조

이때 본문(body)가 먼저 실행된 후 조건이 truthy인 동안 본문이 반복 수행됨

이는 조건이 truthy인지 아닌지에 상관없이 본문을 적어도 한번은 실행하고 싶을 때 사용함

대다수의 상황에서는 do while문 보다 while문이 적합함

 

for 반복문

예시)

해당 for문을 실행하면 i가 0부터 3이 될때까지(3은 포함하지 않음) alert(i)가 호출됨

begin ( i = 0 ) : 반복문에 진입할 때 단 한번 실행됨

condition ( i < 3 ) : 매 반복마다 해당 조건을 확인하고, false이면 반복문을 빠져나감

body ( alert(i) ) : condition이 truthy인 동안 반복해서 실행될 부분

step ( i++ ) : 각 반복의 body가 실행된 이후 실행됨

=> begin이 한 차례 실행 > condition 확인 > 참이면 body와 step 수행 > 다시 condition 확인 ...

> 거짓이면 반복문 빠져나감

 

* begin이 필요하지 않으면 생략 가능 ( for ( ; i < 3 ; i++ ) )

* step도 생략 가능 ( for ( ; i < 3 ; ) { alert  ( i++); } )

* 모든 구성요소 생략시 무한반복문이 만들어짐. 단 이때에도 세미콜론 두 개는 꼭 넣어줘야함

break, continue

break를 만나면 가장 가까운 반복문(while, for) 블럭을 빠져나옴

continue는 break와 비슷해보이지만 좀더 가벼운 버전

전체 반복문을 멈추는 게 아니라 해당 회차의 본문수행을 멈추고 다음 반복회차로 넘어가게 함.

continue 만남 > 아래에 남은 본문 코드가 있어도 실행x > step 수행 > condition 참 거짓 확인

 

switch-case 문

출처 https://ko.javascript.info/switch

switch문

복수의 if 조건문은 switch 문으로 바꿀 수 있음

보통 하나 이상의 case문을 갖고, 대개 default문도 갖지만 이는 필수는 아님

 

예시)

변수 x의 값을 첫번째 case문의 값 value1과 일치 비교( === 연산자 사용) > 두번째 case문의 값 value2와 비교 ... 의 과정을 반복

이 과정에서 변수x의 값과 일치하는 value를 찾은 경우 해당 case문의 아래 코드가 실행됨

break를 만나거나 switch문이 종료되면 switch문을 빠져나옴

일치하는 value의 case문을 수행하더라도 break를 만나지 못하면 다음 case들(과 default)은 value와 관계없이 모든 코드가 실행됨

값과 일치하는 case문이 없다면 default문의 코드가 실행됨

여러 개의 case를 묶으려면  ' case 'value' : ' 뒤에 수행할 문장이 아니라 함께 묶을 케이스를 연이어 써주면 됨. 그리고 묶을 case를 다 써주었으면 마지막으로 묶인 case 아래에 수행할 문장 써주면 됨

 

*변수 x와 case에서 비교할 value 값은 자료형도 동일해야 한다!!!

 

함수

세 가지 방법으로 함수를 만들 수 있음

1. 함수 선언문

주요 코드 흐름을 차지하는 방식

2. 함수 표현식

표현식 형태로 선언된 함수

3. 화살표 함수

 

* 함수는 지역변수를 가질 수 있음. 함수 본문에 선언되는 지역변수는 함수 내부에서만 사용가능

* 매개변수에 기본값을 설정할 수 있음 ( function sum(a = 1, b = 2) {...} )

* 함수는 항상 무언가를 반환함. return문이 없는 경우는 undefined를 반환함

 

 

 

 

출처

https://ko.javascript.info/javascript-specials

https://www.codingfactory.net/10431

JavaScript / 대화상자 / Alert, Confirm, Prompt

https://ko.javascript.info/switch