✨ 표현식(Expression) 개념, 목적, 예시

🎯 표현식의 개념 (Concept)

표현식(Expression)이란, JavaScript 엔진에 의해 평가(Evaluate)되어 하나의 값(Value)을 만들어내는 코드의 단위를 의미한다.

• 여기서 값이란 숫자, 문자열, 불리언(true/false), 객체, 함수, null, undefined 등 모든 종류의 데이터를 포함한다.
• 표현식은 그 자체로 하나의 값으로 귀결되기 때문에, 값이 위치할 수 있는 코드의 거의 모든 곳에 사용될 수 있다.
• 이는 **문(Statement)**과 대조된다. 문은 특정 동작을 수행하는 코드의 단위(예: 변수 선언, 조건 분기, 반복)이며, 종종 내부에서 표현식을 사용하여 동작에 필요한 값을 결정한다.

표현식은 말하자면 명확한 값이 정해진 질문 혹은 계산식이라고 할 수 있다.

일반적으로 사자는 동물인가 예 아니오로 대답하시오? 의 답은 "예"인 것처럼 (프로그래밍에선 true)

1+ 1 = 2 인 것처럼 코드 실행의 결과로 1개의 명확한 값만이 나오면 그것은 표현식이라고 할 수 있다.

 

💡 표현식의 목적 (Purpose)

표현식은 프로그램 내에서 다음과 같은 다양한 목적을 위해 사용된다.

1. 리터럴 값 표현: 코드에 고정된 값 자체를 나타내기 위해 사용된다. (100, "안녕하세요", true)
2. 값 접근: 변수나 상수, 객체의 속성, 배열의 요소 등에 저장된 값에 접근하기 위해 사용된다. (userScore, config.apiKey, myArray[0])
3. 값 계산 및 생성: 연산자(산술, 논리, 비교, 문자열 결합 등)를 사용하여 기존 값들로부터 새로운 값을 계산하거나 만들어내기 위해 사용된다. (price * quantity, isValid && isEnabled, firstName + " " + lastName)
4. 조건 결정: 조건문(if, while 등)이나 삼항 연산자에서 참/거짓(Boolean) 값을 생성하여 프로그램의 흐름을 제어하는 데 사용된다. (count > 0, status === 'active')
5. 데이터 전달: 함수 호출 시 **인자(Argument)**로 값을 전달하기 위해 사용된다. (calculate(subtotal, taxRate))
6. 값 반환: 함수가 실행 결과를 돌려주기 위해 return 문 뒤에서 사용된다. (return result;)
7. 객체 및 배열 생성: 객체 리터럴이나 배열 리터럴, 또는 new 키워드를 사용하여 새로운 객체나 배열 인스턴스를 생성한다. ({ name: "홍길동" }, [1, 2, 3], new Date())
8. 부수 효과(Side Effect) 발생: 함수 호출 표현식(processData();)이나 증감 연산자(counter++;)처럼, 값 평가 외에 상태 변경 등의 부수적인 효과를 발생시키기 위해 사용되기도 한다(이때는 표현식 문이 된다).

결론적으로, 표현식은 프로그램이 데이터를 다루고 로직을 수행하는 데 필요한 '값'을 만들어내고 참조하는 가장 기본적인 방법이다.

✨ 표현식(Expression) 사용 및 표현 예시

표현식은 코드의 다양한 부분에서 값을 만들어내거나 나타내기 위해 사용된다. 다음은 여러 가지 표현식의 예시와 간단한 설명이다.

📌 기본적인 표현식 예시

1. 리터럴 (Literals): 값 자체를 나타낸다.
   • 42 (숫자 값 42로 평가됨)
   • "JavaScript" (문자열 값 "JavaScript"로 평가됨)
   • true (불리언 값 true로 평가됨)
   • null (null 값으로 평가됨)
   • undefined (undefined 값으로 평가됨)
2. 식별자 (Identifiers): 변수나 상수에 저장된 값으로 평가된다.
   • userCount (변수 userCount에 저장된 값으로 평가됨)
   • PI (상수 PI에 저장된 값으로 평가됨)
3. 산술 표현식 (Arithmetic Expressions): 연산을 통해 숫자 값으로 평가된다.
   • 5 + 3 (값 8로 평가됨)
   • price * quantity (price와 quantity의 곱으로 평가됨)
   • index % 2 (index를 2로 나눈 나머지 값으로 평가됨)
