[JS] 기본 문법 (형변 ~ 함수!)

출처 : https://www.iplocation.net/javascript

[2] 형 변환

자바스크립트에서는 다양한 자료형을 다룰 수 있습니다. 그리고 이 자료형들은 서로 형변환이 가능합니다. 이번에는 자바스크립트의 형 변환에 대해서 알아보겠습니다.

[2]-1. 암시적 형 변환(implicit coercion)

암시적 형 변환은 자바스크립트에서 자동으로 수행되는 형 변환이며, 일반적으로 연산자를 사용할 때 발생합니다.

[2]-1-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"

위의 예제에서는 문자열과 다른 자료형이 연산자로 결합되어 있습니다. 이 경우에는 자바스크립트는 다른 자료형을 문자열로 변환한 후 연산을 수행합니다.

[2]-1-2. 숫자 변환

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

위의 예제에서는 연산자를 사용할 때, 문자열을 숫자로 변환합니다. 이때, 빈 문자열("")이나 공백 문자열(" ")은 0으로 변환됩니다.

[2]-1-3. 불리언 변환

 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

위의 예제에서는 Boolean() 함수를 사용하여 불리언 값으로 변환합니다. 이때, 0, 빈 문자열(""), null, undefined, NaN은 false로 변환됩니다. 그 외의 값은 true로 변환됩니다.

[2]-2. 명시적 형 변환(explicit coercion)

명시적 형 변환은 개발자가 직접 자료형을 변환하는 것을 말합니다.

[2]-2-1. 문자열 변환

 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]"

위의 예제에서는 String() 함수를 사용하여 다른 자료형을 문자열로 변환합니다.

[2]-2-2. 숫자 변환

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

(3) 연산자

자바스크립트에서는 다양한 연산자를 제공하여 변수나 상수를 다양한 방법으로 조작할 수 있습니다. 이번에는 자바스크립트의 연산자에 대해서 알아보겠습니다.

[1] 산술 연산자(arithmetic operators)

[1]-1. 더하기 연산자(+)

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

위의 예제에서는 더하기 연산자를 사용하여 숫자나 문자열을 더할 수 있습니다. 이때, 더하기 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 문자열로 변환합니다.

[1]-2. 빼기 연산자(-)

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

위의 예제에서는 빼기 연산자를 사용하여 숫자를 뺄 수 있습니다. 이때, 빼기 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환합니다.

[1]-3. 곱하기 연산자(*)

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

위의 예제에서는 곱하기 연산자를 사용하여 숫자를 곱할 수 있습니다. 이때, 곱하기 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환합니다.

[1]-4. 나누기 연산자(/)

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

위의 예제에서는 나누기 연산자를 사용하여 숫자를 나눌 수 있습니다. 이때, 나누기 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환합니다.

[1]-5. 나누기 연산자(%)

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] 할당 연산자(assignment operators)

[2]-1. 등호 연산자(=)

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

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

위의 예제에서는 등호 연산자를 사용하여 변수에 값을 할당할 수 있습니다.

[2]-2. 더하기 등호 연산자(+=)

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

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

위의 예제에서는 더하기 등호 연산자를 사용하여 변수에 값을 더할 수 있습니다.

[2]-3. 빼기 등호 연산자(-=)

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

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

위의 예제에서는 빼기 등호 연산자를 사용하여 변수에서 값을 뺄 수 있습니다.

[2]-4. 빼기 등호 연산자(-=)

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

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

위의 예제에서는 곱하기 등호 연산자를 사용하여 변수에 값을 곱할 수 있습니다.

[2]-5. 나누기 등호 연산자(/=)

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

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

위의 예제에서는 나누기 등호 연산자를 사용하여 변수에서 값을 나눌 수 있습니다.

[2]-6. 나머지 등호 연산자(%=)

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

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

나머지 등호 연산자를 사용하여 변수에서 값을 나눈 나머지를 구할 수 있습니다.

[3] 비교 연산자(comparison operators)

[3]-1. 일치 연산자(===)

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

일치 연산자를 사용하여 두 값이 같은지 비교할 수 있습니다. 이때, 일치 연산자는 자료형까지 비교합니다.

[3]- 2. 불일치 연산자(!==)

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

불일치 연산자를 사용하여 두 값이 다른지 비교할 수 있습니다. 이때, 불일치 연산자는 자료형까지 비교합니다.

[3]-3. 작다(<) 연산자

console.log(2 < 3);   // true
console.log(2 < "3");   // true
console.log("2" < 3);   // true

작다 연산자를 사용하여 두 값을 비교할 수 있습니다. 이때, 작다 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환합니다.

[3]-4. 크다(>) 연산자

console.log(2 > 3);   // false
console.log(2 > "3");   // false
console.log("2" > 3);   // false

크다 연산자를 사용하여 두 값을 비교할 수 있습니다. 이때, 크다 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환합니다.

[3]-5. 작거나 같다(<=) 연산자

console.log(2 <= 3);   // true
console.log(2 <= "3");   // true
console.log("2" <= 3);   // true
console.log(2 <= 2);   // true

