[코드잇] 프로그래밍 핵심 개념 in JavaScript - ② 추상화

---

할당 연산자

// 할당 연산자 (Assignment operators)

let name = '코드잇';

let x = 5;

// '='는 수학 등호와 다름, 할당연산자임.

// 오른쪽에 있는 피연산자를 왼쪽에 있는 피연산자에 할당한다는 의미

// 할당 : 지정, 정했음

// 피연산자 : 연산이 되어지는 대상

x = x - 2;

// x - 2는 5 - 2가 됨.

// x = 3;

console.log(x);

// 3

---

복합 할당 연산자

복합 할당 연산자(compound assignment operators) 

- 할당 연산자와 결합해서 자주 쓰이는 표현을 더 간략하게 쓸 수 있게 해주는 연산

// 다음 두 줄은 같습니다

x = x + 1;

x += 1;

// 다음 두 줄은 같습니다

x = x + 2;

x += 2;

// 다음 두 줄은 같습니다

x = x * 2;

x *= 2;

// 다음 두 줄은 같습니다

x = x - 3;

x -= 3;

// 다음 두 줄은 같습니다

x = x / 2;

x /= 2;

// 다음 두 줄은 같습니다

x = x % 7;

x %= 7;

증가(increment), 감소(decrement) 연산자

- 더하기 기호를 연달아 쓰거나(++), 빼기 기호를 연달아 씀(-)

- 변수의 값을 1씩 증가시키거나 감소시킬 때는 사용할 수 있음.

// 다음 세 줄은 같은 의미입니다.

x = x + 1;

x += 1;

x++;

// 다음 세 줄은 같은 의미입니다.

x = x - 1;

x -= 1;

x--;

---

함수의 실행 순서

function sayHello() {

    console.log('Hello');

    console.log('Welcome to Codeit!');

}

console.log('함수 호출 전')

sayHello();

console.log('함수 호출 후');

/*

1) function 안에 있는 건 특별히 출력 X

2) ● 함수 호출 전

3) sayHello 안에 있는 함수가 호출되어 한줄씩 실행함.

-> ● Hello

-> ● Welcome to Codeit

4) ● 함수 호출 후

*/

function square(x) {

    return x * x;

}

console.log('함수 호출 전');

console.log(square(5));

console.log('함수 호출 후');

/*

1) 함수 호출 전

2) 25 ( 5 * 5 )

3) 함수 호출 후

*/

function square(x) {

    return x * x;

}

console.log('함수 호출 전')

console.log(square(3) + square(4));

console.log('함수 호출 후')

/*

1) 함수 호출 전

2) 25 ( 9 + 16 )

3) 함수 호출 후

*/

---

return문 제대로 이해하기

function square(x) {

    return x * x;

}

console.log(square(3));

// 9

/*

return이 나오면

1) 해당 값 반환

2) 그 시점에서 함수의 실행이 종료됨.

*/

function square(x) {

    console.log('return 전');

    return x * x;

    console.log('return 후'); // Dead Code : return에서 끝나서 출력 안 됨

}

console.log('함수 호출 전');

console.log(square(3));

console.log('함수 호출 후');

/*

함수 호출 전

return 전

9

함수 호출 후

*/

---

return과 console.log의 차이

function printSquare(x) {

    console.log(x * x);

}

function getSquare(x) {

    return x * x;

}

printSquare(3); // 9

getSquare(3);   // 9

console.log(printSquare(3)); // undefined

// return문이 없는 함수를 실행하면 함수 호출부분은 undefined 값을 내보냄.

// undefined = 처음부터 아무것도 할당하지 않았다는 말임.

console.log(getSquare(3));   // 9

/*

return : 함수를 실행하고, 어떤 값을 돌려주는 것

console.log : 콘솔에 어떤 함수를 출력해주는 것

*/

---

옵셔널 파라미터

함수 정의에서 매개변수(parameter)를 정의할 때 값을 반드시 입력하지 않아도 되는 매개변수

함수를 호출할 때, 옵셔널 파라미터에 값을 전달하지 않으면 그 파라미터는 underined 값으로 설정됨.

→ 함수 호출자는 함수에서 이 파라미터의 값이 반드시 필요하지 않음.

 

function sayHello(name) {

    console.log(`안녕하세요 ${name}님!`);

}

sayHello('코드잇');

sayHello('좋아요');

sayHello('사랑해');

sayHello();

/*

안녕하세요 코드잇님!

안녕하세요 좋아요님!

안녕하세요 사랑해님!

안녕하세요 undefined님!

*/

let x;

console.log(x);

console.log(sayHello('코드잇최고'));

/*

undefined

안녕하세요 코드잇최고님! (Line 2에서 함수 호출 부분)

undefined (Line 8에서 함수 호출 부분)

*/

 

// 옵셔널 파라미터 (Optional Parameters)

function introduce(name, age, nationality = '한국') {

    console.log(`제 이름은 ${name}입니다.`);

    console.log(`나이는 ${age}살 이고,`);

    console.log(`국적은 ${nationality}입니다.`);

}

introduce('코드잇', 5, '미국'); // 값을 모두 전달한 경우

console.log(''); // 한줄 띄어쓰기

