[JS] 입문

1. 참조 방식

1.1 내장 방식

코드가 일회성 or 짧음

1.2 link 방식

<script src=".js"></script>
코드가 길어질 때 or 재사용

1.3 위치는 아무데나 가능

body 맨끝에 주로

2. 표기법

• dash-case : CSS (단어 띄어쓰기)
• snake_case, camelCase, PascalCase : programming할 때 주로 사용하는 표기법들

cf. 주석
한 줄 //
두 줄 이상 /* */

3. 변수

특정 값을 담는 공간

키워드 변수이름 = 값

ex.
const name = "une" 선언과 할당 동시에
let name; 변수 선언
name = value; 할당

3.1 var

• 재선언 O 재할당 O

ex.
var name;
'name'이라는 변수 선언
선언만 하면 값이 없으므로 undefined 상태

name="une 1";
name="une 2";
'une 1'을 재할당하고, 다시 'une 2'로 재할당.

var은 재선언이 가능해서 오류 발생할 가능성이 높기 때문에 지양하는 추세.

3.2 let

• 재선언 X 재할당 O
• 일반 변수 선언 시 주로 사용

3.3 const

• 재선언 X 재할당 X
• 그래서 선언과 할당을 동시에 해야 한다.

4. 자료형

js는 약한 타입 언어: 변수 안에 어떤 자료형이든 들어갈 수 있다.

cf. 강한 타입 언어: 변수 안에 어떤 자료형이 들어갈지도 선언.
ex. int age = 33;
(JAVA, C, C++, ...)

4.1 기본(Primitive) 자료형

string, number, boolean(T/F), null, undefined

cf. null vs undefined

• null :
  값을 의도적으로 비워둘 때 사용한다. typeof로 자료형을 확인하면 object로 인식. 그래서 엄밀히 말하자면 기본자료형보다는 객체, 참조 자료형이 더 어울린다고 할 수 있다.

• undefined :
  ES에서 변수는 '선언'한다, 함수는 '정의'한다고 표현한다. 하지만 undefined의 '정의되지 않음'은 변수가 선언되었지만 변수 값을 할당하지 않은 상태를 말한다. typeof로 자료형을 확인하면 undefined를 반환한다.

• true or false in boolean aren't "string". It has a value itself.

• 여럿 부르기
  "string" + variable-name
"string", variable-name
variable-name + variable-name
  `string ${variable-name} `

4.2 객체(object) 자료형

• 기본형 제외한 모든 것, 즉 자바스크립트의 대부분이라고 해도 무방하다.
  - ex. 함수, 배열, 클래스, ...
• 하나의 사물에 대한 정보 저장(동작, 속성 등의 꾸러미)
• key와 value로 구성된 property(=데이터. 함수도 가능)의 집합

ex.

    let cat = {
    //key: value 구성
    name: "나비",
    age: 80,
    mew: function() {} //메서드
    }

4.2.1 배열(Array, List)

비슷한 특징을 가진 값들을 하나에 변수에 담을 때.

• 인덱싱: 배열의 원소에 접근할 때 사용
  ex. fruits[0]

4.2.2 딕셔너리

전화번호부처럼 key:value 형태로 저장한다. 배열(=리스트)에서는 원하는 값을 찾을 때 인덱싱으로 검색해야 하지만, 딕셔너리는 key값으로 쉽게 찾을 수 있다.
ex.

let basketBall {
	player: 5,
	isFun: true,
	onePoint: "자유투",
	cheering: function () {
    	console.log("하나만 더!");
    } //객체 안에 있는 function은 메서드!
}

5. 형변환

5.1 자동 형변환

자바스크립트가 스스로 형태를 변환
ex. prompt 사용 시 string 취급

5.2 명시적 형변환

• 문자열로
  String()
toString()

• 정수로
  Number()
ParseInt()

6. 연산자

6.1 비교연산자

== : 값만 비교
=== : 자료형까지 비교

마찬가지로

!= : 값만 비교
!== : 자료형까지 비교

