TIL 6일차 + JavaScript 기초

필요한것

node.js를 설치 합니다. 

node.js - 자바 스크립트를 활용한 서버 사이드(server-side) 백앤드 개발이 가능한 소프트웨어 플랫폼

 

visual studio code를 활용하기 때문에 설치합니다. 

 

확장(extension)쪽에서 code runner를 입력한뒤 설치해 줍니다.

그런뒤 콘솔을 출력하고 싶다면 ctrl + alt + n을 해주시면 됩니다.

 

---

 

JavaScript 기초

// 1 [문자열 결합]
console.log(2023 + 12 + '월' + 29 + '일' + true + null + undefined); //2035월29일truenullundefined

// 2 [나누기]
console.log(7/2); // 3.5

// 3 [몫구하기]
console.log(parseInt(7/2)); // 3
console.log(Math.floor(7/2)); // 3

// 4 [``사용]
function num1(){
    return 7;
}
function num2(){
    return 9;
}
console.log(`n1 = ${num1()}, n2 = ${num2()}`); // n1 = 7, n2 = 9

// 5 [삼항 연산자]
let age = 19;
console.log(`당신은 ${age >= 20 ? '성인' : '미성년'}입니다.`); // 당신은 미성년 입니다.

// 6 [if - else문]
let age = 17;
let message
if(age>=20){
    message = '성인입니다.';
}else{
    message = '미성년입니다.';
}
console.log(message); // 미성년입니다.

// 7 [swich문]
let day = '수요일';
let food;

switch (day) {
    case '월요일':
        food = '짜장면';
        break;
    case '화요일':
        food = '삼겹살';
        break;
    case '수요일':
        food = '파스타';
        break;
    case '목요일':
        food = '햄버거';
        break;
    case '금요일':
        food = '불고기';
        break;
    default:
        food = '배달음식 및 만들기';
}

console.log(food); // 파스타

1. 문자열 결합

+ 연산자 를 사용하였는데 숫자와 숫자의 덧셈이 아닌 문자열과 다른 데이터 타입을 결합하는 연산을 수행하였습니다.

2023 : 숫자

12 : 숫자, 숫자와 숫자가 만나 덧셈이 됩니다.

월 : 문자열 , 숫자와 문자열이 만나 문자열로 변환됩니다.

29 : 숫자, 문자열과 숫자가 만나 문자열로 변환됩니다.

true : 불리언(boolean), 문자열과 불리언이 만나 문자열로 변환됩니다.

null : null, 문자열과 null 이 만나 문자열로 변환됩니다.

undefined : undefined, 문자열과 undefined이 만나 문자열로 변환됩니다.

 

■ JavaScript에서 + 연산자는 두개의 피연산자중 하나 이상이 문자열인 경우, 문자열 연결을 수행하고 다른 피연산자는 문자열로 자동 변환되는 특정한 규칙이 있습니다.

 

2. 나눗셈

JAVA같은 경우에는 7/2를 하게 된다면 정수로만 나눌경우 나머지는 버려지고 몫만 남게 되지만 JavaScript에서 나눗셈의 결과는 항상 소수점 이하까지 표시됩니다.

 

3. 몫구하기

JavaScript에서 나눗셈의 결과는 항상 소수점 이하까지 표시되기 때문에 

parseInt() - 주어진 값에서 정수 부분만을 추출합니다.

Math.floor() - 주어진 숫자의 소수 부분을 버리고 가장 큰 정수를 반환합니다.

 

4. Backtick(``)사용

JavaScript에서 Template literals를 작성하는데 사용된는 문자입니다.

문자열 안에 변수나 표현식, 함수호출을 ``안에 ${}문법을 사용하여 직접 표현이 가능합니다. 

 

5. 삼항 연산자

함수나 메서드 호출부 내에서 사용이 가능합니다.

거짓 부분에 대한 생략이 불가하며 띄어쓰기로 공백하면 오류가 납니다(빈문자열 '' 추가).

if - else문을 간결하게 표현할수 있으며, 간단한 조건에 대한 값을 할당하거나 반환하는데 흔히 사용합니다.

형식

조건식 ? 참일때의 표현식 : 거짓일때  표현식

 

6. if - else문

if문은 조건을 검사하고, 조건이 참일 경우 특정 블록의 코드를 실행합니다.

형식

if(조건식){
    참 실행 블럭;
} else{                                    
    거짓 실행 블럭;
}

 

실행문이 1개일 때는 중괄호 생략가능합니다.

let age = 19;
let message;

if (age >= 20) message = '성인입니다.';
    else message = '미성년입니다.';
console.log(message);

 

거짓실행 블럭은 생략 가능합니다.

let age = 21;
let message;

if (age >= 20) {
    message = '성인입니다.';
}

 

거짓 실행블럭은 else if로 계속 확장을 할수가 있습니다.

let age = 15;

if (age>=20){
    console.log('성인입니다.');
}else if(age>=17){
    console.log('고등학생입니다.');
}else if(age>=14){
    console.log('중학생입니다.');
}else{
    console.log('초등학생입니다.');
}
// 중학생입니다.

 

7. swich문

주어진 표현식의 값에 따라 해당 case로 이동하여 여러가지 경우에 따라 코드블록을 실행합니다.

 

형식

switch (표현식) {
    case 선택값1 :
        실행문;
        break;
    case 선택값2 :
        실행문;
        break;
    case 선택값3 :
        실행문;
        break;
    default: //생략 가능.
        실행문;
        break;
}

if문과의 차이

if 문 : 연속적이면서 넓은 범위를 측정합니다.

swich문 : 비 연속적이거나 좁은 범위에서는 식이 깔끔해 훨씬 유리합니다.