Javascript - 2. 식과 문

Jin Young Son·2021년 4월 5일
2

Javascript

목록 보기
2/5
post-thumbnail

여느 때와 다름없는 어느 날 '식과 문에 대해 설명해주세요' 라는 질문을 들었을 때, 사고가 정지해버렸다.🙁 그 질문은 나에게 엄청난 충격적인 질문이였다. 간략하게 알고보니 '식과 문' 은 평상시에 몸에 베인듯이 사용하고 있었는데도 그 것을 설명할 수도 없다라니...
그래서 아예 초반에 정리하고 넘어가려고 합니다! 제가 이해한게 맞는지 모르겠지만.. 틀린 부분이 있다면 피드백 부탁드립니다😂

식과 문의 간략한 구분 방법은 값의 반환 여부이다.

식(Expression)

하나의 값이 되도록 하는 것을 이라고 합니다. 값은 기본값이 될 수도 있고, 참조값이 될 수도 있습니다.

유형

자바스크립트에서 값을 나타낼 수 있는 유형은 값도 식, 연산식, 리터럴, 함수호출 4가지로 볼 수 있습니다.

값도 식

의 정의로 보면 값도 식이다라고 생각하면 편합니다.😊

// Number type
3

// String type
'camp-son'

// Boolean type
true
false

// null and undefined
null
undefined

// Object
{name: 'jys'}

연산식

말 그대로 연산자가 포함되어 값을 반환하는 것도 식입니다.

// 사칙연산
3 + 4 // 7
2 - 1 // 1
3 * 3 // 9
6 / 2 // 3

// 비교연산자
10 > 1 // true

리터럴

리터럴은 대부분의 객체를 생성하기 위한 것이고, 이 객체는 기본값이 아닌 참조값을 나타냅니다.(추후 값 레퍼런스 참조에 대해 추가하겠습니다.)

// 객체 리터럴
{}
// 배열 리터럴
[]
// 함수 리터럴
function (){}
// 정규식 리터럴
/regex/

함수호출

자바스크립트에서는 함수를 호출한 후에는 반드시 값을 반환해주게 되어 있습니다. 값을 반환해준다? 식이죠.
자바스크립트의 함수는 내부에서 반환해주는 값이 없더라도 undefined를 반환해주어 값이라고 볼 수 있습니다.

반환값이 없는 함수

내부 로직 실행 후 값을 반환하지 않는 함수로, undefined를 반환한다.

function exec() {
  // ...
}

exec(); // undefined

반환값이 있는 함수

내부 로직 실행 후 값을 반환하는 함수로, return 키워드로 반환하는 값을 반환한다.

function returnTen() {
  // ...
  return 10
}

returnTen(); // 10

문(Statement)

식과 반대로 값을 반환하지 않는 것이라 합니다.

조건문

명시된 조건에 성립하는 경우 로직을 실행시키기 위한 명령문입니다. if else, switch문이 있습니다.

if~else 문

if, else if의 괄호에 정의된 조건이 인 경우 해당 로직을 실행합니다. 명시된 모든 조건이 성립하지 않는 경우 else에 포함되어 있는 로직을 실행합니다. if문 단독으로 사용할 수 있고, else if, else는 선택적으로 사용할 수 있습니다.

if (조건1) {
  // 로직1
} else if (조건2) {
  // 로직2
} else if (조건3) {
  // 로직3
} else {
  // 로직4
}

switch~case 문

switch 괄호의 값이 case에 명시된 값과 같을 때 해당 로직을 실행합니다. 단, 로직이 끝난 후 다른 로직이 타지 않게 하려면 breakswitch를 종료해야합니다. 종료하지 않는 경우 원하지 않은 결과를 얻을 수 있습니다.

switch (variable) {
  case value1:
    // ...
    break;
  case value2:
  case value3:
    // ...
    break;
  // ...
  default:
    // ...
}

반복문

조건이 일치하지 않을 때까지 같은 로직을 반복 수행하는 명령문입니다. 단, 반복문의 무한 반복이나 과한 사용은 프로그램 성능을 늦출 수 있습니다. for, while, do~while 문이 있고, break, continue를 사용하여 반복문을 강제 종료하거나 한 회차를 건너 뛸 수 있습니다.

for 문

for(초기화; 조건식; 증감식) 형태로 사용하고 조건식에 성립하지 않을 때까지 선언한 로직을 반복 수행합니다.

for (let i = 0; i < 10; i++) {
  // 로직1
}
  1. 초기화: i0으로 초기화합니다.
  2. 조건식: i10보다 작은지 확인합니다.
  3. 조건식에 충족하지 않은 경우, 로직1을 실행합니다.
  4. 로직1 실행이 종료되면 증감식으로 값을 증감합니다.
  5. 2번으로 조건식을 확인합니다.
  6. 조건식이 거짓인 경우 반복문을 종료합니다.

while 문

while(조건식) 형태로 사용하고 for문과 마찬가지로 조건식이 성립하지 않을 때까지 반복 수행합니다.

let i = 0;
while (i < 10) {
  // 로직1
  i++;
}

for문과 동일한 순서로 동작합니다.

break, continue

위 반복문들을 사용할 때, 특정 조건이 되었을 때 반복문을 제어하기 위해 사용됩니다.

break

반복문을 강제로 종료시킵니다.

let i = 0;
while (i < 10) {
  // 로직1
  i++;
  if (i === 4) break;
  // 로직2
}

i가 3까지는 위의 while처럼 반복 작업을 수행하지만, i가 4가 되면 해당 반복문은 강제로 종료가 됩니다.

continue

뒤의 로직을 수행하지 않고 다음 회차의 로직을 수행합니다.

let i = 0;
while (i < 10) {
  // 로직1
  i++;
  if (i === 4) continue;
  // 로직2
}

break 대신 continue를 사용하게 되면, i가 4일 때만 로직2를 수행하지 않고 반복문을 계속 수행합니다.

마치며..

해당 섹션인 식과 문에 대해 찾아보고 정리하다보니 당연히 알고 있는 내용임에도 불구하고 머리 속에 내용이 확립되어 있지 않았던 것 같습니다. 질문 주신 분께는 참으로 감사하게 생각하고 있습니다.😄 앞으로 더 기본에 충실하도록 하겠습니다.

참고자료: https://www.bsidesoft.com/760

profile
Front-end Developer

0개의 댓글