[JavaScript] 함수, 조건문

내일배움캠프: Node.js_4기

7일차 TIL

~오늘의 수강 과목~

1. JavaScript 문법 종합반 1주차 (최원장 튜터님)

_ 함수

_ 조건문 : if, else, else if, switch

_ 객체, 배열

_ 반복문 : for, while

---

함수

함수 = function = 기능

자바스크립트 내에서 기능의 단위로 묶어 재활용이 가능 (= 코드의 재사용성 up)

input(소괄호 안에 들어감)과 output이 있다

1. (소괄호) 안에서 입력을 받고

2. {중괄호} 속 메인 로직에서 return 키워드로 출력

함수를 호출한다는 표현은 함수를 사용한다는 뜻으로 함수 이름 뒤에 소괄호 사용_ functionName();

 

함수 정의와 호출

함수 선언문

// 기본 구조 (이 골격을 익숙하게 만드는 것이 중요)
function add(매개변수) {
    함수 내부에서 실행할 로직
}


// 실습: 두 개의 숫자를 입력 받아서 덧셈을 한 후 내보내는 함수
function add(a,b) {
    return a + b;
}

console.log(add(1,2)); // 3 출력

위 예시에서는 function 키워드로 add 라는 함수를 선언하여 필요할 때(콘솔로그 참고) 호출

 

함수 표현식

// 실습: 두 개의 숫자를 입력 받아서 덧셈을 한 후 내보내는 함수
// (위 예제와 같은 내용)

let add2 = function(a, b) {
    return a + b;
}

console.log(add2(1,2)); // 3 출력

위 예시에서는 function 키워드로 add 라는 변수에 함수를 할당

 

둘의 차이가 잘 와닿지 않아 따로 찾아보다가 평소에 즐겨 보던 문서에서 도움을 받을 수 있었다
함수 호출 타이밍이 가장 큰 차이라고 느껴졌고, 함수를 값이라고 앞으로 직접 느끼는 것이 포인트인 것 같다
https://ko.javascript.info/function-expressions

 

 

매개변수와 반환값

// 함수명() -> add(입력값)
let functionResult = add(2,3); // 입력값 두개를 넣어 함수 호출
console.log(functionResult); // 5 출력

// add2를 가지고 10과 20을 더한 값 출력
let functionResult2 = add2(10,20);
console.log(functionResult2);

// input : 함수의 input -> 매개변수(매개체가 되는 변수)
// output : return문 뒤에 오는 값 : 반환값

 

 

함수 스코프

자바스크립트에서의 스코프(scope)란? 변수의 영향 범위. 즉 변수가 어디까지 영향을 미칠 수 있는가?

 

전역 스코프(global scope)

let x = 10; // 전체 영역에서 선언이 된 변수이기 때문에

function printX() {
    console.log(x); // 함수 안에서도
}

console.log(x); // 함수 바깥에서도 로그가 찍힐 수 있음
printX();

전역 스코프에서 선언된 변수는 어디에서든지 참조가 가능

즉 변수 x는 전체에 영향을 미칠 수 있다

 

지역 스코프(local scope)

function printX() {
    let x = 10; // 08.js(전역 스코프 에제 코드)와는 다르게 바깥(전체)이 아닌 함수 내부에서 선언 = 중괄호 내부에서만 의미가 있는 함수
    console.log(x);
}

console.log(x); // 즉 바깥에서는 실행이 될수없다
printX();

변수 x는 printX 함수 내에서만 참조 가능하기 때문에 해당 함수 내에서만 영향을 미칠 수 있음

 

 

화살표 함수

ES6에서 등장한 신 문법

지금 단계에서는 아직 어려운 개념이라 나중에 다시 꺼내보기

function add (a, b) {
    return a + b
}

// 1-1. 기본적인 화살표 함수
let arrowFunc01 = (a, b) => {
    return a + b
}


// 1-2. 한 줄로
let arrowFucn02 = (a, b) => a + b; // 중괄호 안 내용이 한 줄이면 이렇게 중괄호 생략하고 한줄로 작성 가능

function testFunc(a) {
    return a
}
// 위 함수를 한줄짜리 화살표 함수로
let arrowFucn03 = a => a; // 괄호 안 값이 하나일 때는 화살표 함수 작성 시 괄호도 생략 가능

 

---

조건문

if문

true 또는 false가 나올 수 있는 조건

 

기본 if문

조건이 true인 경우에만 코드 실행

// 1-1

let x = 10;

if (x > 0) {
    // main logic
    console.log('x는 양수입니다');
}


// 1-2

let y = 'hello world';

// y의 길이가 5보다 크거나 같으면 길이를 console.log로 출력
if(y.length >= 5) {
    console.log(y.length); // 11 출력
}

 

기본 if문

조건이 true인 경우에만 코드 실행

// 1-1

let x = 10;

if (x > 0) {
    // main logic
    console.log('x는 양수입니다');
}


// 1-2

let y = 'hello world';

// y의 길이가 5보다 크거나 같으면 길이를 console.log로 출력
if(y.length >= 5) {
    console.log(y.length); // 11 출력
}

 

if - else문

조건이 true인 경우와 false인 경우 각각 다른 코드 실행

let x2 = -3;
if(x2 > 0) { //true이면
    // main logic #1
    console.log('x는 양수입니다.');
} else { //false이면
    // main logic #2
    console.log('x는 음수입니다.');
}

 

 

if - else if - else문

여러 개의 조건을 순서대로 비교하여, 해당하는 조건에 맞는 코드 실행

let x3 = 10;
if(x3 < 0) { // x3이 0보다 작을 때
    // main logic #1
    console.log('1');
} else if(x3 >= 0 && x3 < 10) { // x3가 0보다 크거나 같으면서 동시에 10보다 작을 때
    // main logic #2
    console.log('2');
} else {
    // main logic #3
    console.log('3');
}
// 3 출력

 

switch문

변수의 값에 따라 여러 개의 경우(case) 중 하나를 선택하여 해당하는 코드 실행

default는 모든 경우에 맞지 않는 경우 실행되는 코드 작성

break는 멈춤

let fruits = "사과";
switch(fruits) {
    case "사과":
        console.log('사과입니다.');
        break;
    case "바나나":
        console.log('바나나입니다.');
        break;
    case "키위":
        console.log('키위입니다.');
        break;
    default:
        console.log('아무것도 아닙니다.');
        break;
}

 

 

falsy한 값과 truthy한 값

if (0) {
    // main logic
    console.log('hello');
}

if ("") {
    // main logic
    console.log('hello');
}
if (null) {
    // main logic
    console.log('hello');
}
if (undefined) {
    // main logic
    console.log('hello');
}
if (NaN) {
    // main logic
    console.log('hello');
}
if (false) {
    // main logic
    console.log('hello');
}
if (true) { // 이것만 실행 = true를 제외한 코드 모두 falsy한 값이라고 이해
    // main logic
    console.log('hello');
}

 

---