제로초 자바스크립트 입문 #03

변수

• 특정한 값을 잠시 저장
• 값을 저장하고 저장한 값을 불러올 수 있게 하는 것이 변수 (variable) 
• 변수를 만드는 행위는 선언 (declaration) 한다고 표현
• 변수는 let, const, var 세가지가 있다

let 변수명 = 식;

• 변수를 선언함과 동시에 값을 대입하는 행위를 초기화 (initialization) 라고 한다
• 변수 선언문은 항상 결과 값이 undefined 로 출력된다
• 변수명과 값은 컴퓨터의 메모리에 저장된다
• 메모리를 초기화 (변수의 초기화와는 다름) 하면 메모리에 저장되어 있던 변수도 같이 사라진다
• 웹브라우저를 새로고침하면 메모리가 초기화된다 
• 변수를 선언할 때 변수에 값을 대입하지 않아도 된다
• 값을 대입하지 않은 변수를 입력하면 undefined 가 출력된다
• 이미 선언한 변수를 다시 선언하면 에러가 발생한다

변수명 짓기

• 변수명은 변수의 값이 무엇인지 알려 주는 역할을 하기 때문에 자세하게 짓기를 권장한다
• 변수명은 banana 인데 저장된 값이 apple 이면 사용자가 헷갈릴 수 있기 때문이다
• 아무 의미 없는 변수명 a 를 사용하면 저장된 값이 무엇인지 추정하기 어렵다
• 변수명은 특수문자는 $ 와 _ 만 사용할 수 있으면, 숫자로 시작해서는 안된다
• 한글이나 한자, 유니코드까지도 변수명으로 사용할 수 있다 
• 예약어 (reserved word)는 자바스크립트 내부에서 사용 중인 단어라서 변수명으로 쓰지 않는다

변수의 값 수정하기

• 한번 저장한 값은 바꿀 수 있다
• let 이 없을 때는 코드자체가 식이라서 대입한 값이 결과로 출력되지만, let 이 앞에 붙는 순간 선언문이 된다
• 변수에 넣은 값을 비울 수도 있다
• undefined 를 대입하거나 null 을 대입하면 된다 

변수 활용하기

• 변수를 다른 변수에 대입할 수 있다 
• 자신을 자신에게 대입할 수 있다
• 코드 중복을 줄일 때도 사용할 수 있다

let string = "Hello, variable";
let string2 = string;
console.log(string2) 
>> 'Hello, variable'

let num = 5;
num = num + 3;
console.log(num);
>> 8

 

const 로 상수 선언하기 

• const 는  상수 (constant) 의 줄임말이다
• 변수는 변하는 수, 상수는 변하지 않는 수를 뜻한다 
• 실수로 값을 수정하는 일을 막기 위해 상수를 사용한다
• 프롬프트에서 같은 변수를 여러번 선언하면 에러가 발생한다
• 또한, 한번 값을 대입하면 다른 값을 대입할 수 없다는 특성때문에 상수 선언시 초기화 (선언과 동시에 값을 대입하는 것) 하지 않으면 에러가 발생한다

var  알아두기

• var 는 변수 (variable) 의 줄임말이다
• 예전에는 주로 var 를 사용해 변수를 선언
• 이해하기 어려운 특성 때문에 요즘에는 let , const 로 변수를 선언하는 방식을 주로 사용한다
• var 로 변수를 선언하면 해당 문장을 특별히 변수문 (variable statement) 이라고 한다 
• 기존에 선언했던 variable 변수를 다시 선언해도 에러가 발생하기 않는다 
• 예약어에 사용하는 단어를 변수명으로 사용할 수 있다

---

조건문 : 주어진 조건에 따라 코드를 실행하거나 실행하지 않는 문 

조건문의 기본 형식 

• 조건문을 나타내는 예약어인 if 뒤에 나오는 소괄호 안에 조건(식)을 넣고, 다음 줄에 실행문을 넣으면 된다

if (조건식) 
  실행문

• 조건문은 조건식과 실행문으로 구분된다
• 조건식이 참인 값이면 실행문이 실행되고, 거짓인 값이면 실행문이 실행되지 않는다 
• 실행식이 여러개면 { } 를 이용해서 가독성을 높인다
• 하나일 때도 중괄호 { } 를 사용하기를 권장한다

if (조건식) {
  실행식1;
  실행식2;
  실행식3;
}

 

else 를 사용해 두 방향으로 분기하기

if (false) {
  'Hello, if!';
} else {
  'Hello, else!';
}

>> 'Hello, else!' 

let value = '사과';
let condition = false;
if (condition) {
  value = '바나나';
} else { 
  value = '포도';
}
value;

>> '포도'

 

else if 를 사용해 여러 방향으로 분기하기 

if (조건식)
  실행문
else if (조건식)
  실행문 
else
  실행문 
  
  
if (조건식)
  실행문
else if (조건식)
  실행문 
else if (조건식)
  실행문

 

중첩 if 문 사용하기 

• 중첩 if 문은 피하는 것이 좋다
• 조건문이 중첩되어 들여쓰기가 깊어질수록 코드는 읽기 어려워진다

