개인 공부를 위해 작성했습니다

JavaScript란?

• JavaScript는 웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어. 오늘날 가장 중요한 플랫폼이라고 할 수 있는 웹브라우저에서 유일하게 사용할 수 있는 프로그래밍 언어이다.
• 웹 페이지를 만들 때 HTML로 뼈대를 만들고, CSS로 디자인하고 꾸몄다면, JavaScript로 동적으로 움직이게 한다

●Data Types

1. 숫자 number

• 숫자를 표현하거나 산술 연산을 하는데 사용되는 데이터 타입.
• 기본적으로 + - * / 등의 산술연산이 가능하며 Math 라는 내장객체를 이용하여 수학함수를 이용한 결과를 얻을 수도 있다

  ❕ NaN Not a Number

  • 해당 하는 값이 숫자가 아니란 뜻

2. 문자, 문자열 string

• String은 문자열을 표현하는데 사용되는 데이터 타입.
• 문자열이라 함은 문자 하나하나가 연결되어 하나의 표현을 이루는 데이터를 말하는 것

3. 블리언 boolean

• true, false값을 가지는 논리 데이터 타입

4. 객체 object

• function 함수
• array 배열
• date 날짜
• regExp 정규식

5. null

• 텅텅 비어있는 값, empty

6. undefined

• 초기화(선언) 되지 않았거나 값이 할당되지 않았음을 나타내는 값

●변수 Variable

• 변수(Variable)는 (문자나 숫자 같은) 값을 담는 컨테이너로 값을 유지할 필요가 있을 때 사용한다.
• 여기에 담겨진 값은 다른 값으로 바꿀 수 있다.
  ✨참고✨변수는 코드의 재활용성을 높여준다

○변수의 선언

• var

  • 전통적으로 JavaScript에서의 변수 선언 방식

  • 🚩집중! var 사용 시 주의할 점!

    • hoisting: 어디에 선언했냐에 상관없이 선언한 것을 항상 젤 위로 끌어 올려주는 것
    • 중복된 변수명 사용 가능
    • var 생략 가능
    • Scope Rule: 블럭을 철저히 무시

{
  name = 'April';
  var name;
}
console.log(name);
// 블럭{}안에서 변수를 선언했음에도 블럭 밖에서 불러올 수 있음

✨참고✨Use strict;

• Strict Mode의 선언방식
• ES5부터 적용되는 키워드로,
• 안전한 코딩을 위한 하나의 가이드라인
  • 코드에 더 나은 오류 검사를 적용하는 방법
  • Strict Mode를 사용하면, 예를 들어 암시적으로 선언한 변수를 사용하거나 읽기 전용 속성에 값을 할당하거나 확장할 수 없는 개체에 속성을 추가할 수 없다.
• 'use strict';

• let (added in ES6)

  • 변수가 선언된 블록, 구문 또는 표현식 내에서만 유효한 변수를 선언,
  • var 키워드가 블록 범위를 무시하고 전역 변수나 함수 지역 변수로 선언되는 것과 다른 점이다

• const

  • 한 번 할당하면 값이 절대 바뀌지 않는 것
• 기본 문법

let 변수명;
let 변수명 = 초기에 할당할 값;

🚩집중!

• Mutable : 변경 가능한 변수는 let 으로 선언
• Immutable: 변경 불가한 변수는 cosnt 로 선언

●연산자

○비교 연산자

º대입 연산자

• a=1 '='는 우항의 값인 1을 좌항의 변수 a에 대입하는 '대입 연산자'

º비교 연산자

• 프로그래밍에서 비교란 주어진 값들이 같은지, 다른지, 큰지, 작은지를 구분하는 것을 의미

º동등 연산자

• == 좌항과 우항을 비교해서 서로 값이 같다면 true 다르다면 false가 된다

alert(1==2)             //false
alert(1==1)             //true
alert("one"=="two")     //false 
alert("one"=="one")     //true

º일치 연산자

• === 좌항과 우항이 정확하게 같을 때 true 다르면 false가 된다

alert(1=='1');                  //true
alert(1==='1');                 //false

