재영 블로그

자바스크립트 연산자

May 20, 2020

자바스크립트 연산자 관련 정리

JSX문법을 다시보다가 자바스크립트의 연산자는 사용이 가능하나 선언문은 불가능하다는 내용에서 연산자가 정확히 감이 오지 않았다… 그저 삼항연산자, 조건부연산자는 사용이 가능하고 변수 선언, 일반 조건문은 사용이 안된다 정도로만 생각하고 있었기에 정리를 해본다.

연산자의 종류

  1. 할당 연산자 할당 연산자는 오른쪽 피연산자의 값을 왼쪽 피연산자에 할당한다. 기본적인 할당 연산자는 오른쪽의 피연산자 값을 왼쪽 피연산자 값에 할당하는 등호이다(=) 즉 X = Y

  2. 비교 연산자 비교 연산자는 피연산자들을 비교하고 비교에 따라 논리 값을 반환한다. 피연산자들은 숫자, 문자열, 논리형, 객체를 사용할 수 있다. 문자열은 유니코드 값을 사용하여 표준 사전순서를 기반으로 비교한다. 만약 두 피연산자가 다른 형태일경우, javascript는 대부분 비교를 위해 피연산자를 적절한 타입으로 변환한다. 형태를 바꾸기의 유일한 예외는 엄격한 비교를 수행하는 === 과 !== 연산이 관련된 경우.

    const var1 = 3

  3. 산술 연산자 산술 연산자는 숫자값을 피연산자로 갖고, 하나의 숫자 값을 반환한다. 기본적인 산술연산자는 덧셈, 뺄셈, 곱셉, 나눗셈이다.

    1 / 2 // 0.5
  4. 비트 연산자 비트 연산자는 피연산자를 10진수, 16진수, 8진수처럼 취급하지 않고 32비트의 집합으로 취급한다. 예로 10진수의 9는 2진수의 1001로 나타낼 수 있다. javascript의 표준 숫자값을 반환한다.

  5. 논리 연산자 논리 연산자는 보통 불리언값과 사용된다. 또한 불리언값과 사용할때 불리언 값을 반환한다. 그러나 &&과 || 연산자는 실제로 명시된 피연산자들 중 하나를 반환한다. 이 연산자들이 다른 값과 쓰였을떄, 불리언 값이 아닌 다른 값을 반환할지도 모른다.

    true && 4 // 4반환
false || '반환값' // '반환값' 반환

  6. 문자열 연산자 문자열 값으로 사용될 수 있는 비교 연산자에 덧붙여서, 연결 연산자(+)는 두 문자열 값을 연결하고, 두 문자열이 합쳐진 새로운 문자열을 반환한다.

    console.log('my' + 'string') // 'my string'

    복합 할당 연산자인 +=또한 문자열을 연결하는데 사용할 수 있다.

    const string = 'jaeyoung'
string += 'son' // 'jaeyoungson'

  7. 조건(삼항) 연산자 조건 연산자는 Javascript에서 3개의 항을 사용하는 유일한 연산자이다. 조건 연산자는 조건에 따라 2개의 값중 하나를 가질 수 있다.

    조건 ? 값1 : 값2

    조건이 참이라면 값1을 값으로 갖고, 그렇지 않다면 값2를 값으로 갖는다.

  8. 쉼표 연산자 쉼표 연산자(,)는 두 피연산자를 평가하고, 마지막 피연산자의 값을 반환한다. 이 연산자는 주로 for반복문 안에서 각각의 시간에 복수의 변수들을 갱신하기 위해 사용한다.

    const x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
const a = [x, x, x, x, x]

for (let i = 0, j = 9; i <= j; ㅑ++, j--) {
 console.log('a[' + i + '][' + j + ']= ' + a[i][j])
}
// a[0][9] = 9
// a[1][8] = 8
// a[2][7] = 7
// a[3][6] = 6
// a[4][5] = 5

    a는 각 변에 10개의 원소가 있는 2차원 배열일떄, 콤마 연산자를 두 변수에 한번에 증가 시키기 위해 사용했다. 이 코드는 배열의 대각선에 위치한 원소를 출력한다.

  9. 단항 연산자 단항 연산자는 오직 하나의 피연산자를 가지고 연산을한다. delete연산자, typeof연산자, void연산자 등이 있다.
  10. 관계 연산자 관계 연산자는 피연산자들을 비교하고, 비교의 참 여부에 기반하여 불리언 값을 반환한다. in연산자, instanceof연산자가 있다.

일단 종류가 굉장히 많고 지금 당장 다 이해하고 숙달하기엔 무리일것같다.. 일단 정리를 하고 차차 학습해야겠다.

문법적 카테고리

자바스크립트에는 대표적으로 2가지 문법적 카테고리가 있다.

  1. statements 문장
  2. ㄷxpressions 표현식

