javascript 101

script

script 태그엔 자바스크립트 코드가 들어간다.
브라우저는 이 태그를 만나면 안의 코드를 자동을 처리한다.

외부 스크립트

자바스크립트 코드의 양이 많을댄, 소분하여 저장할 수 있음

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

스크립트가 길어지면 별개의 분리된 파일을 만들어 저장하는 것이 좋다. --> 브라우저가 스크립트를 다운받아 캐시(cache)에 저장하기 때문. --> 새로 다운받지 않고 캐시에서 가져와 사용함. 트래픽 절약 및 웹 페이지 속도 상승!!!

• src 속성이 있으면 태그 내부의 코드는 무시된다. 따로 사용하고 싶다면 스크립트 두 개로 분리시켜야 정상적으로 실행된다.

변수(variable)

let 과 var

만들어진지 오래 된 스크립트에서는 let 대신 var라는 키워드를 통해서 변수를 설정한다.

• var 은 let 과 거의 동일하게 동작하지만 '오래된' 방식이다. (그 차이가 중요하진 않음)

변수 명명 규칙

1. 변수명에는 오직 숫자와 문자 그리고 $, _ 기호만 들어갈 수 있다.
2. 첫 글자는 숫자가 될 수 없다.

• 무엇을 하고 있는지 명확히 알고 있지 않는 경우 외에는 줄임말이나 a, b, c와 같은 짧은 이름은 피하도록 한다.
• 최대한 서술적이지만 간결하게 명명한다.

문자형

1. 큰따옴표: "Hello"
2. 작은따옴표: 'Hello'
3. 역 따옴표(백틱, backtick): Hello

alert( `the result is ${1 + 2}` ); // the result is 3

${…} 안에는 name 같은 변수나 1 + 2 같은 수학 관련 표현식을 넣을 수 있다. 무엇이든 들어갈 수 있다. 이렇게 문자열 중간에 들어간 변수나 표현식은 평가가 끝난 후 문자열의 일부가 됩니다.

null

null 값은 지금까지 소개한 자료형 중 어느 자료형에도 속하지 않는 값
null 값은 오로지 null 값만 포함하는 별도의 자료형

‘undefined’ 값

undefined 값도 null 값처럼 자신만의 자료형을 형성
값이 할당되지 않은 상태를 나타낸다.

객체와 심볼

객체형 : 복잡한 개체를 표현할 수 있고, 데이터 컬렉션도 나타낼 수 있다.
심볼형 : 객체의 고유한 식별자를 만들 때 사용된다.

prompt

prompt 함수는 두 개의 인수를 받는다.

result = prompt(title, [default]);

함수가 실행되면 텍스트 메세지와 입력 필드, 확인 및 취소 버튼이 있는 창으로 띄워준다.

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

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

컨펌 대화상자

result = confirm(question);

confirm 함수는 매개변수로 받은 질문과 확인 및 취소 버튼이 있는 창을 보여준다.

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

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

이항 연산자 '+' 와 문자열 연결

덧셈 연산자 + : 숫자를 더한 결과를 반영

이항 연산자 + : 피연산자로 문자열이 전달되면 덧셈 연산자는 덧셈이 아닌 문자열을 병합시켜버린다!
피 연산자 중 하나가 문자열이면 다른 것들도 문자열로 변환~

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




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

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



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

// 이항 덧셈 연산자가 적용되기 전에, 두 피연산자는 숫자형으로 변화합니다.
alert( +apples + +oranges ); // 5

// `Number(...)`를 사용해서 같은 동작을 하는 코드를 작성할 수 있지만, 더 기네요.
// alert( Number(apples) + Number(oranges) ); // 5

비교연산자

다른 형을 가진 값 간의 비교

비교하려는 값의 자료형이 다르면 자바스크립트는 이 값들을 숫자형으로 바꿉니다.

alert( '2' > 1 ); // true, 문자열 '2'가 숫자 2로 변환된 후 비교가 진행됩니다.
alert( '01' == 1 ); // true, 문자열 '01'이 숫자 1로 변환된 후 비교가 진행됩니다.

== : 덜 빡센 비교 연산자
=== : 훨씬 빡센 비교 연산자

alert( null == undefined ); // true
alert( null === undefined ); // false

