[모던JavaScript]자바스크립트 기본

 

공부 기록 공간

 

---

 

2-1.Hello.world!

• script type/language 
• 보통 동일한 스크립트는 분리하고 캐시로 저장하기 떄문에 스크립트를 한 번만 다운로드 하여 사용할 수 있다.
• 내부/외부 스크립트를 동시에 가져오지 못하기 떄문에 아래처럼 script를 분리하여 사용한다.

<script src="file.js"></script>
<script>
  alert(1);
</script>

 

 

2-2.코드구조

• 세미콜론은 생략 가능하다.

 

 

2-4.변수와 상수

• 변수 선언 방식은 아래 중 편한대로 사용하면 된다.

//1번
let user = 'John';
let age = 25;
let message = 'Hello';

//2번
let user = 'John',
  age = 25,
  message = 'Hello';
  
//3번
let user = 'John'
  , age = 25
  , message = 'Hello';

• var보단 let이 더 쓰인다. → 후에 변수 내용 변경 가능
• const : 변화하지 않는 변수, 후에 변수를 바꿀 수 없다.

//let
let message;

message = 'Hello!';

message = 'World!'; // 값이 변경되었습니다.



//const
const myBirthday = '18.04.1982';

myBirthday = '01.01.2001'; // error, can't reassign the constant!

• 변수 : 일반적으로 카멜 표기법으로 표기되며, 문자/숫자/$/_로 쓰이며 처음에 숫자가 올 수 없다.
• 예약어는 이미 자바스크립트 자체에서 사용되고 있기 떄문에 변수 선언 불가 : return, let, class, function

 

 

2-5.자료형

• 숫자형 : 정수, 부동 소수점 숫자 등의 숫자 / 만약 숫자가 아니라면 NaN 에러
• bigint : 길이 제약 없이 정수
• 문자형 : 빈 문자열이나 글자들로 이뤄진 문자열, 단일 문자를 나타내는 별도의 자료형은 없습니다.

let str = "Hello";  // 쌍따옴표
let str2 = 'Single quotes are ok too';  //작은따옴표
let phrase = `can embed another ${str}`;  //역따옴표

//역따옴표로 변수나 표현식을 감싼 후 ${...}안에 넣어주면, 문자열 중간에 넣을 수 있다.
//역따옴표에서만 지원
let name = "John";

// 변수를 문자열 중간에 삽입
alert( `Hello, ${name}!` ); // Hello, John!

// 표현식을 문자열 중간에 삽입
alert( `the result is ${1 + 2}` ); // the result is 3

//주의
alert( `Hello, ${"name"}!` ); // Hello, name!

• 불린형 : true, false

let isGreater = 4 > 1;

alert( isGreater ); // true (비교 결과: "yes")

• null : null 값만을 위한 독립 자료형,  null은 알 수 없는 값이거나 비어있는 값
• undefined : undefined 값만을 위한 독립 자료형, undefined는 할당되지 않은 값

//null
let age = null;

//undefined
let age;

alert(age); // 'undefined'가 출력됩니다.

• 객체형 : 복잡한 데이터 구조를 표현
• 심볼형 : 객체의 고유 식별자를 만들 때 사용

typeof 연산자 : 피연산자의 자료형

• typeof x 또는 typeof(x) 형태로 사용
• 피연산자의 자료형을 문자열 형태로 반환

typeof Math // "object"  (1)

typeof null // "object"  (2)

typeof alert // "function"  (3)

 

 

2-6.alert, prompt, confirm

• alert
  : 메시지를 보여준다.
  - 매개변수로 문자형을 받음 → alert(value); 이라면 value는 문자형이야 한다.
  - 만약, 다른 형의 값을 전달 받으면 자동으로 문자형으로 변환된다.

let value = true;
alert(typeof value); // boolean

value = String(value); // 변수 value엔 문자열 "true"가 저장됩니다.
alert(typeof value); // string

 

• prompt
  - title : 사용자에게 보여줄 문자열
  - default : 입력 필드의 초깃값(선택값) → 문자열 형태로 반환 
                  입력을 취소한 경우 null이 반환된다.

result = prompt(title, [default]);

//예제
let age = prompt('나이를 입력해주세요.', 100);

alert(`당신의 나이는 ${age}살 입니다.`); // 당신의 나이는 100살입니다.