표현식은 문장처럼 동작할 수 있기 때문에 이 둘을 구분하는것이 중요하다. 반대로 문장은 표현식처럼 동작할 수 없다.

표현식

표현식은 값을 만들어낸다. 원하는만큼 길어질 수 있으며 언제나 동일한 값이 나오진 않는다.

1 + 2 + 3 / 2
funtionCall()
check ? AFunc() : BFunc()
1 + 1, 2 + 2, 3 + 3
declaredVariable
true && functionCall()

위와 같은 코드들은 표현식이기에 자바스크립트 코드 중 값이 들어가는 곳이면 어디에나 넣을 수 있다.

console.log(true && 1 + 2)

표현식은 반드시 상태를 바꿀 필요는 없다.

const variable = 2 // 문장
variable * 4 // 표현식

문장

문장은 기본적으로 무언가를 수행한다. 자바스크립트에서 문장은 값이 들어와야 할 곳에 들어갈 수 없다.함수의 인자, 대입연산의 값, 연산자의 피연산자로 사용될 수 없다.

종류들

  1. if
  2. if-else
  3. while
  4. do-while
  5. for
  6. switch
  7. for-in
  8. debugger
  9. variable declaration
if (true) {
  9 + 9
}

브라우저의 콘솔에 위와같은 코드를 작성하면 18이 보이지만 위 코드를 표현식처럼 사용하거나 값이 들어갈 어딘가에 넣을 수 없다.

함수 선언, 표현식, 네임드 함수 표현식

함수 선언은 문장이다.

function func(fc) {
  return fc.name
}

함수 표현식은 표현식이다. 흔히 익명 함수라 부르는 것들.

console.log(foo(function() {})) // ‘’

네임드 함수 표현식은 표현식이다. 익명함수와 같으나 이름이 붙는다.

console.log(foo(function myName() {})) // ‘myName’

??? 다음과 같이 정리되었다.
우리가 자바스크립트에서 값이 들어올 곳에 함수를 선언할 때마다, 자바스크립트는 그것을 값으로 다루려 할것입니다. 만일 그 함수가 값으로 사용될 수 없다면, 에러가 발생할 것입니다. 반면에 스크립트, 모듈, 블록 문장(자바스크립트에서 값이 들어가는 곳이 아닌 위치에 있는)의 전역 단계(global level)에 함수를 선언하는 것은 결과적으로 함수 선언이다.

if () {
	function foo () {} // 블록의 가장 상위레벨, 함수선언
}

function foo () {} // 전역레벨, 함수선언

function foo () {
	function bar () {} // 블록의 가장상위레벨, 함수선언
}

function foo () {
	return function bar () {} // 네임드 함수 표현식
}

foo(function () {}) // 익명 함수 표현식

확실히 난해한 부분이 있는것같다. 아직 확 와닿지는 않는다.

표현식을 문장으로 바꾼다 — > 표현식문장

단순히 표현식 뒤에 세미콜론을 추가해주면 그 줄 자체는 표현식 문장이다.

1+2 // 표현식
1+2; // 표현식 문장
console.log(1+2) // 3
console.log(1+2;) // 에러

세미콜론과 콤마 연산자

세미콜론을 붙이면, 여러 줄의 문장을 하나의 줄에 넣을 수 있다.

const a; function foo () {}; const b = 2;

콤마 연산자는 여러 개의 표현식을 연결할 수 있도록 도와준다. 반환은 마지막 표현식만 반환한다.

console.log(1 + 2, 3, 4) //4
console.log(2, 3 / 1, function() {}) // function () {}

즉시 호출되는 함수 표현식

익명 함수는 표현식으로 쓰일 수 있다. 자바스크립트에서 값이 들어갈 곳에 쓰일 수 있다면, 자바스크립트에서 값이 들어갈 곳에 괄호를 쓸 수 있다면 익명 함수를 값으로 넘길 수 있다는 말.

function () {} // error
(function () {}) // f () {}

익명함수를 괄호 속에 넣는다면 즉시 같은 익명 함수를 리턴하는데 그렇기에 이 함수를 바로 불러올 수 있다.

(function () {console.log('hi')})() // hi

(function (a) {return a})(‘나를 리턴해라’) // ‘나를 ‘리턴해라

확실히 편하게 다가오는 느낌은 아니었다. 뭐든 그렇지만 차근차근 이해를 해야겠습니당. 참고 mdn
https://velog.io/@jakeseo_me/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%9D%BC%EB%A9%B4-%EC%95%8C%EC%95%84%EC%95%BC-%ED%95%A0-33%EA%B0%80%EC%A7%80-%EA%B0%9C%EB%85%90-7-%ED%91%9C%ED%98%84%EC%8B%9D%EA%B3%BC-%EB%AC%B8Statement-%EB%B2%88%EC%97%AD-2xjuhvbal7

Written by@jaeyoung-son
배운것을 기록하는 공간입니다.

GitHub