introduce('코드잇', 5); // 파라미터 값을 생략한 경우 (한국이 나옴)

/*

제 이름은 코드잇입니다.

나이는 5살 이고,

국적은 미국입니다.

제 이름은 코드잇입니다.

나이는 5살 이고,

국적은 한국입니다.

*/

function greet(name, message = 'Hello') {

    console.log(`${message}, ${name}!`);

  }

 

  greet('John'); // 출력값: "Hello, John!"

  greet('Jane', 'Hi'); // 출력값: "Hi, Jane!"

 

/*

message 매개변수는 옵셔널 파라미터로 선언되었으며,

함수를 호출할 때 값을 입력하지 않으면 "Hello"가 기본값으로 사용됨.

*/

 

// 주의해야할 것 : 파라미터의 위치

// 파라미터 중 age와 nationality의 순서를 바꿔봄

function introduce(name, nationality = '한국', age) {

    console.log(`제 이름은 ${name}입니다.`);

    console.log(`나이는 ${age}살 이고,`);

    console.log(`국적은 ${nationality}입니다.`);

}

introduce('코드잇', '미국', 43); // 값을 모두 전달한 경우

console.log(''); // 한줄 띄어쓰기

introduce('코드잇', 5); // 파라미터 값을 생략한 경우 (한국이 나옴)

/*

제 이름은 코드잇입니다.

나이는 43살 이고,

국적은 미국입니다.

제 이름은 코드잇입니다.

나이는 undefined살 이고,

국적은 5입니다.

*/

---

변수의 scope

// scope: 범위, 영역

function myFunction() { // 블록문 (Block Statement)

    let x = 3; // 로컬 변수, 지역 변수 (Local Variable)

    console.log(x);

}

myFunction();

// 3

console.log(x);

// error

// 블록문 안에서 선언된 변수를 밖에서 출력해서 오류남

let x = 3; // 글로벌 변수, 전역 변수 (Global Variable)

function myFunction() { // 블록문 (Block Statement)

    console.log(x); // 3

}

myFunction();

console.log(x); // 3

// Line 4와 Line 8 모두 3으로 잘 출력됨.

x는 전역변수로 함수 안에서도 사용할 수 있고, 함수 밖에서도 사용할 수 있음.

let x = 3; // 글로벌 변수, 전역 변수 (Global Variable)

function myFunction() { // 블록문 (Block Statement)

    let x = 5; // 로컬 변수, 지역 변수 (Local Variable)

    console.log(x); // 5

}

myFunction();

console.log(x); // 3

전역 변수와 지역변수는 이름이 같아도 서로 다른 변수로 간주됨.

함수 내에서 변수를 재정의하더라도 전역 변수는 영향을 받지 않음.

---

상수

변수와 다르게 항상 일정한 값

// 상수 (constant)

let pi = 3.14; // 원주율

let radius; // 반지름 -----> 선언만하고 값이 없으니 'undefined' 값을 가짐

// 상수 (constant)

let pi = 3.14; // 원주율

let radius = null; // 반지름

// -----> 반지름이 빈값이라는 것을 명시적으로 표현하고 싶을 때 사용

let radius = null 에서 만약

변수에 들어갈 자료형이 결정되지 않았거나, 일정하지 않을 경우에는 null값을 할당하느 ㄴ게 좋음.

빈값을 표현하면서 일정하게 들어갈 자료형을 간접적으로 표현하고 싶을 경우 

let radius = 0 // 숫자

let radius = '' // 문자

// 상수 (constant)

let pi = 3.14; // 원주율

let radius = 0; // 반지름

// -----> 반지름이 빈값이라는 것을 명시적으로 표현하고 싶을 때 사용

// 원의 넓이를 계산하는 함수

function calculateArea() {

    return pi * radius * radius;

}

// 반지름에 따른 원의 넓이를 출력하는 함수

function printArea() {

    return `반지름이 ${radius}일 때, 원의 넓이는 ${calculateArea()}`

}

radius = 4;

console.log(printArea());

radius = 7;

console.log(printArea());

radius = 8;

console.log(printArea());

여기서 pi 값은 3.14로 고정되어 있음.

이렇게 변하지 않는 값이 '상수'임.

상수는 변수를 선언할 때 'const'라는 키워드로 선언해주면 됨.

const로 선언한 상수는 밑에서 재선언하는 경우, 값을 입력하지 않은 경우 오류가 나므로 보호할 수 있음.

const로 선언한 상수를 밑에서 재선언한 경우

const로 선언한 상수의 값을 할당하지 않은 경우

상수는 이름을 지을 때 대문자와 밑줄로 작성해주어야 함.

이름에 들어가는 모든 알파벳을 대문자로 쓰고, 두 단어가 있을 때에는 밑줄로 구분을 함.

// 상수 (constant)

const MyNumber; // (X)

const MY_NUMBER // (O) -> 대문자_대문자

let radius = 0; //  

상수를 사용하는 이유?

변수를 작성하고 수정을 안 하면 되는데, 왜 굳이 상수를 사용하는 것인가.

→ 실수로 다른 값을 할당할 수 있고, 협업할 때 다른 사람이 변경할 수 있으므로 필요한 경우에 상수를 활용해야 함.