🐚 JS란?

: HTML, CSS를 좀 더 다이나믹하게 사용하기 위해 탄생한 프로그래밍 언어로써, 각 브라우저마다 사양이 달라지자, ECMAScript라는 표준이 탄생하였다.

---

🐚 표기법

• dash-case ( kabab-case )
  html css
  : 데쉬기호 - 를 사용한다.
• snake-case
  html css
  : 언더바 _ 를 사용한다.
• camelCase
  js
  : 첫 단어의 첫글자는 소문자, 두번째 단어의 첫글자는 대문자
• ParcelCase
  js
  : 첫 단어, 두번째 단어 모두 첫글자는 대문자이다.

---

🐚 zero-based Numbering

: 특수경우를 제외하고는 0부터 숫자를 매긴다.

---

🐚 변수

: 하나의 값을 저장할 수 있는 저장공간에 변수명을 붙여 접근한다. var, let, const등의 예약어를 통해서 변수를 선언한다.

• var : 같은 이름으로 다시 선언 가능, 여러차례 대입 가능
• let : 같은 이름으로 다시 선언 불가능, 대입을 통해서만 값 변경 가능
• const : 같은 이름으로 다시 선언 불가능, 선언할 때 대입이 필수
  🏷 const의 변수명을 지정할 때는 주로 대문자로 작성한다
  ex ) const CONTAINER

🐋 변수선언

• 선언과 값 대입을 각각 한다. 대입연산자 =를 활용해 변수에 값 대입한다.

var str;
str='Hello world';

• 선언과 값 대입을 동시에 한다.

var str = 'Hello world';

🐋 변수명명

• 문자와 숫자, $, _ 만 사용 가능
• 숫자는 첫글자에 올 수 없으며 두번째 글자부터 올 수 있다.
• 예약어는 변수명으로 사용할 수 없다.

---

🐚 데이터 종류 ( 자료형 )

: js의 변수 type(자료형)이 고정되어 있지 않음. 원시타입과 참조타입이 존재한다.

🐚 원시타입

🐋 sring ( 문자열 )

따옴표사용 : "" '' 백틱(``)

let myName='Yeun';
let hello= `Hello ${myName}`
console.log(hello);	//Hello Yeun

🏷 백틱 안에 포함되어 있는 ${} 은 데이터를 보관해주는 역할을 한다.

let name="Ilya";
consol.log( `hello ${name}` );	// hello Ilya
consol.log( `hello ${"name"}` );	// hello name
consol.log( `hello ${1 + 2}` );	// hello 3

🐡 명시적 형 변환

String()
: String 함수를 이용하여 소괄호 안에 있는 값을 문자열로 변환시켜준다.

console.log(String(123)); // 123
console.log(String(NaN)); // NaN
console.log(String(1 / 0)); // Infinity
console.log(String(-1 / 0)); // -Infinity
console.log(String(true)); // true
console.log(String(false)); // true
console.log(String(undefined)); // undefined
console.log(String(null)); // null
console.log(String({name: 'bigtop'})); // [object Object]

참고 블로그 : https://bigtop.tistory.com/18

🐡 암시적 형 변환

이항 연산자 : 덧셈 연산자 +
: 덧셈 연산을 할 때 한쪽이라도 문자열이라면 다른쪽도 문자열로 변환시킨다.

// string
console.log('문자' + 1234); // 문자1234
console.log('문자' + true); // 문자true
console.log('문자' + false); // 문자false
console.log('문자' + null); // 문자null
console.log('문자' + undefined); // 문자undefined
// number
console.log(1234 + '1234'); //12341234
console.log(1234 + true); // 1235
console.log(1234 + false); // 1234
console.log(1234 + null); // 1234
console.log(1234 + undefined); // NaN
// boolean
console.log(true + 123); // 124
console.log(false + 123); // 123
console.log(true + null); // 1
console.log(false + null); // 0
console.log(true + undefined); // NaN
console.log(false + undefined); // NaN
// null
console.log(null + 1234); // 1234
// undefined
console.log(undefined + 1234); // NaN

📍 문자열이 없는 식에는 모두 숫자열로 변환하여 결괏값을 냈다.
참고 블로그 : https://bigtop.tistory.com/18

---

🐋 Number ( 숫자열 )

: 정수 및 부동소수점 숫자를 나타낸다.

📍let=123은 숫자 데이터이고 let="123"은 자료형 데이터이다.

• 특수숫자값 : infinity, NaN

🐡 명시적 형 변환

Number()
: Number 함수를 이용하여 소괄호 안에 있는 값을 숫자열로 변환시켜준다.

console.log(Number('')); // 0
console.log(Number('abc')); // NaN
console.log(Number('123')); // 123
console.log(Number('123a')); // NaN
console.log(Number(true)); // 1
console.log(Number(false)); // 0
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN
console.log(Number({name: 'bigtop'})); // NaN
console.log(Number({})); // NaN

