[JavaScript] 기초 - 데이터 처리1

연산자 - 단항연산자, 산술 연산자

 

단항 연산자

• void: 표현식을 평가할 때 값을 반환하지 않도록 지정
• typeof: 평가 전의 피연산자 타입을 나타내는 문자열을 반환
• delete: 객체의 속성을 삭제

const a = { name: 'apple' }

console.log(void); // undefined
console.log(typeof a); // object

delete a.name; // 객체의 속성 삭제
console.log(a); // {}

 

 

산술 연산자

• 단항 산술 연산자
• 이항 산술 연산자

 

- 단항 산술 연산자: 1개의 피 연산자를 산술 연산하여 숫자값을 반환

• 전위 증가/감소 연산자 -> ++a / --a
• 후위 증가/감소 연산자 -> a++ / a--
• +
• -

let a = 1;
let b = 1;

// 전위 증가/감소 연산자 
// -> 다른 연산이 진행되기 전에 먼저 1을 증가시키고 다른 연산을 진행
// 즉 (a + 1) + 10
console.log(++a + 10); // 12

// 후위 증가/감소 연산자
// -> 다른 연산이 진행되고 나서 1을 증가 시킴
// 즉 (b + 10) 계산이 끝나고 나서 b 값이 1 증가됨
console.log(b++ + 10); // 11

let c = 1;
let d = 1;

// 만약 피연산자가 문자열인 경우 암묵적 타입 변환됨
// +
console.log(+c); // 1 -> 아무 효과 없음

// -
console.log(-c); // -1

 

 

- 이항 산술 연산자: 2개의 피연산자를 산술 연산하여 숫자값을 반환

• +
• -
• *
• /
• %

 

연산자 - 관계 연산자, 비교 연산자

 

관계 연산자: 피연산자를 비교하고, 결과가 참인지에 따라 boolean 값을 반환

• in: 객체 내에 속성이 존재할 경우 true 반환
• instanceof: 특정 객체 타입에 속하면 true 를 반환

 

비교연산자: 피연산자를 비교하고 결과가 참인지에 따라 boolean 값을 반환

• ==  동등 연산자 -> 서로 같으면 true
• ===  일치 연산자 -> 서로 같고, 타입도 같으면 true
• !=  부등 연산자 -> 서로 다르면 true
• !==  불일치 연산자 -> 서로 다르고, 타입도 다르면 true
• >
• >=
• <
• <=

 

연산자 - 논리 연산자, 기타 연산자

 

논리 연산자: 두 개의 피연산자 중 하나를 반환

• null, undefined, 빈 문자열 -> false
• 반환되는 값이 무조건 Boolean 값이 아님!
• 단축평가 논리: 첫번째 식을 평가한 결과에 따라서, 두번째 식 평가를 진행

A && B
// A 가 false 면 A 반환
console.log(false && 'apple'); // false

// A 가 true 면 B 반환
console.log(true && 'apple'); // apple

A || B
// A 가 false 면 B 반환
console.log(false || 'apple') // apple

// A 가 true 면 A 반환
console.log(true || 'apple') // true

 

 

기타 연산자들

 

쉼표 연산자: 두 연산자를 모두 평가한 후, 오른쪽 피연산자 값을 반환

let x = 1;

x = (x++, x);
console.log(x); // 2

x = (2, 3);
console.log(x); // 3

 

 

문자열 연산자: 두 문자열 값을 서로 연결하여 새로운 문자열을 반환

console.log("나만의 " + "문자열"); // 나만의 문자열

 

 

옵셔널 연산자 (?.): 객체의 속성을 참조시, 유효하지 않는 경우, 에러를 발생시키지 않고 undefined 를 반환

const adventurer = {
    name: 'Alice',
    cat: {
      name: 'Dinah',
    },
  };
  
  const dogName = adventurer.dog?.name;
  console.log(dogName); // undefined

 

 

할당 연산자

• +=
• -=
• *=
• /=
• %=
• **=
• &&=
• ||=

 

삼항 연산자: 조건 연산자에 따라 두 값중 하나를 반환

condition ? val1 : val2;
// condition이 참이라면 val1 반환, 거짓이라면 val2 반환

 

 

함수

 

자바스크립트에서 함수는 객체처럼 속성과 메서드를 가질 수 있고, 일급객체의 특징을 모두 갖고 있다. 

 

일급객체란?

다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 쉽게 말해 사용할 때 다른 요소들과 아무런 차별이 없다는 것!

아래의 정의에 해당한다면 일급객체이다. 

 