4. 문자열 표현식 (String Expressions): 연산을 통해 문자열 값으로 평가된다.
   • "Hello, " + name (두 문자열이 연결된 새로운 문자열로 평가됨)
5. 논리 표현식 (Logical Expressions): 논리 연산을 통해 true 또는 false 값으로 평가된다.
   • isAvailable && count > 0 (두 조건이 모두 참일 때 true로 평가됨)
   • isMember || isGuest (둘 중 하나라도 참일 때 true로 평가됨)
   • !isActive (isActive 값의 반대 불리언 값으로 평가됨)
6. 비교 표현식 (Comparison Expressions): 비교를 통해 true 또는 false 값으로 평가된다.
   • age >= 20 (age가 20 이상일 때 true로 평가됨)
   • status === "completed" (status가 "completed" 문자열과 같을 때 true로 평가됨)
   • a !== b (a와 b의 값이 다를 때 true로 평가됨)
7. 함수 호출 표현식 (Function Call Expressions): 함수를 실행하고 그 반환 값으로 평가된다.
   • getUserData() ( getUserData 함수가 반환하는 값으로 평가됨)
   • Math.random() (0과 1 사이의 난수 값으로 평가됨)
8. 멤버 접근 표현식 (Member Access Expressions): 객체의 속성이나 배열의 요소 값으로 평가된다.
   • user.name (user 객체의 name 속성 값으로 평가됨)
   • items[0] (items 배열의 첫 번째 요소 값으로 평가됨)
9. 할당 표현식 (Assignment Expressions): 값을 할당하고, 할당된 값 자체로 평가된다.
   • newCount = currentCount + 1 (할당 연산 자체는 currentCount + 1의 결과 값으로 평가됨)
10. 조건부(삼항) 표현식 (Conditional (Ternary) Expressions): 조건에 따라 두 값 중 하나로 평가된다.
    • score >= 60 ? "pass" : "fail" (조건에 따라 "pass" 또는 "fail" 문자열로 평가됨)
11. new 표현식: 새로운 객체를 생성하고 그 객체로 평가된다.
    • new Date() (새로운 Date 객체로 평가됨)
    • new Map() (새로운 Map 객체로 평가됨)
12. 객체 및 배열 리터럴 표현식: 새로운 객체나 배열로 평가된다.
    • [10, 20, 30] (숫자를 요소로 갖는 새로운 배열 객체로 평가됨)
    • { type: 'user', id: userId } (속성을 갖는 새로운 일반 객체로 평가됨)

💾 문(Statement) 내에서 사용되는 표현식 예시

표현식은 단독으로 쓰이기보다는 문(Statement)의 일부로 사용되어 값을 제공하는 경우가 훨씬 많다.

1. 할당문에서:

   let finalScore = initialScore + bonusPoints;
   // initialScore + bonusPoints 표현식의 결과가 할당됨

2. 조건문(if)에서:

   if (attempts < maxAttempts && !isComplete) { ... }
   // attempts < maxAttempts && !isComplete 표현식의 결과(true/false)로 분기 결정

3. 함수 인자에서:

   displayResult(userName, calculateGrade(score));
   // userName 표현식과 calculateGrade(score) 표현식의 결과가 인자로 전달됨

4. return문에서:

   function getFullName(firstName, lastName) {
     return firstName + " " + lastName; 
     // firstName + " " + lastName 표현식의 결과가 반환됨
   }

⚡️ 표현식 문 (Expression Statement) 예시

표현식 자체가 하나의 문으로 사용되어 주로 부수 효과(Side Effect)를 위해 사용된다.

1. 함수 호출:

   console.log("Initializing system..."); // console.log() 호출 표현식이 문으로 사용됨 (로그 출력 목적)
   

2. 증감 연산자:

   retryCount++; // retryCount++ 표현식이 문으로 사용됨 (값 증가 목적)
   

이처럼 표현식은 값을 나타내거나 계산하는 JavaScript 코드의 기본적인 빌딩 블록이며, 프로그램의 거의 모든 곳에서 다양한 형태로 활용된다.

 

📌 복잡한 구조도 결국 하나의 값

표현식은 결국 값을 나타내는 것이기 때문에 이처럼 복잡한 형태여도 표현식이다.

// 예시: 복잡한 구조의 객체 리터럴
{
  id: 101,
  type: "product",
  details: { // 중첩된 객체
    name: "Super Widget",
    price: 99.99,
    tags: ["tech", "gadget", "popular"] // 중첩된 배열
  },
  isActive: true
}