[JS] 변수/함수/조건문

[공부 내용 정리]

JavaScript란?

• 동적인 웹을 만들기 위한 언어
• HTML, CSS를 프로그래밍적으로 제어할 수 있음.
• 웹브라우저가 해석해서 실행할 수 있는 유일한 프로그래밍 언어. (였지만 몇 년 전 웹어셈블리가 새롭게 등장)
• 요즘은 브라우저가 아닌 환경에서도 자바스크립트를 실행 할 수 있게 되면서 게임프로그래밍, 서버프로그래밍 등 다양한 분야에서 쓰여지고 있음.

동적인 웹을 위해 자바스크립트가 하는 것

1. 데이터를 저장하다
   • 저장 공간 : var , let , const
   • 저장할 값의 형태 : 숫자, 문자열, 빈 값(null, undefined), boolean(true, false), 배열, 객체
   • 코드의 뭉치 : 함수
2. 값을 계산하다
   • 사칙연산
   • 논리연산
   • 조건문
   • 반복문
   • 자료형의 내장함수
3. 결과를 반영하다
   • DOM & BOM API
4. 다른 컴퓨터와 통신하다
   • Ajax

변수

변수의 특징

• 변수를 선언 할 때는 var, let, const의 키워드를 사용할 수 있음. var, let 두 가지 키워드는 변수를, const 키워드는 변경할 수 없는 수 즉, 상수를 의미함.
• var, let, const 키워드는 변수를 선언 할 때 한번만 사용.
• var 키워드는 초기화가 필요 없고 재할당이 가능. 또한 생략할 수도 있음. 하지만 var 키워드가 생략된 변수는 엄격모드(strict mode)에서는 에러가 발생됨으로 권장되지 않음.
  • 요즘은 var 변수 사용 안함. → 너무 자유롭기때문에..
  • 초기화 : 변수 선언과 동시에 값이 할당이 되는 것.
• let과 const는 블록 레벨 스코프로 불리며, 선언된 코드 블록 밖에서 접근할 수 없으며 재정의가 불가능한 특징을 가지고 있음. 특히 const 의 경우에는 반드시 초기화가 필요함.
• let : 재할당이 가능한 변수를 선언할 때 사용함. 변수를 선언한 블록 안에서만 유효.
  • 초기화 안해도 됨.
• const : 재할당이 불가능한 상수를 선언할 때 사용함. 변수를 선언한 블록 안에서만 유효.
  • 초기화를 반드시 해야됨.
• 블록스코프 : 여러줄의 코드를 하나로 묶어주는 단위인 블록({ }). 이러한 블록 안에서만 유효한 코드의 범위.

---

함수

함수의 구조

function 함수이름(parameter1, parameter2...) { // 함수의 선언
    // 실행코드...
    return 반환값
}

함수이름(argument1, argument2...) // 함수의 호출

• Parameter(매개변수) : 함수와 메서드에 입력하는 변수 이름
• Argument(전달인자, 인자, 인수) : 함수와 메서드에 실제 입력되는 값
• 여기서 return 값은 필수가 아님.
• return 값이 없으면 계산값이 undefinedundefined 출력됨.
• [클래스, 객체(클래스로 만드는 것이 객체)]안에 들어있는 함수를 메소드라고 부름.
• 함수 안에서 return 키워드를 만나면 함수가 바로 종료됨!

함수를 사용하는 이유

1. 재사용성이 높아짐.
2. 유지보수가 용이함.
3. 구조 파악이 용이함.

함수의 활용 - 함수의 argument에 따른 반환값

함수에 전달되는 아규먼트 즉 인자는 매개변수보다 적거나 많아도 에러가 발생하지 않음.

→ 필요 이상의 arg를 넣었을 때 : 필요 이상의 arg를 사용하지 않음. 뽑지 않음.

→ 필요 이하의 arg를 넣었을 때 : 계산하고 없는 것은 undefined로 출력.

 

함수를 표현하는 여러가지 방법

1) 함수 선언문과 함수 표현식

// 함수 선언문
function sum(x, y){
  return x + y;
}

// 함수 표현식
// 이름없는 함수를 바로 sumXY 변수로 선언해주는 방식.

let sumXY = function(x, y){
  return x + y;
};
console.log(sum(10, 20));
console.log(sumXY(10, 20));

 

→ 두 번째 방법을 더 많이 사용함.

• JS에는 호이스팅이라는 현상이 있음.
• 호이스팅 : 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상. 실행 전 한번 쭉 읽고 다시 실행시키는 예습 같은 개념이다.

-> 그래서 이런 형태도 실행 가능함.

2) 화살표 함수

선언 시 function 키워드를 화살표 기호로 대체하여 표현.

화살표 함수는 선언 시 제목을 정할 수 없기 때문에 표현식으로 사용.

function 함수1(x, y) {
    return x + y
}
// 위 함수를 화살표 함수로 작성
let 함수1 = (x, y) => x + y

