CORE JS - 자바스크립트의 기본 (하)

if와 ?를 사용한 조건 처리

 

if문

if(...)문은 괄호 안에 들어가는 조건을 평가함 그 결과 true이면 코드블록 실행

let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', '');

if (year == 2015) alert( '정답입니다!' );

if (year == 2015) {
  alert( "정답입니다!" );
  alert( "아주 똑똑하시네요!" );
}

 

if문을 쓸 때는 중괄호 { }를 사용해 코드를 블록으로 감싸는것이 좋다 !

 

불린형으로 변환

if문은 괄호안의 표현식을 평가하고 그 결과 불린값으로 변환함

숫자 0, 빈문자열"", null, undefined, NaN은 불린형으로 변환시 모두 flase

이외의 값은 불린형으로 변환시 true가 되므로 truthy (참 같은)값이라고 부름

 

else절

if문엔 else절을 붙일 수 있음 else 뒤에 이어지는 코드블록은 조건이 거짓일때 실행됨

else if로 복수조건 처리가능

 

let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', '');

if (year == 2015) {
  alert( '정답입니다!' );
} else {
  alert( '오답입니다!' ); // 2015 이외의 값을 입력한 경우
}

 

조건부 연산자 '?'

조건에 따라 다른 값을 변수에 할당해줘야 할 때가 있음

물음표 연산자라고 불리는 조건부 연산자를 사용하면 간결하게 변형가능

조건부연산자는 물음표?로 표시

피연산자가 세개이기때문에 삼항연산자라고도 부름

자바스크립트에선 피연사자가 3개나 받는 연산자는 조건부연산자가 유일

 

let result = bomi ? value1 : value2;

 

평가대상인 bomi가 참인거값은 값이라면 value1이 그렇지않으면 value2가 반환

 

다중 '?'

 

let age = prompt('나이를 입력해주세요.', 18);

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

alert( message );

 

첫번째 물음표에서 검사 참이면 아기야 안녕 반환 그렇지않으면 그다음 18으로 넘어감 참이면 안녕 아니면 100으로 넘어감 참이면 환영어쩌고 아니면 나이가 아주많다 반환

 

 

논리 연산자

 

|| (or)

 

alert( true || true );   // true
alert( false || true );  // true
alert( true || false );  // true
alert( false || false ); // false

 

주어진 조건중 하나라도 참인지를 데스트하는 용도로 자주 쓰임

하나라도 true면 true

전부 false여야 false

피연산자가 불린형이 아니라면 평가를 위해 불린형으로 변환

 

 

&&(and)

 

alert( true && true );   // true
alert( false && true );  // false
alert( true && false );  // false
alert( false && false ); // false

 

두가지 피연산자 모두 참일때 true 반환

 

!(not)

NOT 연산자는 인수를 하나만 받고, 다음 순서대로 연산을 수행함

1. 피연산자를 불린형(true / false)으로 변홤

2. 1에서 변환된 값의 역을 반환

NOT을 두 개 연달아 사용(!!)하면 값을 불린형으로 변환할 수 있다

 

 

&&의 우선순위가 ||보다 높습니다.

if를 ||나 &&로 대체하지 마세요.

NOT 연산자의 우선순위는 모든 논리 연산자 중에서 가장 높기 때문에 항상 &&나 || 보다 먼저 실행됩니다

 

 

nullish 병합 연산자 '??'

nullish 병합 연산자 ?? 사용시 짧은 문법으로 여러 피연산자중 그값이 확정되어있는 변수 찾을 수 있음

a ?? b 의 평가결과

• a가 null도 아니고 undefined도 아니면 a
• 그 외의 경우는 b

'??" 와 '||' 의 차이

• || 는 첫번째 truthy값 반환
• ?? 는 첫번째 정의된 값 반환

??의 연산자 우선순위는 대다수의 연산자보다 낮고 ?와 = 보다는 높다

괄호 없이 ??를 ||나 &&와 함께 사용하는 것은 금지

 

 

while과 for반복문

 