📍 빈 문자열은 0으로 변환된다
📍 숫자와 문자가 혼합이 되면 NAN으로 변환된다.
📍 null은 0으로 변환되고 undefined는 NaN으로 변환된다.
📍 빈 객체는 NaN으로 변환된다.
🏷의도적으로 비어있는것은 0 반환 : (""), null
참고 블로그 : https://bigtop.tistory.com/18

🐡 암시적 형 변환

단항 연산자 + / -
: 숫자 타입이 아닌 피연산자에 단항 연산자를 사용하면 숫자 타입으로 변환된다.
📍 -는 +와 달리 부호 반전을 하는 역할을 가진다.

var a = ' 1'
console.log ( +a ) ;  //1
console.log ( -a ) ;  //-1

🏷 숫자 타입으로 변환이 안되면 NAN으로 변환된다.
예시 (지극히 저의 언어로 저의 이해를 돕기위해 작성되었습니다..ㅎㅎ)

변환되는것 :

• 문자열 ("1", "23" 과 같은 숫자로 된 문자열)
• boolean : true는 1, false는 0으로 변환가능

변환되지않는것 :

• 문자열 ("hello"와 같은 글자가 담긴 문자열)

---

🐋 Boolean ( 불린 데이터 )

: true, false 두가지 값 밖에 없는 논리 데이터

🐡 명시적 형 변환

Boolean()
: Boolean 함수를 이용하여 소괄호 안에 있는 값을 불린으로 변환시켜준다.

console.log(Boolean("")); // false
console.log(Boolean("abc")); // true
console.log(Boolean("123")); // true
console.log(Boolean("0")); // true
console.log(Boolean(0)); // false
console.log(Boolean(123)); // true
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean({name: 'bigtop'})); // true
console.log(Boolean({})); // true

📍 빈 문자열은 false
📍 값이 없는 null과 undefined는 false
📍 NaN 또한 false
📍 문자열 '0'은 ture이고 숫자열 0은 false이다.
🏷 "", null, undefined, NaN, 0을 제외한 것은 true이다.
참고 블로그 : https://bigtop.tistory.com/18

---

🐋 undefined

: 변수를 선언하고 값이 할당되지 않은 상태

let undef;
console.log(undef) 	///undefined

📍 undefined를 의도적으로 명시해 대입할 수 있다.

let undef = undefined;

---

🐋 Null

: 값이 의도적으로 비어있음을 의미한다.

let empty : null ;	
//null

null과 undefined 비교 : 동등하지만 일치하지는 않는다.

console.log(null == undefined); // true
console.log(null === undefined); // false

---

🐋 object 객체

{}
: 여러 데이터를 key:value 형태로 저장한다.

예제 )

let user{
	name:"Yeun",
	age:22,
    isValid: true
    };
console.log(user.name); //Yeun

user.name은 .을 통해서 구분한다. user 객체 안에 있는 name을 지칭한다.

---

🐋 Array 배열

[]
: 여러 데이터를 순차적으로 저장한다.

예제 )

let fruits=['apple', 'banana'];
console.log (fruits[0]);
/// apple

---

🐚 변수

: 데이터를 저장하고 참조(사용)하는 데이터 이름

• var : 되도록 사용하지 않는 것을 권장한다.
• let : 재사용 가능, 값(데이터)의 재할당이 가능하다.
• const : 재할당이 불가능하다.

  해설 ) let을 사용하여 재할당 할 수는 있지만 const를 사용하여 재할당 하는 것은 불가능하다.

  let a =12;
   a=99;	// 99로 재할당하였다

  ---

🐚 함수

function

: 특정 동작(기능)을 수행하는 일부 코드의 집합(부분)이다.

함수 선언

function 이름(){
		};

함수 호출

이름();

예제 )
🏷 a,b 를 매개변수라고 하며 데이터를 받아준다.
🏷 1,2를 인수라고 한다.

function sum (a,b){
	return a+b
    };
 let a=sum(1,2)
 console.log(a)	// 3

🐋 기명함수

: 이름이 있는 함수

예제 )

function hello() {		//함수선언
	return hello
	};
hello();		// 함수호출

🐋 익명함수

: 이름이 없는 함수
🏷 이름이 없는 함수는 변수에 할당한다, 데이터로 활용한다.

예제 )

let word=fuction(){		// 함수표현
	return hello
    };
    word();		// 함수호출

🐋 객체 데이터

예제 )

const yeni={
	name:"yenini",
    age: 19
    getName: funcion(){
    	return this.name;
    }
};
console.log(yeni.getName());	//yenini

• 함수의 표현 방식이고 메소드 라고 부른다. 메소드는 객체 데이터 안에 속성부분에 함수를 할당한다.
• this는 자신이 속해있는 객체를 의미한다.

funcion(){
    	return this.name;
    }

---