[항해99]JS 문법정리 - 1

JS 언어 특징

 

객체지향 프로그래밍 지원

 

JS 는 동적타이핑 : 데이터 타입은 런타임에 변수에 할당되는 값에 따라 결정됨.

선언 할때 타입을 지정하지 않음.

 

함수형 프로그래밍 지원 :  함수를 인자로 사용 가능

 

비동기 처리

 

클라이언트 측 및 서버측 모두에서 사용 가능

 

변수와 상수

 

변수 이름 : 저장된 값의 고유 이름 myVar

변수 값 : 변수에 저장된 값 "hello world"

변수 할당 : 변수에 값을 저장 = ''hello world';

변수 선언 : 변수를 사용하기 위해 컴퓨터에게 알림 var myVar

변수 참조 : 변수에 할당된 값 읽어옴 example = myVar + myVar2

 

var myVar = ''hello world';

 

 

var : 같은 이름으로 다시 선언 가능

let : 같은 이름으로는 다시 선언 불가. 값 변경((메모리) 재할당) 가능

const: 같은 이름으로 선언 불가 및 값 변경((메모리) 재할당) 불가.

(배열과 같이 재할당 없이 배열 수정이 있을 경우 값 수정은 가능함)

 

데이터 타입

런타임에 결정됨.

1. 숫자 Number

정수Integer

let num1 = 10;
console.log(num1); // 10
console.log(typeof num1); // "number"

실수Float

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

 

지수Exponential

let num3 = 2.5e5; // 2.5 x 10^5
console.log(num3); // 250000
console.log(typeof num3); // "number"

 

NaN(Not a Number)  숫자가 아님을 나타냄

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

 

Infinity

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

-Infinity

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

 

2. 문자열(String)

