Front-End

vsoghlv@naver.com

자바스크립트 표현식, 문

표현식

표현식(expression) 은 리터럴, 연산자, 식별자, 함수 호출 등의 조합을 말하는데 이 식이 평가되어 생성된 결과를 값이라 한다. 평가란 식을 해석해 값을 생성하거나 참조하는 것을 말한다.

예를 들어 아래와 같은 변수가 있다고 가정해보자

let sum = 10 + 20;

여기서 10 + 20 이라는 식을 평가해 30 값이 나오며 변수 sum 에 할당되는 것은 10 + 20 이라는 식이 아닌 결과값 30 이다.

표현식에는 여러가지가 있다.

// 리터럴 표현식
10
'hello world'

//식별자 표현식(선언이 존재한다고 가정)
sum
person.name
arr[1]

//연산자 표현식
10 + 20
sum = 10

//함수/메서드 호출 표현식(선언이 존재한다고 가정)
square();
person.getAge();

표현식은 값으로 평가되기 때문에 표현식과 값은 동등한 관계, 동치이다. 예를 들어 1 + 2 = 3 이기 때문에 1 + 2 와 3은 같다고 할 수 있다. 이렇기 때문에 표현식은 값처럼 사용이 가능하다. 즉, 문법적으로 값이 위치할 수 있는 자리에는 표현식도 위치할 수 있다.

문(statement) 은 프로그램을 구성하는 기본 단위이자 최소 실행 단위인데 문의 집합으로 이루어진 것이 프로그램이며, 문을 작성하고 순서에 맞게 나열하는 것이 프로그래밍이다.

우리가 자바스크립트 엔진에 명령(문) 을 내리면 자바스크립트 엔진은 그 문을 실행하며 동작한다.

문은 변수 선언문, 함수 선언문, 할당문, 조건문, 반복문 등이 있는데 하나의 명령이 끝나면 ; 을 붙여줘야 한다. 자바스크립트에서는 세미콜론을 붙이지 않아도 오류가 나지 않지만 이 경우 개발자가 생각한 끝과 자바스크립트 엔진이 생각하는 끝에서 차이가 생겨 오류가 발생할 가능성이 있다.

연산자

연산자에는 여러 종류가 있는데 그 중 자주 헷갈리는 것들을 위주로 정리하려고 한다.

먼저 많이 사용하는 ++, – 인데 이 때 저 연산자의 위치에 따라 값이 바뀌게 된다.

let x = 5, result;

// 선대입 후증가
result = x++;
console.log(result, x); // 5 6

// 선증가 후대입
result = ++x;
console.log(result, x); // 7 7

// 선대입 후감소
result = x--;
console.log(result, x); // 7 6

// 선감소 후대입
result = --x;
console.log(result, x); // 5 5

위와 같이 연산자를 먼저 사용하는 경우 증가, 혹은 감소 후 할당한다. 이와 반대로 하는 경우 할당 후 값을 변화한다.

===== 을 헷갈리는 경우가 많은데 == 을 사용하면 자바스크립트에서 타입을 암묵적으로 변화 후 비교한다.

예를 들어 숫자타입 1과 스트링 타입 ‘1’ 을 == 연산자로 비교하면 true 값이 나오지만 === 을 사용하면 false 값이 나온다. 이는 === 의 경우는 타입과 값을 둘다 비교하기 때문이다.

삼항 조건 연산자는 조건식의 결과에 따라 값이 바뀌는데 if 문을 간단하게 사용한다고 생각하면 쉽다.

let a = true;
let b = a?"진실":"거짓"
b;//"진실"

물음표 앞의 값이 true 값인 경우 : 의 앞부분의 값, false 인 경우 : 의 뒷부분의 값이 할당된다.

위를 if 문으로 작성하면 아래와 같다.

let a = true;
let b = "";

if (a) {
  b = "진실";
} else {
  b = "거짓";
}

이외에도 typeof 연산자가 있는데 typeof 연산자는 뒤 피연산자의 값의 데이터타입을 문자열로 반환하다.

//ex)
typeof "a"
"string"
typeof 1
"number"
typeof true
"boolean"