UX

▪ User Experience
: 사용자 경험. 유저들이 얼마나 편리하게 프로그램을 사용하는가
: AJAX 등장 이후 폭발적인 UX 향상

동적 타이핑

▪ 변수를 선언할 때 타입을 지정하지 않는다.
: 런타임 시점에 변수에 할당되는 값에 따라 자동으로 데이터 타입이 결정된다.

1-2

변수, 상수

변수

메모리에 저장한 뒤, 읽어들여서 재사용한다.
▪ 변수 이름 : 저장된 값의 고유 이름
▪ 변수 값 : 변수에 저장된 값
▪ 변수 할당 : 변수에 값을 저장하는 행위
▪ 변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위
▪ 변수 참조 : 변수에 할당된 값을 읽어오는것

🔶 변수를 선언할 수 있는 3가지 방법 : var, let, const
🔸 var

var myVar = "Hello World";
var myVar = "Test 1";
myVar = "GoodBye1";
console.log(myVar);

같은 이름으로 선언을 한 번 더 할 수 있다.
값을 재할당 할 수 있다.

🔸let

let myLet = "Hello World";
let myLet = "Test 2";
myLet = "GoodBye2";
console.log(myLet);

같은 이름으로 다시 선언을 할 수 없다.
값을 재할당 할 수 있다.

🔸const

const myConst = "Hello World";
const myConst = "Test 3";
myConst = "GoodBye3";
console.log(myConst);

같은 이름으로 다시 선언을 할 수 없다.
값을 재할당 할 수 없다.

1-3

데이터 타입

런타임에 데이터 타입이 결정된다.
→ 코드를 작성할 때가 아니라, 실제 코드가 실행될 때 데이터 타입이 결정된다.

🔶숫자

🔸정수형

let num1 = 10;
console.log(num1);
console.log(typeof num1);

10
number

🔸실수형

let num2 = "3.14";
console.log(num2);
console.log(typeof num2);

3.14
string

🔸지수형

let num3 = 2.5e5;
console.log(num3);
console.log(typeof num3);

250000
number

🔸

let num4 = "Hello" / 2;
console.log(num4);

NaN //Not a Number

🔸Infinity(무한대)

let num5 = 1 / 0;
console.log(num5);
console.log(typeof num5);

Infinity
number

🔸Infinity(무한대)

let num6 = -1 / 0;
console.log(num6);
console.log(typeof num6);

-Infinity
number

🔶문자 : string(문자열 = 문자의 나열)

let str = "Hello World!";
console.log(str);
console.log(typeof str);

Hello World!
string

🔸문자열 길이 확인하기

let str = "Hello World!";
console.log(str.length);

12

🔸문자열 결합하기

let str1 = "Hello, ";
let str2 = "world!";
let result = str1.concat(str2);
console.log(result);

Hello, world!

🔸문자열 자르기

let str3 = "Hello, World!";
console.log(str3.substr(7,5));
console.log(str3.slice(7,12));

World
World

substr(시작번호,몇개)
slice(시작번호,끝번호)

🔸문자열 검색

let str4 = "Hello World!";
console.log(str4.search("World"));

6

World가 시작되는 지점이 6번째부터 시작된다.

🔸문자열 대체

let str5 = "Hello, World!"
let result = str5.replace("World","JavaScript")
console.log(result)

Hello, JavaScript!

🔸문자열 분할

let str6 = "apple, banana, kiwi";
let result = str6.split(",");
console.log(result);

[ 'apple', ' banana', ' kiwi' ]

1-4

🔶Boolean

let bool1 = true;
let bool2 = false;
console.log(bool1);
console.log(typeof bool1);
console.log(bool2);
console.log(typeof bool2);

true
boolean
false
boolean

🔶undefined

un : not, defined : 정의하다
→ 값이 할당되지 않았다

let x;
console.log(x);

undefined

🔶null

→ 값이 존재하지 않음을 명시적으로 나타내는 방법

let y = null;
console.log(y);

null

🔶object(객체)

→ key-value pair

let person = {
    name : 'choi',
    age : 20,
    isMarried : true
}

console.log(typeof person)

object

🔶array

→ 여러개의 데이터를 순서대로 저장하는 데이터 타입

let person = {
    name : 'choi',
    age : 20,
    isMarried : true
}

console.log(typeof person)

object

1-5

형 변환

암시적 형 변환

→ 자동으로 바뀜

🔶문자열

let result = 1 + "2";
console.log(result);
console.log(typeof result);

12
string

let result = "1 " + true;
console.log(result);
console.log(typeof result);

1 true
string

→ {}, null, undefined + "1" => 문자열

🔶숫자

let result = 1 - "2";
console.log(result);
console.log(typeof result);

-1
number

let result = "2" * "3";
console.log(result);
console.log(typeof result);

6
number

명시적 형 변환

🔶Boolean

console.log(Boolean(0));
console.log(Boolean(""));
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log(Boolean(NaN));
console.log("==============");
console.log(Boolean("flase"));
console.log(Boolean({}));

false
false
false
false
false
==============
true
true

🔶문자열

let result1 = String(123)
console.log(typeof result1);

let result2 = String(false)
console.log(typeof result2);

let result3 = String(true)
console.log(typeof result3);

let result4 = String(null)
console.log(typeof result4);

let result5 = String(undefined)
console.log(typeof result5);

string
string
string
string
string

🔶number

let result = Number("123");
console.log(result);
console.log(typeof result);

123
number

1-6

연산자

논리 연산자

🔶논리곱 연산자

→ 모두 true일 때 true 반환

console.log(true && true);
console.log(true && false);
console.log(false && true);
console.log(false && false);

true
false
false
false

🔶논리합 연산자

→ 두 값 중 하나라도 true인 경우 true 반환

console.log(true || true);
console.log(true || false);
console.log(false || true);
console.log(false || false);

true
true
true
false

🔶논리부정 연산자

→ 값을 반대로 바꿈

console.log(!true);
let a = true;
console.log(!a);

false
false

삼항 연산자

→ 조건에 따라 값을 선택한다

let x = 10;
let result = (x > 5) ? "크다" : "작다";
console.log(result);

크다

1-7

함수

🔶1

두 개의 숫자를 입력 받아서 덧셈을 한 후 내보내는 함수

//1. 함수 선언문
function add (x, y) {
    return x + y;
}
console.log(add(2, 3))

//2. 함수 표현식
let add2 = function (x, y) {
    return x + y;
}

let functionResult = add(3, 4);
console.log(functionResult);

5
7

1-8

스코프, 전역변수, 지역변수, 화살표함수

화살표 함수

function add (x, y) {
    return x + y;
}

//기본적인 화살표 함수
let arrowFunc01 = (x, y) => {
    return x + y;
}

//한 줄로 표현
let arrowFunc02 = (x, y) => x + y;

function restrunc(x) {
    return x;
}
//화살표 함수로
let arrowFunc03 = x => x;