ex.

80 === "80" //false
80 != "80" //false

그외 >=, >, <=, < 존재

cf. null check

코드를 짤때 값이 null인지 확인해야 할 때가 있다. null과 undefined는 서로를 ==연산자로 비교할 때만 true를 반환하기 때문에 이를 활용해 알아볼 수 있다.

ex.

//1
null == undefined //true

//2
null == 1 //false
undefined == "1" //false

첫번째 상황 외에 null이나 undefined를 피연산자로 비교하면 언제나 false값을 반환한다.

6.2 산술연산자

기본 사칙연산 +, -, /, *

% : 나머지 구하기
ex.

console.log(5 % 2 == 1) // true

• 배수 구할 때 용이
  - 위 예시에서 나머지가 0이면 2의 배수(짝수)

** : n의 m승
ex.
2**3 = 8

6.3 논리연산자

&& and
|| or
! not

ex.
!true => false

6.4 증감연산자

for문에서 자주 쓰인다.

let num = 6;
console.log(num++)
// 코드 처리 후 증가하기 때문에 '전위연산자'라고 부른다.
console.log(++num)
// 증가 후 코드 처리하기 때문에 '후위연산자'라고 부른다.

cf. 연산자 줄이기

num = num + 1; <=> num +=1;
num = num - 1; <=> num -=1;

같은 방식으로 *=(곱하기), /=(나누기)

7. 함수

함수는 선언문과 호출로 이루어진다. 함수에서 나온 값을 변수에 저장하여 활용.

• 매개변수 () : 함수 외부에서 함수 내부로 값 전달
• 반환 return : 함수 내부에서 함수 외부로 값 전달
• 매개변수, 반환값 유무에 따라 4가지 방식으로 나눌 수 있음.
  - 여기에 명시적 함수, 함수 표현식으로 또 다르게 표현할 수 있다.

7.1 명시적 함수로 선언

function funcName (//매개변수) {
	// 기능
    }
    
funcName(); // 함수 호출

명시적 함수는 호출 먼저 하고 후에 선언해도 기능한다. 이는 자바스크립트의 호이스팅(함수 선언이 호출보다 먼저 메모리에 저장되는 현상) 덕분에 top-bottom의 순서를 신경 쓰지 않고 작성해도 괜찮다.

7.2 함수 표현식으로 선언

let sum = function () => {

}

let sum = function (//매개변수) {
	return //반환값; 
    }

8. 조건문

8.1 if

ex.

if(condition1) {
	condition1 is true then
}
else {
	condition1 is false then}

if(condition1) {
	// condition1 is true then
} else if {
	// (condition1 is false임을 미리 전제 &&)
    // condition2 is true then
}
else {
	// all conditions is false then}

if문을 통과하지 못해서 else if문으로 넘어왔다면, 이미 if문에 있는 조건은 해당하지 않는 것이므로 else if문에 기입할 필요가 없다.

• if를 시작으로 조건 검사 시작.
  - else나 else if 단문으로 사용 불가.
  - 각 if문은 개별적으로 인식.
• 가독성 해치는 중첩 if문 지양.

8.2 switch

간단한 값 비교할 때 사용

let a = 2;
switch (a) {
	case 1: 
		console.log('a는 1입니다');
        break;
    case 2:
    	console.log('a는 2입니다');
        break;
    default:
    	console.log('a값을 모르겠어요');
   }

• break를 해주어야 해당 케이스 끝
  - 하지 않으면, 위 케이스(case1, case2)는 통과되었다는 전제 하에 무조건 실행.

8.3. 삼항연산자

조건 ? 참일 때 실행할 코드(1줄만) : 거짓일 때 실행할 코드(1줄만)

ex.

let username="une";

username == "une" ? console.log("hi une") : console.log("who are u?)";

삼항 연산자를 처음부터 변수에 담을 수도 있다.

let msg = username == "une" ? "hi une" : "누구세요?"
console.log(msg);

---

덧붙이는 말

• 알아볼 개념 : js 호이스팅