기본 default = 100이 보임

 

• confirm
  : 매개변수로 받은 질문 question과 확인, 취소 버튼이 있는 모달 창을 보여준다.
  - 확인 버튼은 true, 취소 버튼은 false를 반환한다.

result = confirm(question);

//예제
let isBoss = confirm("당신이 주인인가요?");

alert( isBoss ); // 확인 버튼을 눌렀다면 true가 출력됩니다.

 

확인 버튼시 true, 취소 버튼시 false가 나온다.

 

 

2-7.형 변환

• 숫자형으로 변환

/*
* 나누기 / 의 경우 : 문자열이 숫자형으로 자동변환된 후 연산이 수행
*/

alert( "6" / "2" ); // 3

/*
* Number(value)
*/

//예제1
let str = "123";
alert(typeof str); // string

let num = Number(str); // 문자열 "123"이 숫자 123으로 변환됩니다.

alert(typeof num); // number

//예제2
let age = Number("임의의 문자열 123");

alert(age); // NaN, 형 변환이 실패합니다.

//예제3
alert( Number("   123   ") ); // 123
alert( Number("123z") );      // NaN ("z"를 숫자로 변환하는 데 실패함)
alert( Number(true) );        // 1
alert( Number(false) );       // 0

전달받은 값	형 변환 후
undefined	NaN
null	0
true/false	1/0
string	전달받은 문자열을 "그대로"읽되, 처음과 끝의 공백은 무시 문자열이 비어있다면 0이 되고, 오류 발생시 NaN

 

• 불린형으로 반환
  - 숫자 0, 빈 문자열, null, undefined, NaN과 같은 값은 false, 그 외의 값은 true(단, "0"의 문자열은 true)

alert( Boolean("0") ); // true
alert( Boolean(" ") ); // 공백이 있는 문자열도 비어있지 않은 문자열이기 때문에 true로 변환됩니다.

 

 

2-8.기본 연산자와 수학

• 덧셈 연산자
  - 피연산자로 문자열이 전달되면 문자열을 병합(연결)하는 역할
  - 이항 연산자를 +를 사용할 때 피연산자 중 하나가 문자열이면 다른 하나도 문자열로 반환
  - 연산은 왼쪽에서 오른쪽으로 순차적으로 진행

alert(2 + 2 + '1' ); // '221'이 아니라 '41'이 출력됩니다.

//두 개의 숫자 뒤에 문자열이 오는 경우 숫자가 더해지고, 그 후에 더해진 숫자와 문자열과의 병합

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

alert( apples + oranges ); // 23, 이항 덧셈 연산자는 문자열을 연결합니다.

• 뺼셈과 나눗셈
  - 문자형인 경우 숫자형으로 바뀐 뒤 연산 진행
  
  
• 단항 연산자의 +
  - 피연산자가 숫자가 아닌 경우 숫자형으로 변환 
  - 짧은 문법으로도 Number(...) 와 동일한 일을 할 수 있게 진행

// 숫자형이 아닌 피연산자는 숫자형으로 변화합니다.
alert( +true ); // 1
alert( +"" );   // 0

• 증가, 감소 연산자

//증가 연산자 - 전위형 : 결과값이 증가 뒨 후의 값을 반환
let counter = 1;
let a = ++counter; 

alert(a); // 2

//증가 연산자 - 후위형 : 결과값이 증가 전의 값을 반환
let counter = 1;
let a = counter++; // (*) ++counter를 counter++로 바꿈

alert(a); // 1

//반환 값을 사용하지 않는 경우라면, 전위형과 후위형엔 차이가 없다.
let counter = 0;
counter++;
++counter;
alert( counter ); // 2, 위 두 라인은 동일한 연산을 수행합니다.

<문제예제>

let a = 1, b = 1;

let c = ++a; // ?
let d = b++; // ?

/**
* a는 전위 연산자이기 때문에, 1을 증가시키고 반환하기 떄문에, a = c = 2
* b는 후위 연산자이기 떄문에, 결과값이 증가 전 값을 반환한다. b = 2, d = 1
*/

• 그 외 : 비트 / 쉼표 / 할당 등의 연산자가 있다.

 

 

2-9.비교 연산자