// 만악 함수 실행시 전달하는 인자가 한 개라면 소괄호를 생략
let 함수2 = x => x + 10

// 화살표 함수 내부에서 한 줄 표현식만 반환한다면 return 키워드를 생략
let 함수3 = x => x + 10

let 결과 = 함수3(2);

console.log(결과);

→ 이런 방식의 함수 표현을 다른 언어에서는 람다식이라고 부름.

 

3) 즉시 실행 함수

함수를 정의함과 동시에 즉시 실행하는 방법.

(function hello(){
    console.log('hi');
})();

---

조건문

if문

let test=5;
if(test < 10){
	//codes
}

 

if-else문

const 재현 = 40;

if(재현 > 50){
    console.log('아저씨');
}else if(재현 > 40){
    console.log('조금 아저씨');
}else{
    console.log('아저씨 아님');
}

 

삼항연산자

기본구조

조건식 ? 조건식이 참일 때 실행될 코드 : 조건식이 거짓일 때 실행될 코드

 

예시

let item = true ? console.log('true') : console.log('false');
console.log(item);

item이 true라면 console.log(’true) 출력 & 결과값 반환.

→ 반환하는 값이 따로 없기 때문에 undefined가 item에 저장이 되고 결과에 true와 undefined가 같이 출력됨.

이처럼 삼항연산자는 코드의 실행도 해주고 값으로 사용할 수 있다는 점에서 if문과 다름.

즉, if 문은 특정 코드 구문을 실행하는문(Statement)이라면, 삼항연산자는 값으로 판단되는 표현식(Expression)임.

 

if 문과 삼항연산자 비교

// if-else 문
if (조건식) {
  // 조건식이 참일 때 실행될 코드
} else {
  // 조건식이 거짓일 때 실행될 코드
}

// 삼항연산자
조건식 ? 참일 때 실행될 코드 : 거짓일 때 실행될 코드

 

-> 위 내용은 똑같은 결과를 뱉는다!

 

퀴즈 1)

1사용자로부터 입력받은 나이에 따라 다른 인사말을 콘솔로 출력하는 프로그램을 작성하세요. 나이가 18세 이상이면 "안녕하세요!"를 출력하고, 10세 이상이면 "안녕! 반가워 꼬마친구! ” 를 출력하며, 10세 미만이면 “부럽다…” 를 출력합니다.

const readline = require('readline');

const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

rl.question('나이를 입력하세요: ', (age) => {
    // 입력받은 나이에 따라 다른 인사말 출력
    if(age>=18){
        console.log("안녕하세요");
    }else if(age>=10){
        console.log("안녕! 반가워 꼬마친구!");
    }else if(age<10) {
        console.log("부럽다");
    };

    rl.close();
});

• readline → python에서의 input과 같은 기능.
• JavaScript는 input을 int로 받아도 숫자랑 비교하려고 하면 자동으로 형변환을 해서 비교한다. → 다른 언어에 비해서 비교적 자유로움.

퀴즈 2)

사용자로부터 입력받은 성적에 따라 등급을 출력하는 프로그램을 작성하세요.

성적이 90점 이상이면 "A", 80점 이상이면 "B", 70점 이상이면 "C", 60점 이상이면 "D", 그 외에는 “강해져서 돌아와라”를 출력합니다.

const readline = require('readline');

const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

rl.question('성적을 입력하세요: ', (grade) => {
    if(grade >= 90){
        console.log('A')
    } else if(grade >= 80){
        console.log('B')
    } else if(grade >= 70){
        console.log('C')
    } else if(grade >= 60){
        console.log('D')
    } else
        console.log('강해져서 돌아와라')
})

 

→ 똑같은 코드를 삼항식으로 표현한 것. (readline은 추가안함!)

 

switch 문

switch 문을 사용하여 여러 조건에 대한 실행 코드를 작성할 수 있음.

switch case 문은 하나의 변수를 여러 값과 비교하여 실행 코드를 결정하는 조건문.

switch (표현식) {
  case 값1:
    // 값1에 대한 실행 코드
    break;
  case 값2:
    // 값2에 대한 실행 코드
    break;
  ...
  default:
    // 모든 case에 해당하지 않을 때 실행될 코드
    break;
}

위 코드에서 표현식은 case 문의 값과 비교할 변수임.

• 표현식 == case : 해당 case의 실행 코드가 실행됨.
• 표현식 ≠ 모든 case : 해당 default 블록 안의 코드가 실행됨.

퀴즈2 → switch 문으로)

const grade = 81;

switch (true) {
    case grade >= 90:
        console.log('A')
        break;
    case grade >= 80:
        console.log('B')
        break;
    case grade >= 70:
        console.log('C')
        break;
    case grade >= 60:
        console.log('D')
        break;
    default:
        console.log('강해져서 돌아와라');
        break;
}