[JS] JavaScript(1) - 개념 / 변수 /자료형 / 형변환 / 연산자

 

 

html 이 집의 구조, css가 집의 인테리어 였다면 js 는 집의 기능 역할을 한다.

 

 

1. 개념

 

- JavaScript 란? 웹페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어이다

- console.log()

   ➡️ 브라우저의 개발자 도구-> 콘솔 에서 확인 가능하다.

- alert()

   ➡️ 브라우저가 열렸을 때, 그 내용을 알림창으로 보여준다.

- 내장 방식과 링크 방식으로 작성 가능하다

   ➡️ 내장방식 : html 파일 내에 작성하는 방식으로, Head 태그 Body 태그와 상관 없이 어느 위치에서나 사용 가능

   ➡️ 링크방식 : JS 일을 따로 만들어서 사용하는 방식으로, 내장방식과 마찬가지로 위치는 어디서나 사용 가능

- 읽히는 순서에 따라 작동한다.

 

 

2. 표기법

 

- dash-case(kebab-case)

   ➡️ Ex. the-quick-brown-fox-jumps-over-the-lazy-dog

- snake_case

   ➡️ Ex. the_quick_brown_fox_jumps_over_the_lazy_dog

- camelCase

   ➡️ Ex. theQuickBrownFoxJumpsOverTheLazyDog

- ParcelCase

   ➡️ Ex.TheQuickBrownFoxJumpsOverTheLazyDog

 

 

3. 변수

 

var	중복선언 O, 재할당 O	선언과 동시에 초기화가 이루어지며 아무것도 할당하지 않으면 자동으로 undefined 할당
let	중복선언 X, 재할당 O	var와 동일하게 선언하지 않으면 자동으로 undefined 할당
const	중복선언 X, 재할당 X	초기 선언 시 반드시 초기화를 동시에 진행해야 함

var 는 편리하지만 , 변수명이 중복되어도 재선언이 가능하기 때문에 기존의 변수에 덮어 씌워버린다. 또한 변수가 블록 단위에서 끝나는 것이 아니라, 마음대로 전역으로 돌아다니면서 영향력을 행사한다. 따라서 var 사용시 문제가 발생할 확률이 높기 때문에 ES6 문법 부터는 var 대신 let 사용을 권장하고 있다.

 

 

4.변수의 기본 규칙

- 변수 이름으로는 문자 / 숫자 / $ / _ 만 가능

- 첫 글자는 숫자가 될 수 없음

