html, css : 모양 기반
javascript : 데이터 기반

0. ECMAScript

ECMA스크립트(ECMAScript, 또는 ES)란, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다.

• 위키백과 :
  https://ko.wikipedia.org/wiki/ECMA%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8

1. String (문자)

'가나다라마바사'

string은 문자열을 나타내는 데이터 타입

const string1 = "Hello" // 큰따옴표
const string2 = 'odada!' // 작은따옴표
const string3 = `Hello World! ${string1} ${string2} ${1 + 1} ??` 
// 리터럴 방식 (기호를 통해 만들어내는 방식)
// `(backticks, 백틱) 을 사용하여 표현한다. 
// 영문으로 설정 후 1번 왼쪽 키 클릭

console.log(string3)

2. Number (숫자)

123456789

number는 숫자를 나타내는 데이터 타입
따옴표를 사용하지 않음

숫자 표현

const number = 123
const negative = -123
const float = .123

console.log(number + 1, negative + 1, float)

typeof : 데이터 타입을 확인

const number2 = -123.1234

console.log(number2 + undefined) // undefined는 NaN으로 나옴
console.log(typeof(number2 + undefined)) // number

Number : 숫자로 변환

const a = 0.1
const b = 0.2

console.log(a + b) // 부동 소수점 방식으로 인해 0.3이 아닌 0.30000000000000004가 나옴
console.log((a + b).toFixed(1)) // toFixed() : 소수점 자리수를 지정해주는 메소드, 문자열로 반환
console.log(typeof (a + b).toFixed(1)) // 문자열이기 때문에 typeof로 확인해보면 string이 나옴
console.log(Number((a + b).toFixed(1))) // Number로 감싸주면 number로 반환

3. boolean (참 & 거짓)

true , false

boolean은 true와 false 두 가지 값만 가질 수 있는 데이터 타입

const truthy = true
const falsy = false

if (truthy) {
    console.log(true)
} 

4. null & undefined (값 없음)

null과 undefined는 값이 없음을 나타내는 데이터 타입

- null : 명시적으로 값을 할당하지 않음

명시적 : 매우 분명하고 명확하게

let age = null 
console.log(age) // null

age = 20 // 값이 할당되면 null이 사라짐
console.log(age) // 20

- undefined : 암시적으로 값을 할당하지 않음

암시적 : 직접적으로 표현되지 않지만 상황, 맥락 또는 언어의 사용을 통해 이해해야 하는 것

let height
console.log(height) // undefined

height = 180 // 값이 할당되면 undefined가 사라짐
console.log(height) // 180

• ex)

const user = {
    name: 'Kim',
    age: 20,
    height: 170,
    email: null
}

console.log(user.name, user.age, user.height) // Kim 20 170
console.log(user.weight) // undefined
console.log(user.email)  // null : 이메일이 없습니다.

5. array (배열)

[1, 2, 3, 4, 5]

배열이란 순서가 있는 데이터의 집합

// 배열은 대괄호로 만들어줌
const animals = ['dog', 'cat', 'fish']

console.log(animals[0], animals[2]) // dog fish
// 배열의 인덱스는 0부터 시작 (Zero-based numbering)
console.log(animals) // ['dog', 'cat', 'fish']
console.log(animals.length) // 3
// 배열의 길이는 length로 확인 가능
console.log(animals[animals.length - 1]) // fish
// 배열의 마지막 인덱스를 가져오는 방법

6. object (객체)

{a: 1, b: 2}

객체란 이름과 값으로 구성된 프로퍼티의 순서가 없는 집합

// 객체는 중괄호로 만들어줌
const user2 = {
    name: 'Kim',
    age: 20,
}

console.log(user2) // { name: 'Kim', age: 20 }

점 표기법과 대괄호 표기법의 차이점

// 점 표기법은 객체의 키가 유효한 이름인 경우에만 사용 가능
console.log(user2.name, user2.age) // Kim 20

// 대괄호 표기법
// 대괄호 표기법은 변수를 키로 사용할 때 사용 가능
console.log(user2['name'], user2['age']) // Kim 20
console.log(user2[key]) // 20