• 불린형 반환
• 문자열 비교 : '사전'순으로 문자열을 비교(대소문자 따짐, 정확히는 유니코드로 비교 ex : 'A' < 'a')
• 다른 형을 가진 값 간의 비교 : 숫자형으로 변경하여 비교, 불린 값의 경우 true는 '1', false는 '0'으로 변경하여 비교

let a = 0;
alert( Boolean(a) ); // false

//문자열은 true로 반환
let b = "0";
alert( Boolean(b) ); // true

//숫자형으로 형변환 하여 비교
alert(a == b); // true!

• 일치 연산자 
  == : 형이 다른 피연산자를 비교할 떄 피연산자를 숫자형을 변경하여 비교
          단, null이나 undefined는 다른 값과 비교할 때 형 변환을 하지 않는다. (둘 비교시만 형 변환, 아래 예시 참고)
  === : 형 변환 없이 값을 비교

alert( 0 == false ); // true

alert( 0 === false ); // false

• null이나 undefined와 비교하기

alert( null == undefined ); // true

alert( null === undefined ); // false
//null 숫자형 0 , undefined 숫자형 NaN

→ null/undefined의 예외를 확인하고 여부를 확인하는 코드를 따로 추가하는 습관을 들이자

//예제
"2" > "12" → true //문자형 비교

null == "\n0\n" → false //null은 오직 undefined와 같음(==에서만)

 

2-10.if과 '?'를 사용한 조건 처리

• 조건부 연산자 '?'(삼항 연산자)
• 다중 '?'

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

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

alert( message );

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

• 부적절한 '?'
  : 물음표 연산자를 사용하지 않는 것이 좋다.

let company = prompt('자바스크립트는 어떤 회사가 만들었을까요?', '');

//올바르지 않는 예시
(company == 'Netscape') ?
   alert('정답입니다!') : alert('오답입니다!');
   
//올바른 예시
if (company == 'Netscape') {
  alert('정답입니다!');
} else {
  alert('오답입니다!');
}

 

 

2-11.논리 연산자

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

• 첫 번째 truthy를 찾는 OR 연산자 ||
  - 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가
  - 각 피연산자를 불린형으로 변환, 변환 후 그 값이 true이면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환
  - 피연산자 모두를 평가한 경우(모든 피연산자가 false) 마지막 피연산자를 반환
  - 사용 : 변수 또는 표현식으로 구성된 목록에서 첫 번쨰 truthy 얻기, 단락 평가(truthy를 만나면 나머지 값을 건들이지 않음)
• 첫 번째 falsy를 찾는 AND 연산자 &&
  - OR과 반대로 각 피연산자를 불린형으로 반환, 변환 후 값이 false이면 평가를 멈추고 해당 피연산자의 변환 전 원래 값을 반환
  - 피연산자 모두가 평가되는 경우(모든 연산자 true) 마지막 피연산자가 반환
• &&의 우선순위가 ||보다 높다. 
• ! (NOT)
  - 피연산자를 불린형으로 반환 → 반환 값의 역의 값을 반환

 

 

2-12.nullish 병합 연산자 '??'

:여러 피연산자 중 그 값이 '확정되어있는' 변수를 찾는 것

let firstName = null;
let lastName = null;
let nickName = "바이올렛";

// null이나 undefined가 아닌 첫 번째 피연산자
alert(firstName ?? lastName ?? nickName ?? "익명의 사용자"); // 바이올렛

//세 변수 중 실제 값이 있는 변수의 값을 출력하느데, 세 변수 모두 값이 없다면 '익명의 사용자' 출력

• '??'과 '||'의 차이
  - '||'는 첫 번째 truthy를 반환
  - '??'는 첫 번째 정의된(defined) 값을 반환
• null과 undefined, 숫자 0을 구분지어 다뤄야 할 떄 이용
• 우선 순위 : 대다수의 연산자보다 낮고 ?와 =보다는 높다.
• 괄호 없이 ||나 &&와 함께 사용하는 것은 금지

let height = 0;

alert(height || 100); // 100 , height -> falsy, 마지막 값 반환
alert(height ?? 100); // 0 , 정의된 height 반환

 

 

 

2-13.while과 for 반복문

• do.. while문 : 최소한 한 번 본문 실행하고 while문
• break : 반복문 빠져나올 떄
• continue : 다음 반복으로 넘어갈 때

 

 

 

 

---

 

https://ko.javascript.info/

모던 JavaScript 튜토리얼