- 예약어 사용 불가 

   ➡️ 특별한 의미를 지녀, 변수나 함수명 등으로 사용할 수 없는 단어 ( Ex. break, case, catch, continue ...

- 변수 이름은 읽기 쉽도록 정한다.

- 상수는 대문자로 선언하여 다른 개발자가 알기 쉽게 한다.

 

 

5. 자료형

 

 언어 타입 

 

강한 타입 언어	약한 타입 언어
타입 검사를 통과하지 못하면 실행 자체가 안됨. String, int , double 등 타입을 한 종류로 명확히 지정.	런타임에서 타입 오류를 만나더라도 실행을 막지 않음. 타입이 여러 종류인 값들이 상관없이 지정됨.
Java, C, C++, C# ...	JavaScript, Python ...

 

 

 데이터 종류 

 

String	문자형 데이터	문자와 변수를 동시 사용 하고 싶을 때 -> 메소드의 매개 변수로 넣어서 사용  console.log("문자",변수,"문자"); -> '+' 연산자를 사용해 변수를 문자로 변환 후 사용  console.log("문자"+변수+문자); -> 백틱 문자 사용   `문자 ${변수} 문자`
Number	숫자형 데이터	정수 및 소수점 숫자를 나타냄
Boolean	참, 거짓 데이터	true, false 두가지 값 가지는 데이터
Undefined	미할당 데이터	값이 할당되지 않은 상태를 표기
Null	의도된 빈 데이터	어떤 값이 의도적으로 비어있음을 의미할 때 사용
Array	배열 데이터	여러 데이터를 순차적으로 저장
Object	여러 데이터 꾸러미

 

 참고 사항 

맥북에서의 백틱키는 [ option + ~ ] 이다.

undefined = 선언은 했는데 할당은 안함. 아직 값이 들어가지 않은 변수

 

 

- 코드 예시 

  
      const msg = "안녕하세요";

      const name = "길동";

      // String 데이터
      // 안녕하세요 길동님
      console.log(msg);
      console.log(name);
      console.log("님");

      console.log(msg + name + "님");
      // + 는 변수를 문자로 변환 후 출력
      console.log(msg, name, "님");
      // 메소드의 매개변수로 넣어서 이용
      console.log(`${msg} ${name}님`);
      // 백틱 : (`) 문자를 쓰다가 변수를 쓸 수 있음 : 옵션키+물결

 

 

 

 - 실행 결과 

스트링 데이터 출력시 연산자를 이용하는지, 매개변수로 이용하는지, 백틱키를 이용하는지에 따라 출력 결과가 다름을 알 수 있다.

 

 

 배열에서 사용 가능한 속성 함수 

 

변수명.length	배열의 길이를 구함
변수명.push(추가할 값)	배열의 마지막에 요소 추가 후 반환
변수명.pop()	배열의 마지막 요소 제거 후 반환
변수명.unshift(추가할 값)	배열의 맨 앞에 요소 추가 후 반환
변수명.shift()	배열의 맨 앞 요소 제거 후 반환
변수명.indexOf(찾을 값)	주어진 값과 일치하는 배열의 첫번째 인덱스 반환 존재하지 않을 시 -1 로 반환됨
변수명.includes(찾을 값)	배열이 특정 요소를 포함하고 있는지 T / F 로 판별
변수명.reverse()	배열의 순서를 반전

 

 type of 

 

• 해당 자료형이 어떤 것인지 알려줌

 

- 코드 예시

console.log(typeof "안녕");
console.log(typeof 3);
console.log(typeof null);

 

- 실행 결과

 

 

 

6. 형변환

 

• JS 는 자동 형변환이 되는 프로그램으로 ,예를 들어 숫자를 입력해도 자동으로 문자로 저장되기 때문에 Error가 뜨지 않음.
• 자동 형변환은 편할 수 있으나 프로그램에 문제를 일으킬 확률이 높음
• 따라서 자동 형변환에 의지 하지 않고 개발자가 직접 형변환을 시켜줘야 함

 

 문자형변환 

 

 - 문자로 변환 시켜줌

 

String()	null 과 undefined 에도 문제 없음
toString()	null과 undefined 에서 문제 발생
String() 과 toString() 의 차이? ➡️ String() 은 문자형으로 변경하면서 전역변수  ➡️ toString()는 누군가의 함수이기 때문에 null 이나 undefined에서 에러나고 존재하는 애 한테만 쓸 수 있음

 

 숫자형변환 

 

➡️ Number()

 

 

- 코드 예시

      console.log("형변환");
      let num = 456;

      console.log(typeof num);

      let num1 = String(num);
      console.log(typeof num1);

      let num2 = num.toString();
      console.log(typeof num2);

      console.log(typeof num);

 

- 실행 결과

 

 

7. 연산자

 

 기본 연산자 

 

 - 대입 연산자 : =

 - 비교 연산자 : ==, !=, ===, !===, >, >=, <, <=

    ➡️ ===는 타입까지 비교, == 는 타입 제외 비교

    ➡️ 변수의 값 뿐만 아니라 자료형 까지도 비교 가능 ( 자료형 비교시 T / F로 반환 )

 - 산술 연산자 : +, -, *, /

 - 논리 연산자 : !, &&, ||

 

 - 나머지 연산자 : %

    ➡️ 홀수 판단 : num%2==1 이면 홀수

    ➡️ 짝수 판단 : num%2==0 이면 짝수

  - 거듭 제곱 : **

    ➡️ Ex. 2**3 = 8

 

< 연산자 줄여서 쓰는 법 >  num = num + 5 ➡️ num += 5  num = num - 5 ➡️ num -= 5  num = num * 5 ➡️ num *= 5  num = num / 5 ➡️ num /= 5

 

 증가 / 감소 연산자 

 

Num++;	1 씩 증가
Num--;	1 씩 감소
연산자가 앞에 붙느냐 뒤에 붙느냐의 차이? ➡️ Num++; 과 같이 연산자가 뒤에 있는 경우 변수 대입을 먼저 한뒤 덧셈하고, ++Num; 과 같이 연산자가 앞에 있는 경우 더하고 난 뒤 변수 대입을 한다.

 

 논리 연산자 

 

||	OR 연산자
&&	AND 연산자
!	NOT 연산자