alert(null == undefined);       //true
alert(null === undefined);      //false
alert(true == 1);               //true
alert(true === 1);              //false
alert(true == '1');             //true
alert(true === '1');            //false
 
alert(0 === -0);                //true
alert(NaN === NaN);             //false

º부정과 부등호

• != !는 부정을 의미한다. '같다'의 부정은 '같지 않다'이다. 이것을 기호로는 !=로 표시한다
• !== !=와 ==의 관계와 같다. 정확하게 같지 않다는 의미
• > 좌항이 우항보다 크다면 참, 그렇지 않다면 거짓임을 알려주는 연산자
• >= 좌항이 우항보다 크거나 같다

○산술 연산자

console.log(1 + 1); // add
console.log(1 - 1); // substract
console.log(1 / 1); // divide
console.log(1 * 1); // multiply
console.log(5 % 2); // remainder 나누고 나머지 값
console.log(2 ** 3); // exponentiation 2의 3승

○할당 연산자

let x = 3;
let y = 6;
x += Y; // x = x + y;
x -= Y; // x = x - y;
x *= Y; // x = x * y;
x /= Y; // x = x / y;

○논리 연산자

• || (or) true 값이 나오면 중단, 그 뒤의 값은 무시
  console.log('or: ${value1 || value2 || check()}');

• $$ (and) 모든 값이 true 이어야 return.

  • (and)는 null값 체크할 때에도 많이 사용됨
    console.log('or: ${value1 $$ value2 $$ check()}');

• ! (not) 논리 부정의 의미. 값을 반대로 변경. true일 경우는 false로, false일 경우는 true로 변경
  console.log(!value1);

○조건(삼항) 연산자

• 3개의 항을 사용하는 유일한 연산자.
  • 조건 연산자는 조건에 따라 2개의 값중 하나를 가질 수 있다
• 기본 문법 조건 ? 값1 : 값2

// condition ? value1 : value2
const name = 'april';
console.log(name === 'april' ? 'yes' : 'no'):

●if문_ 조건문

조건문이란?

• 컴퓨터가 계산기와 구분되는 가장 중요한 차이
• 주어진 조건에 따라 application을 다르게 동작하게 하도록 하는 것
• 프로그램을 똑똑하게 만드는 것

• if, else if, else

const name = 'april';

if(name === 'april') {
	console.log('Hello april');
} else if (name === 'coder') {
	console.log('You are amazing coder');
} else {
	console.log('Unknown');
}

●switch문_ 다중 조건문

• 다중 체크할 경우 사용
• if else를 반복한다면 switch를 사용

const browser = 'IE';
switch (browser) {
  case 'IE';
    console.log('go away!');
      break;
  case 'Chrome';
    console.log('love you!');
      break;
  case 'firefox';
    console.log('nice!');
      break;
  default
    console.log('same all!');
      break;
}

✨참고✨

• break; 즉시 중단
• continue; 지금의 단계만 중단하고 다음으로 이동

●for문_ 반복문

반복문이란?

• 프로그래밍적으로 반복 작업을 실행
• loop, iterate
• for문, while문
• 조건문이 컴퓨터를 똑똑하게 한다면, 반복문은 컴퓨터를 강력하게 한다

for (i = 3; i > 0; i--) {
	console.log('for: ${i}');
}

• 블럭 안에 let으로 i의 지역 변수를 선언

for (let i = 3; i > 0; i = i - 2) {
	console.log('inline variable for: ${i}');
}

●while문_ 반복문

1. while문

• 조건을 먼저 체크 후 실행. 조건문이 일치할 경우 실행하고 싶다면 사용

let i = 3;
while (i > 0) {
	console.log('while: ${i}');
	i--;
}

2. do while문

• 실행한 다음에 조건이 맞는지 아닌지 검사. 일단 실행하고 조건을 체크하고 싶으면 사용

let i = 3;
do {
  console.log('do while: ${i}');
    i--;
} while (i > 0); 

✅ 목표!

• JavaScript에 대한 개념을 이해하고
• 데이터 타입과 연산자에 대해 익힌다
• 반복문, 조건문을 익힌다

드림코딩 by 엘리
생활코딩
MDN