작거나 같다 연산자를 사용하여 두 값을 비교할 수 있습니다. 이때, 작거나 같다 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환합니다.

[3]-6. 크거나 같다(>=) 연산자

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

크거나 같다 연산자를 사용하여 두 값을 비교할 수 있습니다. 이때, 크거나 같다 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환합니다.

[4] 논리 연산자 (logical operators)

[4]-1. 논리곱(&&) 연산자

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

논리곱 연산자를 사용하여 두 값을 비교할 수 있습니다. 이때, 논리곱 연산자는 두 값이 모두 true일 경우에만 true를 반환합니다.

[4]-2. 논리합(||) 연산자

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

논리합 연산자를 사용하여 두 값을 비교할 수 있습니다. 이때, 논리합 연산자는 두 값 중 하나라도 true일 경우 true를 반환합니다.

[4]-3. 논리부정(!) 연산자

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

논리부정 연산자를 사용하여 값을 반대로 바꿀 수 있습니다. 이때, 논리부정 연산자는 true를 false로, false를 true로 바꿉니다.

[5] 삼항 연산자(ternary operator)

[5]-1. 삼항 연산자(?:)

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

삼항 연산자를 사용하여 조건에 따라 값을 선택할 수 있습니다. 이때, 삼항 연산자는 조건식 ? true일 때의 값 : false일 때의 값 형태로 사용합니다.

[6] 타입 연산자(type operators)

[6]-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"

typeof 연산자를 사용하여 값의 자료형을 확인할 수 있습니다. 이때, typeof 연산자는 원시 자료형의 경우, 해당 자료형의 이름을, 객체나 함수의 경우, "object" 또는 "function"을 반환합니다. typeof null의 경우 "object"를 반환하는 버그가 있습니다.

(4) 함수

바스크립트에서는 함수를 정의하여 코드의 재사용성을 높일 수 있습니다. 이번에는 자바스크립트의 함수에 대해서 알아보겠습니다.

[1] 함수 정의하기

[1]-1. 함수 선언문(function declaration)

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

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

위의 예제에서는 function 키워드를 사용하여 add라는 함수를 선언하였습니다. 함수 선언문을 사용하면 함수를 미리 정의해두고, 필요할 때 호출할 수 있습니다.

[1]-2. 함수 표현식(function expression)

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

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

위의 예제에서는 function 키워드를 사용하여 add라는 변수에 함수를 할당하였습니다. 함수 표현식을 사용하면 함수를 변수에 할당하여 익명 함수를 생성할 수 있습니다.

[2] 함수 호출하기

[2]-1. 함수 호출하기

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

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

위의 예제에서는 add라는 함수를 호출하여 결과값을 반환합니다. 함수를 호출할 때는 함수 이름 뒤에 괄호를 사용합니다.

[3] 함수 매개변수와 반환값

[3]-1. 함수 매개변수

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

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

위의 예제에서는 add라는 함수가 x와 y라는 두 개의 매개변수를 받아들입니다. 함수를 호출할 때는 매개변수에 값을 전달합니다.

[3]-2. 함수 반환값

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

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

위의 예제에서는 add라는 함수가 x와 y라는 두 개의 매개변수를 받아들이고, 이를 더한 값을 반환합니다. 함수를 호출한 결과값을 변수에 할당하여 사용할 수 있습니다.

[4] 함수 스코프

[4]-1. 전역 스코프(global scope)

let x = 10;

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

printX();   // 10

위의 예제에서는 전역 스코프에서 변수 x를 선언하고, 함수 printX에서 변수 x를 참조합니다. 전역 스코프에서 선언된 변수는 어디에서든지 참조할 수 있습니다.

[4]-2. 지역 스코프(local scope)

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

printX();   //

data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2730%27%20height=%2730%27/%3e

위의 예제에서는 지역 스코프에서 변수 x를 선언하고, 함수 printX에서 변수 x를 참조합니다. 지역 스코프에서 선언된 변수는 해당 함수 내에서만 참조할 수 있습니다.

[4]-3. 블록 스코프(block scope)

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

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

위의 예제에서는 if문 내에서 변수 x를 선언하고, 이를 출력합니다. if문 내에서 선언된 변수는 해당 블록 내에서만 참조할 수 있습니다.

[5] 화살표 함수

[5]-1. 기본적인 화살표 함수

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

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

위의 예제에서는 화살표 함수를 사용하여 add라는 함수를 선언하였습니다. 화살표 함수를 사용하면 함수의 선언이 간결해집니다.

[5]-2. 한 줄로 된 화살표 함수

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

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

위의 예제에서는 한 줄로 된 화살표 함수를 사용하여 add라는 함수를 선언하였습니다. 함수 내부에 return문이 한 줄로 작성될 경우, 중괄호와 return 키워드를 생략할 수 있습니다.

[5]-3. 매개변수가 하나인 화살표 함수

let square = x => x * x;

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

위의 예제에서는 매개변수가 하나인 화살표 함수를 사용하여 square라는 함수를 선언하였습니다. 매개변수가 하나일 경우에는 괄호를 생략할 수 있습니다.