내용 정리 JS - 연산자와 함수.

이유승·2023년 7월 25일
0

내용 정리

목록 보기
9/31
post-thumbnail

1. 연산자.

대입 연산자 =

산술 연산자 + - * /

+는 산술 연산자이기도 하지만 연결 연산자로도 사용된다. 2개 이상의 문자열을 이어붙이는데 사용된다.

+는 사용되는 변수 자료형에 따라서 산술 혹은 연결 연산자로 적용된다.

문자열 자료를 사용한다면 명시적 형변환을 해야 원하는 값이 나오게 된다.

복합연산자 += -= *= /=

증감연산자 ++ --

사용 위치에 따라서 값이 달라질 수 있다. ++1과 1++은 결과값은 동일하지만 그 과정이 다르다! 기억해 둘 것.

논리연산자 ! && ||

비교연산자 == === != !== < > <= >=

===은 변수의 자료형까지 비교한다.

typeOf 연산자

변수의 자료형 타입이 무엇인지 출력한다.

Null 병합 연산자 ??

대상 변수가 undefined 혹은 null이라면 값을 0으로 간주한다.



2. 함수

함수 표현식과 선언식

함수도 비원시 자료형의 일종이다. 따라서 변수에 함수를 담는 것도 가능하다.

표현식, 함수를 특정 변수에 담는 것. let hi = function() ...

선언식, 특정 변수와 상관없이 함수를 선언한다. function bye() ...

  • 호이스팅
    함수 선언식으로 만들어진 함수는 코드의 위치와 상관 없이 언제나 최상단에 위치한 것으로 취급된다. 그래서 함수 호출 코드가 함수 선언 코드보다 위에 있어도 정상적으로 동작한다.

콜백 함수

다른 함수의 매개변수로 다른 함수를 사용하는 것.

생성자 함수

자바스크립트가 제공하지 않는 유형의 데이터를 창조하는 함수.

일반 함수와 문법적 차이는 딱히 없다. 단, 목적 자체가 객체 생성만을 위한 함수일 뿐이다.

  • 생성자 함수 예시.

생성자 함수는 관례적으로 함수명의 첫 글자를 대문자로 한다.

function Dog() {

	this.name = "강아지";
	this.color = "하얀색";

    - This 키워드

    자바스크립트에서 This 키워드는 사용 위치에 따라서 가리키는 대상이 다르다.

    함수 내부에서 This는 자기 자신을 가르킨다.

}

생성자 함수를 사용하여 객체를 만드는 new 연산자.

const myDog = new Dog();



3. Truthy & Falsy

조건문의 조건식에 boolean이 아닌 타입의 값이 사용될 경우.

자바스크립트는 내장된 기준에 따라서 결과값이 True인지 False인지를 판단한다.

빈 문자열은 False로 처리되지만 아무 문자만 입력되면 True로 처리한다.

객체 리터럴, 숫자, 문자와 문자열(빈 문자 제외), Infinity 등은 Truthy 값으로 처리된다.

null, undefined, 0, -0, NaN, 빈 문자열 등은 Falsy 값으로 처리된다.



4. 삼항연산자

조건식 ? 발동식True : 발동식False



5. 단락 회로 평가

논리연산자 && || !

&&의 경우, 앞의 조건이 false면 뒤의 조건은 검증하지 않고 연산을 종결한다.

||의 경우, 앞의 조건이 true면 마찬가지로 연산을 종결한다.



6. 비 구조화 할당

let arr = ['one', 'two', 'three']; 라는 배열이 존재할 때..

let one = arr[0];

let two = arr[1];

let three = arr[2];

위 코드를 간단하게 아래와 같은 한 줄로 처리할 수 있다.

let [one, two, three] = arr;



7. Spread 연산자

const topingCookie = ['쿠키', '초코쿠키'];

const noTopingCookie = ['초코칩쿠키', '딸기칩쿠키'];

const allCookies = [...topingCookie, ...noTopingCookie];

allCookies의 값은, ['쿠키', '초코쿠키', '초코칩쿠키', '딸기칩쿠키']; 이 된다.



0. 참고자료

윈터루드, 자바스크립트 기초 강의. (인프런)

유노코딩, 입문자를 위한 자바스크립트 기초 강의. (인프런)

profile
프론트엔드 개발자를 준비하고 있습니다.

0개의 댓글