ex

const userA = {
    name: 'Kim',
    age: 20,
}

const userB = {
    name: 'Lee',
    age: 30,
    parent: userA
}

console.log(userB) // { name: 'Lee', age: 30, parent: { name: 'Kim', age: 20 } }
console.log(userB.parent.name) // Kim 점 표기법
console.log(userB['parent']['name']) // Kim 대괄호 표기법

배열에 객체를 넣을 수 있음

const users = [userA, userB]

console.log(users[0].name) // Kim
console.log(users[0]['name']) // Kim

7. function(함수)

함수란 특정 코드를 하나의 명령으로 실행할 수 있게 해주는 기능

// 함수 선언식 (기명 함수)
function printHello() {
    console.log('Hello')
}

printHello() // Call 
// 함수를 호출할 때는 함수 이름 뒤에 괄호를 붙여줌

• 함수는 자바스크립트의 데이터로서 함수 자체와 함수의 호출은 전혀 다른 개념이다.

// 함수 표현식 (익명 함수)
const getNumber = function() {
    return 123
}

console.log(getNumber) // [Function: getNumber]
console.log(typeof getNumber) // 함수 데이터

console.log(getNumber()) // 123
console.log(typeof getNumber()) // number

8. Type Conversion (형 변환)

• 형 변환이란 데이터 타입을 다른 데이터 타입으로 바꾸는 것으로
• 정확하게 비교를 해주는 일치 연산자(===)를 사용하는 것이 좋다.
• 일치 연산자를 사용하면 형 변환이 일어나지 않기 때문에 더 정확하게 비교할 수 있다.

const a = 1; // number
const b = '1'; // string

console.log(a === b); // false (=== : 일치 연산자)
console.log(a == b); // true (== : 동등 연산자)
// 동등 연산자는 형 변환이 일어나기 때문에 1과 '1'을 비교해도 true가 나온다.
// 다른 데이터인데도 불구하고 동등 연산자에서는 true가 나온다.

const c = false;
const d = 0;

console.log(c === d); // false
console.log(c == d); // true

const e = true;
const f = '1';

console.log(e == f); // true
console.log(e === f); // false

9. Truthy & Falsy (참과 거짓)

• Truthy : true 같은 것
• Falsy : false 같은 것
  • false
  • 0
  • ''
  • null
  • undefined
  • NaN

if(true) {
    console.log('true!'); // true!
}
// true는 true이기 때문에 true!가 출력된다.
// false를 넣으면 출력되지 않는다.
// 0, -0, '', null, undefined, NaN은 false로 간주한다.
// 그 외의 값은 true로 간주한다.

const fruits = [''] 

if(fruits.length) {
    console.log('아이템이 들어있음!');
}

// ''는 false로 간주되기 때문에 출력되지 않는다.
// 배열에 아이템이 들어있는지 확인할 때는 length를 사용한다.
// length는 배열의 길이를 알려주는 속성이다.

10. 데이터 타입 확인

console.log(typeof '123') // string
console.log(typeof 123) // number
console.log(typeof true) // boolean
console.log(typeof undefined) // undefined
console.log(typeof null) // object
console.log(typeof {}) // object
console.log(typeof []) // object
console.log(typeof function(){}) // function

// null, {}, []는 object로 나오기 때문에 구분하기 어려움
// constructor를 통해 데이터 타입을 확인할 수 있음
console.log([].constructor) // Array
console.log({}.constructor) // Object
console.log(null.constructor) // error : null은 constructor가 없음

// null 데이터 타입 확인 방법
// 아래 방식 추천
console.log(Object.prototype.toString.call(null).slice(8, -1)) // Null

• 데이터 확인 함수

function printType(data) {
    console.log(Object.prototype.toString.call(data).slice(8, -1))
}

console.log(printType(123)) // Number
console.log(printType(true)) // Boolean
console.log(printType(null)) // Null
console.log(printType({})) // Object
console.log(printType([])) // Array
console.log(printType(function(){})) // Function