let first = true;
let second = false;
if (first) {
  console.log('첫 번째 조건 충족!'); 
  if (second) {
    console.log('두 번째 조건도 충족!');
  } else {
    console.log('두 번째 조건은 불충족!');
  }
} else {
  console.log('첫 번째 조건 불충족!');
}

>> 첫 번째 조건 충족!
>> 두 번째 조건은 불충족!

let first = true;
let second = false;
      if (first && second) { // first와 second 두 true이면
        console.log('첫 번째 조건 충족!');
        console.log('두 번째 조건도 충족!');
} else if (first) { // first만 true이면
  console.log('첫 번째 조건 충족!');
  console.log('두 번째 조건은 불충족!');
      } else { // 둘 다 false이면
  console.log('첫 번째 조건 불충족!');
}

 

switch 문으로 분기하기 

• switch 문에는 조건식이 두 개 사용 된다 
• switch 옆에 있는 소괄호의 조건식 값이 case 의 비교 조건식 값과 일치 (===) 하면 해당하는 실행문이 실행된다
• 보통 조건식에 변수를 넣고, 비교 조건식에는 변수와 비교할 값을 넣는다 

let value = 'A';
switch (value) {
	case 'A':
    'A';
}

< 'A'

• 실행문 안에 식을 여러개 둘 수도 있다
• if 문과 다르게 중괄호가 없어도 된다 

let value = 'A';
switch (value) {  
  case 'A':
    console.log('A');
    console.log('B');
}
A 
B

• if 문의 else if 처럼 여러 방향으로 분기할 수 있다
• 이때 case를 여러번 사용하면 된다 

let value = 'B';
switch (value) {
  case 'A':
    console.log('A');
  case 'B':
    console.log('B');
  case 'C':
    console.log('C');
}
B 
C

• switch 문은 일치하는 case를 발견하면, 일치 여부와 상관없이 그 아래 case들의 실행문을 모두 실행한다 
• 원하는 결과만 얻으려면 수동으로 case에서 빠져나와야 한다
• 이때 break 문이 사용된다

let value = 'B';
switch (value) {
  case 'A':
    'A';
        break;
      case 'B': 
    'B';
        break;
      case 'C':
    'C';
        break;
    }
< 'B'

• 어떠한 case도 일치하지 않을 때 실행하는 case도 있다 
• 이때 case 대신 default 라는 특수한 예약어를 사용한다 

let value = 'F';
    switch (value) {
  case 'A':
    'A';
    break;
  case 'B': 
    'B';
    break;
  case 'C':
    'C';
    break;
      default:
    '어느 것도 일치하지 않음';
    }
< '어느 것도 일치하지 않음'

• else 는 if 나 else if 뒤에만 나오지만, default 는 어디에나 위치할 수 있다

// if-else if-else 문
let fruit = '사과';
if (fruit === '사과') { 
  '사과입니다!';
} else if (fruit === '배') {
  '배입니다!';
} else if (fruit === '포도') {
  '포도입니다!';
} else {
  '뭔지 모르겠습니다!';
}
< '사과입니다!'

// switch 문
switch (fruit) { 
  default:
    '뭔지 모르겠습니다!'; 
    break;
  case '사과': 
    '사과입니다!'; 
    break;
  case '배': 
    '배입니다!'; 
    break;
  case '포도': 
    '포도입니다!';
}
< '사과입니다!'

 

조건부 연산자 사용하기 

• 조건부 연산자 또는 삼항 연산자라고 하는 특수 연산자로 표현 
• 이 식은 문이 아니라서 결과값이 나온다

조건식 ? 참일 때 실행되는 식 : 거짓일 때 실행되는 식

• 조건부 연산자는 조건문에서 대입하는 부분을 짧게 줄이기 위해 사용한다 

// 조건부 연산자
let condition = true;
let value = condition ? '참' : '거짓';
value;
< '참'
// if 문
let condition = true;
if (condition) {
  value = '참';
} else {
  value = '거짓';
} 
value;
< '참'

• 조건부 연산도 중첩해서 사용할 수 있다

let condition1 = true;
let condition2 = false;
let value = condition1 ? condition2 ? '둘 다 참' : 'condition1만 참' : 'condition1이 거짓';
value;
< 'condition1만 참'

• 조건부 연산자가 중첩된 경우에는 넘어가는 순서를 잘 파악해야한다 
• 읽기 편하게 소괄호 연산자로 감싸주면 좋다
• 들여쓰기로 구분해도 좋다

let value = condition1 ? (condition2 ? '둘 다 참' : 'condition1만 참') : 'condition1 이 거짓';

let value = condition1
  ? condition2
    ? '둘 다 참'
    : 'condition1만 참'
  : 'condition1 이 거짓';

• 첫 번째 조건 (condition1)이 참인 경우에 중첩된 조건부 연산에 들어가지만, 거짓인 경우에 들어갈 수 도 있다 

let condition1 = false;let condition2 = true;let value = condition1 ? 'condition1이 참' : condition2 ? 'condition2가 참' : '둘 다 거짓';value;< 'condition2가 참'

• 가독성을 위해 소괄호를 묶는게 좋다

let value = condition1 ? 'condition1이 참' : (condition2 ? 'condition2가 참' : '둘 다 거짓');