while반복문

문법

 

while (condition) {
  // 코드
  // '반복문 본문(body)'이라 불림
}

 

조건이 참이면 반복문 본문의 코드 실행

반복문 본문이 한복 실행된것을 반복(iteration 이터레이션)이라고 함

본문이 한줄이라고 대괄호 생략가능

 

do ...while 반복문

문법

 

do {
  // 반복문 본문
} while (condition);

 

본문이 먼저 실행되고 조건 조건 참이면 본문 계속 실행

 

for 반복문

문법

 

for (begin; condition; step) {
  // ... 반복문 본문 ...
}

for (let i = 0; i < 3; i++) { // 0, 1, 2가 출력됩니다.
  alert(i);
}

begin	i = 0	반복문에 진입할 때 단 한 번 실행됩니다.
condition	i < 3	반복마다 해당 조건이 확인됩니다. false이면 반복문을 멈춥니다.
body	alert(i)	condition이 truthy일 동안 계속해서 실행됩니다.
step	i++	각 반복의 body가 실행된 이후에 실행됩니다.

반복문 시작시 아무것도 할 필요 없다면 begin생략가능

step도 생략가능

 

반복문 빠져나오기

break

사용시 언제든 원할 떄 반복문 빠져나올 수 있다 !

 

다음 반복으로 넘어가기

continue

전제반복문을 멈추지않음 현재 실행중인 이터레이션 멈추고 반복문이 다음 이터레이션으로 강제 실행시키도록(조건 ㅇㅋ일때)

현재 반복 종료 다음반복 넘어가고싶을때 사용

 

'?’ 오른쪽엔 break나 continue가 올 수 없습니다.

 

 

switch 문

복수의 if문은 switch문으로 변경가능

문법

 

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

  case 'value2':  // if (x === 'value2')
    ...
    [break]

  default:
    ...
    [break]
}

 

변수 x값과 첫번째 case값 value1 일치비교후 두번째로 이과정을 계속 이음

일치하는 값을 찾으면 해당 case문 아래코드실행

이때 break문 만나거나 switch이 끝나면 코드의 실행 멈춤

값과 일치하는 case문이 없다면 default문 아래의 코드가 실행됨(있을경우)

switch/case문의 인수엔 어떤 표현식이든 올 수 있다!

일치비교로 조건 확인 자료형 중요!!!

 

 

함수

함수선언

function showMessage() {
  alert( '안녕하세요!' );
}
function name(parameters) {
  ...함수 본문...
}

function 함수이름(복수의, 매개변수는, 콤마로, 구분합니다) {
  /* 함수 본문 */
}

showMessage();
showMessage();

 

 

function키워드 함수, 함수이름, 괄호로 둘러싼 매개변수를 차례로 써서 함수선언

매개변수가 여러개라면 각 매개변수를 콤마로 구분

함수를 구성하는 함수본문은 중괄호로 감싸서 작성

함수호출

 

 

지역변수

함수 내에서 선언한 변수인 지역변수는 함수 안에서만 접근 가능

 

function showMessage() {
  let message = "안녕하세요!"; // 지역 변수

  alert( message );
}

showMessage(); // 안녕하세요!

alert( message ); // ReferenceError: message is not defined

 

외부변수

함수 내부에서 함수 외부의 변수인 외부 변수에 접근 가능

함수에선 외부변수에 접근하는것뿐아니라 수정도 할 수 있음

 

let userName = 'John';

function showMessage() {
  let message = 'Hello, ' + userName;
  alert(message);
}

showMessage(); // Hello, John

 

매개변수

매개변수는 인수(argument)라고도 불림

매개변수에 값을 전달하지않으면 그 값은 undefined가 됨

 

반환값

 

function sum(a, b) {
  return a + b;
}

let result = sum(1, 2);
alert( result ); // 3

 

지시자 return은 함수 내 어디서든 사용할 수 있다

지시자를 만나면 함수 실행은 즉기 중단되고 함수 호출한곳에서 값 반환