Javascript Exercise [String + Number - replit 5 : 텍스트 문자열의 연결]

Seong Ho Kim·2023년 10월 2일

Javascript Exercise Assignment 05 - [텍스트 문자열의 연결]

1) 텍스트 문자열의 연결

텍스트 연결 방법(텍스트 + 텍스트 / 텍스트 + 숫자)

// 1) 텍스트 + 텍스트

텍스트는 텍스트 끼리 서로 조합할 수 있습니다.
텍스트를 조합할 때는 + 연산자를 사용합니다.
텍스트와 변수를 조합해서 사용할 수도 있습니다.
아래는 모두 같은 결과가 출력됩니다.

예시1)
console.log("안녕" + "하세요"); // 안녕하세요
console.log("안녕" + "하" + "세요"); // 안녕하세요
console.log("안녕" + "하세" + "" + "요"); // 안녕하세요
const hi = "안녕";
console.log(hi + "하세요"); // 안녕하세요
const ha = "하세요";
console.log(hi + ha); // 안녕하세요

예시2)
const message = "감사합니다., ";
const userName = "김개발";
const banger = "님!";
const customSentence = message + userName + banger;
console.log(customSentence); // 감사합니다., 김개발님!

=====================================================================================

// 2) 텍스트 + 숫자
텍스트인 String과 숫자인 Number를 조합해보려고 합니다. 아래의 결과는 어떻게 출력되나요?

console.log("2" + "2"); // 텍스트 22

우리가 보기에는 둘 다 숫자인데, "" (쌍따옴표)로 감싸져 있기 때문에 
컴퓨터는 숫자라고 인식하지 않고 문자열로 인식하게 됩니다. 
따라서 2라는 텍스트(1)와 2라는 텍스트(2)가 붙은 22 라는 문자열이 출력됩니다. 
숫자로 표현하려면 쌍따옴표가 없어야 합니다.

console.log(2 + 2); // 숫자 4

이렇게 컴퓨터는 각각의 값이 텍스트인지, 숫자인지 타입을 갖고 있습니다. 
JavaScript에서는 텍스트와 숫자를 구분하는 것은 ""(쌍따옴표) 입니다.
그렇다면 아래의 변수 중에 무엇이 숫자이고, 무엇이 텍스트인지 아시겠나요?

const iAmString = "983";
const iAmNumber = 983;
const iAmStringToo = "0";
const iAmNumberToo = 0;
const iAmAlsoString = "-10";
const iAmAlsoNumber = -10;

숫자를 ""(따옴표)로 감싸지 않은 다음의 결과는 무엇 일까요?

alert("2 더하기 2는 " + 2 + 2); // 2 더하기 2는 22

실행해보셨나요? 아마 예상과 다른 결과가 출력되었을 것입니다. 
프로그래밍은 왼쪽에서부터 순서대로 실행되기 때문에 다음과 같은 결과가 나온 것입니다.

- 서로 다른 type인 String + Number를 시도할 때는 항상 주의해야 합니다.
- String과 Number형을 더하면 항상 String 형으로 변환됩니다.
- 원래 다른 프로그래밍 언어에서는 서로 다른 type인 String과 Number는 서로 더하거나 뺄 수 없습니다.
- 하지만 JavaScript 에서는 오류를 내지 않고 더하게 되죠.
- 이런 것을 유연 하다고 좋아하는 개발자도 있지만, 에러를 낼 여지가 있기 때문에 
JavaScript 의 단점으로 꼽는 개발자도 있습니다.

Assignment

1. textConcatenation 함수를 호출했을 때 다음 문장이 출력될 수 있도록 수정해주세요.
"2 더하기 2는 4"

hint : 뒤의 2 + 2 수학식이 먼저 계산되도록 묶어주세요.

Assignment - Javascript Code

function textConcatenation() {
  // 다음 코드를 수정하여
  // 아래의 문장이 올바른 값이 될 수 있도록 해주세요.
  const text = "2 더하기 2는 " + (2 + 2);
  // 다음 코드는 수정하지 마세요!
  return text;
}
console.log(textConcatenation()) // "2 더하기 2는 4"
profile
안녕하세요 Junior UIUX Designer 입니다 😊

0개의 댓글