1. 숫자 0, 빈 문자열"", null, undefined, NaN은 불린형으로 변환 시 모두 false가 됩니다. 이런 값들은 ‘falsy(거짓 같은)’ 값이라고 부릅니다.
2. 이 외의 값은 불린형으로 변환시 true가 되므로 ‘truthy(참 같은)’ 값이라고 부릅니다.

조건부 연산자 ?

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

• 물음표 연산자라고 불리는 조건부 연산자를 사용하면 긴 코드를 간결하게 변형시킬 수 있다.

조건부 연산자는 물음표? 로 표시!
피연산자가 세 개이기 때문에 조건부 연산자를 '삼항(ternary) 연산자’라고도 부른다.
참고로, 자바스크립트에서 피연산자가 3개나 받는 연산자는 조건부 연산자가 유일!

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

if (age > 18) {
  accessAllowed = true;
} else {
  accessAllowed = false;
}

alert(accessAllowed);

위 코드는 아래 코드로 정리할 수 있다.

let accessAllowed = (age > 18) ? true : false;

비교 연산자 자체가 true나 false를 반환하기 때문에 위 예시에서 물음표 연산자를 사용하지 않아도 됩니다.

물음표 연산자 ? 를 여러개 연결하면 복수의 조건을 처리할 수 있다.

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

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

alert( message );

이 코드를 if else 구문을 이용하면 똑같이 다음과 같이 바뀐당!

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

null 병합 연산자

?? : null 병합 연산자 (여러 피연산자 중 그 값이 확정되어 있는 변수를 찾는 것)

?? 와 || 의 차이
1. || 는 첫번째 truty한 값을 반환한다.
2. ?? 는 첫번째 정의된(define) 값을 반환한다.

안정성 관련 이슈 때문에 ??는 &&나 ||와 함께 사용하지 못한다.

반복문

do ... while 반복문

do ... while 반복문을 사용하면 조건을 반복문 본문 아래로 옮길 수 있다.
(일단 한번은 실행을 하게 됨)

반복문 빠져 나오기

break

지시자의 break를 사용하면 원하는 때에 반복문을 탈출할 수 있다.

continue

break이랑 비슷하지만 continue는 전체 반복문을 나오진 않는다. 다만 현재 진행중인 과정만 멈추고 다음 반복문을 실행한다.

• 현재 반복을 종료시키고 다음 반복문으로 넘어가고 싶을 때 사용한다.

여러 개의 중첩 반복문을 한 번에 빠져나와야하는 경우 : 레이블을 활용한다!

• 레이블 : 반복문 앞에 :과 함께 쓰이는 식별자로 이름처럼 생각하면 된다.

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('완료!');

함수

유사하게 동작하는 코드를 여러 곳에서 필요해서 사용할 때 활용.

• alert, promt, confirm 등 내장함수

지역변수

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

외부변수

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

• 단순히 외부 변수에 접근하는 것뿐만이 아니라 수정도 가능.

매개변수(parameter)

임의의 데이터를 함수 안에 전달할 수 있음.
인수라고도 불림 (argument)

함수는 함수 이름에 언급되어있는 동작을 정확히 수행해야 한다.
그 이외의 동작은 수행해선 안된다.
함수가 길어졌다 ? --> 함수를 쪼갤때가 왔다.

자바스크립트에서는 함수 명 옆에 괄호가 있어야지만 함수가 호출된다.
또한 함수를 값처럼 취급하기 때문에 함수의 소스코드가 문자형으로 바뀌어 출력된다.

함수 표현식 vs 함수 선언문

// 함수 표현식
let sum = function(a, b) {
  return a + b;
};

함수는 표현식이나 구문 구성 내부에 생성된다.

// 함수 선언문
function sum(a, b) {
  return a + b;
}

함수는 주요 코드 흐름 중간에 독자적인 구문형태로 존재.

• 함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성
• 함수 선언문은 함수 선언문이 정의되기 전에도 호출될 수 있다.
  또한, 엄격 모드에서 함수 선언문이 코드 블록 내에 위치하면 어디에서든 접근 가능하지만 블록 밖에서는 함수에 접근하지 못한다.
• 함수 선언문을 사용하면 가독성도 좋고, 함수 선언 이전에 호출이 가능하기 때문에 더 자유롭다!