문자열은 문자의 나열. 작은 따옴표(')나 큰 따옴표(")로 감싸서 표현합니다.

let name = 'Alice';
let message = "Hello, world!";

console.log(typeof name); // string

문자열 길이(length) 확인

let str = "Hello, world!";
console.log(str.length); // 13

let str = "Hello, world!";
console.log(str.substr(7, 5)); // "world"

//substr어디서부터, 몇개를 (7번째부터 5개)

console.log(str.slice(7, 12)); // "world"

//slice어디서부터 어디까지(7번째부터 12번째까지)

문자열 결합(concatenation)

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

 

문자열 자르기(substr, slice)

let str = "Hello, world!";
console.log(str.substr(7, 5)); // "world"

//substr어디서부터, 몇개를 (7번째부터 5개)

console.log(str.slice(7, 12)); // "world"

//slice어디서부터 어디까지(7번째부터 12번째까지)

 

 

문자열 검색(search)

let str = "Hello, world!";
console.log(str.search("world")); // 7

문자열 대체(replace)

let str = "Hello, world!";
let result = str.replace("world", "JavaScript");

//어떤 단어를 어떤 단어로 대체

console.log(result); // "Hello, JavaScript!"

 

문자열 분할(split)

-> 주어진 기준으로 문자열을 잘라서 배열로 변환

let str = "apple, banana, kiwi";
let result = str.split(",");
console.log(result); // ["apple", " banana", " kiwi"]

 

3. 불리언(Boolean)

참(true), 거짓(false) 나타내는 데이터 타입

let bool1 = true;
console.log(bool1); // true
console.log(typeof bool1); // "boolean"

조건문과 같이 자주 사용함.

 

4. undefined

undefined는 값이 할당되지 않은 변수를 의미합니다.

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

 

5. null

null은 값이 존재하지 않음을 의미합니다 (의도적임) . undefined와는 다릅니다.

let y = null;

 

 

6. 객체(Object)

 객체는 속성과 메소드를 가지는 컨테이너입니다. 중괄호{}를 사용. 순서가 없음

{ key : value, key: value } 페어 형태!!

let person = { name: 'Alice', age: 20 };
person.name // 'Alice'
person.age // 20

 

7. 배열(Array)

배열은 여러 개의 데이터를 순서대로 저장하는 데이터 타입. 대괄호[]를 사용

모든 항목이 위치데이터 index를 가지고 있음(0부터), 마치 key:value 페어와 비슷하게.

let numbers = [1, 2, 3, 4, 5];
let fruits = ['apple', 'banana', 'orange'];

 

 

형변환

1. 암시적 형변환 

자동으로 자바스크립트에서 수행되는 형 변환. 연산자를 사용할 때 많이 발생함.

 

문자열

console.log(1 + "2");   // "12"
console.log("1" + true);   // "1true"
console.log("1" + {});   // "1[object Object]"
console.log("1" + null);   // "1null"
console.log("1" + undefined);   // "1undefined"

숫자

console.log(1 - "2");   // -1
console.log("2" * "3");   // 6
console.log(4 + +"5");   // 9

 

2. 명시적 형변환

 

불리언으로

console.log(Boolean(0));   // false
console.log(Boolean(""));   // false
console.log(Boolean(null));   // false
console.log(Boolean(undefined));   // false
console.log(Boolean(NaN));   // false
console.log(Boolean("false"));   // true
console.log(Boolean({}));   // true

0, 빈 문자열(""), null, undefined, NaN은 false로 변환. 그 외의 값은 true로 변환

 

문자열로

console.log(String(123));       // "123"
console.log(String(true));      // "true"
console.log(String(false));     // "false"
console.log(String(null));      // "null"
console.log(String(undefined)); // "undefined"
console.log(String({}));        // "[object Object]"

 

숫자로

console.log(Number("123"));   // 123
console.log(Number(""));      // 0
console.log(Number("  "));    // 0
console.log(Number(true));    // 1
console.log(Number(false));   // 0

 

 

연산자

1. 산술연산자

더하기 연산자 +

console.log(2 + 3);       // 5
console.log("2" + "3");   // "23"
console.log("2" + 3);     // "23"
console.log(2 + "3");     // "23"

 

빼기연산자 -

console.log(5 - 2);       // 3
console.log("5" - "2");   // 3
console.log("5" - 2);     // 3
console.log(5 - "2");     // 3
console.log("five" - 2);  // NaN

곱하기 연산자 *

console.log(2 * 3);       // 6
console.log("2" * "3");   // 6
console.log("2" * 3);     // 6
console.log(2 * "3");     // 6
console.log("two" * 3);   // NaN

나누기 연산자 /

console.log(6 / 3);       // 2
console.log("6" / "3");   // 2
console.log("6" / 3);     // 2
console.log(6 / "3");     // 2
console.log("six" / 3);   // NaN

나머지 연산자 %

console.log(7 % 3);       // 1
console.log("7" % "3");   // 1
console.log("7" % 3);     // 1
console.log(7 % "3");     // 1
console.log("seven" % 3); // NaN

 

2. 할당연산자

 등호연산자 =

let x = 10;
console.log(x);   // 10

x = 5;
console.log(x);   // 5

더하기 등호 +=

let x = 10;
console.log(x);   // 10

x += 5;
console.log(x);   // 15

빼기등호 -=

let x = 10;
console.log(x);   // 10

x -= 5;
console.log(x);   // 5

나누기등호 /=

let x = 10;
console.log(x);   // 10

x /= 5;
console.log(x);   // 2

나머지등호

let x = 10;
console.log(x);   // 10

x %= 3;
console.log(x);   // 1

3. 비교연산자

일치연산자 === (타입까지 일치)

console.log(2 === 2);   // true
console.log("2" === 2);   // false
console.log(2 === "2");   // false

== 는 2 == "2" 처럼 타입은 다르고 값은 같을때도 같다고 봄.

불일치 연산자 !==

작다 연산자 <

크다 연산자 >

작거나 같다 <=

크거나 같다 >=

 

4. 논리연산자

논리곱연산자 && (둘다 true -> true)

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

논리합 연산자 || (둘중 하나 true -> true)

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

논리부정연산자 !

console.log(!true);   // false
console.log(!false);   // true
console.log(!(2 > 1));   // false

삼항연산자

조건식? true 일때 값: false일때 값

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

타입연산자

1. typeof 연산자

console.log(typeof 123);   // "number"
console.log(typeof "123");   // "string"
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"

 

함수

함수정의하기 

function(){}      <- 이 골격으로 생성함!

1. 함수 선언문

함수를 미리 정의하고 이름을 지어주고. 필요할때 이름으로 호출해서 사용.

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

console.log(add(2, 3));   // 5

2. 함수표현식

함수를 function을 이용한 익명함수를 생성하여 변수에 할당.

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

console.log(add(2, 3));   // 5

  

함수호출하기

함수명 쓰고 ()괄호 열고닫으면 됨.

매개변수가 필요한 경우 괄호에 input값을 넣어줘야 함.

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

console.log(add(2, 3));   // 5

 

함수 매개변수와 반환값

1. 함수 매개변수 ( ) 

매개체가 되는 변수

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

console.log(add(2, 3));   // 5

호출시 매개변수 x, y에 값 전달함.

 

2. 함수의 반환값

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

let result = add(2, 3);
console.log(result);   // 5

함수 결과값을 변수에 할당하여 사용할 수 있음.

 

함수 스코프

1. 전역스코프

전역스코프에서 선언된 변수는 어디서든 참조 가능함.

let x = 10;

function printX() {
  console.log(x);
}

printX();   // 10

2. 지역스코프

지역스코프에서 선언된 변수는 해당 함수 내에서만 참조 가능.

function printX() {
  let x = 10;
  console.log(x);
}

printX();   // x is not defined

 

3. 블록스코프

if문 내에서 변수 를 선언하면, 해당 블록 내에서만 참조 가능.

if (true) {
  let x = 10;
  console.log(x);
}

console.log(x);   // ReferenceError: x is not defined

 

화살표 함수

기본 화살표 함수

let add = (x, y) => {
  return x + y;
}

console.log(add(2, 3));   // 5

한 줄일 경우 중괄호 생략가능

let add = (x, y) => x + y;

console.log(add(2, 3));   // 5

매개변수가 하나인 경우 괄호도 생략 가능

let square = x => x * x;

console.log(square(3));   // 9