• 일급객체는 함수의 실제 매개변수가 될 수 있다

function foo(input) {
    return input() + 1;
}

function bar() {
    return 1;
}

foo(bar); // 2

 

• 일급객체는 함수의 반환값이 될 수 있다

function foo(input) {
    return input()() + 1; // 연속해서 두 번 호출되고 있음
}

function bar() {
    return 1;
}

function baz() {
    return bar;
}

foo(baz); // 2

 

• 일급객체는 할당명령문의 대상이 될 수 있다 (변수 등에 할당 가능)
• 일급객체는 동일비교의 대상이 될 수 있다 (값으로 표현 가능)

const foo = function() {
    return 1;
}

 

 

매개 변수 (parameter)

• 기본값 매개변수 (default function parameter): 매개변수 값이 없거나, undefined 가 전달될 경우 대체되는 초기값
• 나머지 매개변수 (Rest parameter)
• arguments 객체: 함수에 전달된 인수에 해당하는 유사 배열 형태의 객체 

나머지 매개변수를 사용하면 함수가 정해지지 않은 수의 매개변수를 배열로 받을 수 있다.

function A(...args) { // 이런 함수를 가변항 함수라고 함
    ...
}

 

arguments 객체는 유사 배열 형태의 객체이지 배열이 아니기 때문에 배열 내장 method 를 사용할 수 없다.

(arguments.length 만 가능)

function foo(...arg) {
    console.log(arguments); // [Arguments] { '0': 1, '1': 2, '2': 3 }
    console.log(arguments.length); // 3
    
    // TypeError 발생
    arguments.forEach(element => {
        console.log(element);
    });
    return arg
};

foo(1, 2, 3);

 

 

매개 변수(parameter)와  인자(argument)의 차이

• 매개 변수는 함수를 정의할  때 사용하는 변수
• 인자는 함수가 호출될 때 넘기는 값

function A(매개변수) { ... }; 

A(1); // 인자

 

 

함수 생성 방법

• 함수 선언문
• 함수 표현법
• Function 생성자 함수
• 화살표 함수

 

- 함수 선언문

function A(arg) {
    return arg;
};

 

 

- 함수 표현식 

• 일급객체의 특징인 함수를 변수에 할당하는 방식
• 익명 함수(anomymouse function): function 키워드 뒤에 함수명을 생략하는 방식
• 기명 함수(named function)

const A = function (arg) { // 익명 함수
    return arg;
};

 

아래의 경우 함수가 할당된 변수명 B 를 통해 호출되기 때문에 함수가 기명 함수라도 함수명으로 호출 하게 되면 ReferenceError 가 난다.

const B = function C (arg) { // 기명 함수
    return arg;
}

C(1); // ReferenceError: C is not defined

 

 

- Function 생성자 함수

 

자바스크립트 내장 객체 중 하나인 Function 객체를 이용해 함수를 생성하는 방법

const bar = new Function(arg, 'return 1');

 

 

- 화살표 함수

• ES6 이후부터 사용 가능
• 익명 함수로 함수 표현식으로만 사용이 가능함
• function 키워드 사용하지 않고, 화살표 사용 =>
• const 변수명 = (arg, ... ) => { return ... }

const foo = (arg) => {
    return arg;
};

 

 

함수 사용 패턴

• IIFE (즉시 실행 함수)
• 재귀함수
• 중첩함수
• 콜백함수

 

- IIFE (Immediately Invoked Function Expression) (즉시 실행 함수)

 

함수 정의와 동시에 실행되며, 최초 1회 실행되기 때문에 초기화 처리에 주로 사용된다.

아래와 같이 함수를 괄호로 감싸서 사용하면 된다. 

(function () {
    ...
})();

 

 

- 재귀함수 (Recursive function)

 

계속 자기 자신을 호출하는 함수로 무한히 호출될 수 있으므로, 탈출 조건을 함수 초반에 정의해두고 사용하는 것이 좋다.

 

 

- 중첩 함수 (내부함수, inner function)

 

내부함수는 자신의 부모를 포함한 외부 범위 참조가 가능하지만, 반대로 부모함수는 자식 범위 참조가 불가능하다.

 

 

- 콜백함수 (Callback function)

• 일급객체의 특징으로 함수를 함수로 매개변수로 쓰는 방식
• 이때 함수의 인자로 전달된 함수를 콜백함수라고 함

const foo = (arg) => {
    return arg;
};

foo(() => { // 안에 인자로 들어온 함수가 콜백함수
    return 1;
})