JavaScript 핵심 개념 정리(추상화)

📌 할당 연산자(Assignment operators)

피연산자 = 피연산자
👉🏼 오른쪽에 있는 피연산자를 왼쪽에 있는 피연산자에 할당(대입)한다.
피연산자 : 연산이 되어지는 값

할당 연산자는 연산의 순서가 있다.
👉🏼 할당 연산자의 오른쪽부터 연산한다.

이거는 쉬운 코드!
let name = '코드잇';
let x = 5;

!잠깐 그러면 이건 어때?
x = x -2;
새로운 x에 새로운 값을 할당시킨다.
수학에서는 틀린 연산이지만 자바스크립트에서는 맞는 연산이다.

// 1) x = 5 - 2;
// 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;

📌 증가, 감소 연산자

✔️ 변수의 값을 1씩 증가시키거나 감소시킬 때 복합 할당 연산자보다 더 간략하게 쓸수있는 연산자

// 다음 세 줄은 같은 의미입니다.
x = x + 1;
x += 1;
x++;

// 다음 세 줄은 같은 의미입니다.
x = x - 1;
x -= 1;
x--;

📌 함수의 실행 순서

✔️ ①위에서 아래로 내려가면서 읽고 ②왼쪽에서 오른쪽으로 읽으면서 함수 호출한다.

3️⃣function sayHello(){
  console.log('Hello');
  console.log('Welcome to Codeit!')
}

1️⃣console.log('함수 호출 전');
 2️⃣sayHello();
 4️⃣console.log('함수 호출 후');

1. 처음 console.log를 호출한다.
2. sayHello();라는 함수를 호출하고
3. 위에서부터 sayHello();라는 함수를 찾는다.
4. 함수를 찾고 나서 값을 호출한 다음 console.log를 호출한다.
5. 그 다음은 없기 때문에 프로그램이 종료된다.

출력👇🏻

함수 호출 전
Hello
Welcome to Codeit!
함수 호출 후

예시 ①

//함수 정의
function square(x){
  return x * x
}

console.log('함수 호출 전');
console.log(square(5)); //파라미터로 숫자 5 전달
console.log('함수 호출 후');

'함수 호출 전'
25
'함수 호출 후'

예시 ②

function square(x){
  return x * x;
}

console.log('함수 호출 전');
console.log(square(3) + square(4));
console.log('함수 호출 후');

'함수 호출 전'
25
'함수 호출 후'

실습 예시 👇🏻

function logParticipant(userName) {
  console.log(userName + '(이)가 대화에 참여했습니다.');
}

// 테스트 코드
logParticipant('동수');
logParticipant('윤하');
logParticipant('재준');
logParticipant('동훈');
logParticipant('영희');
logParticipant('신욱');

출력👇🏻

동수(이)가 대화에 참여했습니다.
윤하(이)가 대화에 참여했습니다.
재준(이)가 대화에 참여했습니다.
동훈(이)가 대화에 참여했습니다.
영희(이)가 대화에 참여했습니다.
신욱(이)가 대화에 참여했습니다.

📌 Return문 제대로 이해하기

✔️ 어떤 값을 되돌려주는 output의 역할을 한다.
✔️ 함수의 실행을 중단하는 역할도 있다.

//함수 선언
function square(x) {
1️⃣ console.log('return 전');
2️⃣return x * x;
  console.log('return 후'); //실행되지 않음
}


//문자열 출력
console.log('함수 호출 전');
3️⃣console.log(square(3)); //함수 호출 및 파라미터로 3 을 전달한다.
4️⃣console.log('함수 호출 후');

출력 👇🏻

함수 호출 전
return 전
9
함수 호출 후

1. 함수 선언 후 return 전이라는 문자열이 출력
2. return x * x에 대한 계산을 시작하고
3. 그 결과값인 9를 console.log에서 출력한 후 함수를 빠져나온다.
   → return문에 의해서 아래에 있는 것들은 호출될 일이 없다.
4. 그 후 ‘함수 호출 후’라는 문자열을 출력하고 종료한다.

console.log('return 후');
→ 아무 의미 없는 코드이다, 작성할 필요가 없다. = 데드 코드(Dead Code)

📌 return과 console.log의 차이

✔️ return문이 없는 함수를 실행하면 함수 호출은 undefined값을 호출
return문은 함수를 실행하고 어떤 값을 돌려주는 것
console.log는 console창에 어떤 값을 출력해주는 것

function printSquare(x) {
 console.log(x * x);
}


function getSquare(x){
 return x * x;
}


printSquare(3);
getSquare(3); 
console.log(printSquare(3));
console.log(getSquare(3));

출력 👇🏻

9
출력안됨
undefined
9

getSquare(3);
→ 함수 호출부분이 9로 대체 됐을 뿐 다음 동작에 대해서 선언된 것이 없다.
return문에 의해 함수는 종료된다.

console.log(printSquare(3));
→ return문이 없기 때문에 함수호출을 하게 되면 undefined가 된다.

실습 예시 👇🏻

function calculateRectangleArea(width, height){
  return width * height;
}
//이 값을 콘솔에 출력하는 것이 아니라, 호출한 부분에 이 값을 다시 돌려줘야 하는 것

// 테스트 코드
let area1 = calculateRectangleArea(3, 4); // 가로 3, 세로 4인 직사각형의 넓이 계산
let area2 = calculateRectangleArea(5, 8); // 가로 5, 세로 8인 직사각형의 넓이 계산
let area3 = calculateRectangleArea(7, 2); // 가로 7, 세로 2인 직사각형의 넓이 계산

console.log(`Area1: ${area1}, Area2: ${area2}, Area3: ${area3}`);

출력 👇🏻
Area1: 12, Area2: 40, Area3: 14

📌 옵셔널 파라미터

✔️ 파라미터의 기본값을 설정하는 방법, 파라미터값을 생략해도 되니까 선택적으로 전달된다.
✔️ 선언을 할 때 반드시 생성한 다음 가장 뒤쪽으로 선언해줘야 한다.
✔️ 함수의 파라미터 값을 활용하면 전달되는 값에 따라 다양한 결과값을 얻을 수 있다.

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

sayHello('코드잇');
sayHello('좋아요');
sayHello('사랑해');
sayHello();

출력 👇🏻

안녕하세요 코드잇님!
안녕하세요 좋아요님!
안녕하세요 사랑해님!
undefined

sayHello();
→ 파라미터의 값을 넣지않으면 undefined가 나온다.

올바른 예시

function introduce(name, age, nationality = '한국'){
  console.log(`제 이름은 ${name}입니다.`);
  console.log(`나이는 ${age}살 이고, `);
  console.log(`국적은 ${nationality}입니다.`);
}

introduce('코드잇', 4, '미국'); //값을 모두 전달한 경우
console.log(``);
introduce('코드잇', 4); //파라미터 값을 생략한 경우
------------
제 이름은 코드잇입니다.
나이는 4살 이고, 
국적은 미국입니다.

제 이름은 코드잇입니다.
나이는 4살 이고, 
국적은 한국입니다.

순서가 바뀌었을 때 잘못된 예시

function introduce(name, nationality = '한국', age){
  console.log(`제 이름은 ${name}입니다.`);
  console.log(`나이는 ${age}살 이고, `);
  console.log(`국적은 ${nationality}입니다.`);
}

introduce('코드잇', '미국', 4); //값을 모두 전달한 경우
console.log(``);
introduce('코드잇', 4); //파라미터 값을 생략한 경우
-------
제 이름은 코드잇입니다.
나이는 4살 이고, 
국적은 미국입니다.

제 이름은 코드잇입니다.
나이는 undefined살 이고, 
국적은 4입니다.

📌 변수의 scope

✔️ 모든 변수에는 범위가 있어서 그 범위를 벗어나게 되면 오류가 발생한다.(로컬변수, 글로벌변수)
✔️ 블록문 안에 선언된 변수를 로컬변수, 지역변수라고 한다. 블록문 안에서만 사용가능하다.
✔️ 블록문 밖에서 선언된 변수를 글로벌 변수, 전역 변수라고 한다. 어느곳에서나 사용 가능하다.

//변수의 유효 범위 알아보기

function myFunction(){
  let x = 3; 지역 변수
  변수 x의 Scope는 myFunction안에서만 유효하다.
  console.log(x);
} 블록문

myFunction(); //3
console.log(x); //undefined
	변수 x는 지역변수이기에 함수밖에서 선언하면 범위가 유효하지 않아서 오류가 난다.

let x = 3; //전역 변수
**1. 전역 변수를 선언한다.**

function myFunction(){
  let x = 5; //지역 변수
  console.log(x);
**5. 지역 변수를 사용한다.**
}
**2. myFunction 함수를 선언한다.**
**4. 함수 내부에 있는 변수가 선언된다.**

myFunction(); //5
**3. 함수를 호출한다.**
console.log(x); //3
**6. 전역 변수를 선언한다.**

📌 상수

✔️ 절대 변하지 않고 항상 일정한 값
✔️ const 상수 이름 = 상수의 값
→ 임의로 변경하려하면 상수이기에 오류가 난다.
→ 값을 변경할 수 없기 때문에 선언할 때 값을 할당해주지 않아도 오류가 난다.
✔️ 상수는 이름을 지을 때 대문자와 밑줄로 작성해주는 규칙이 있다.
→ 변수와 구분하기 위해 사용하는 규칙이다.
→ let myNumber(변수 이름) / const MY_NUMBER(상수 이름)

const PI = 3.14; //원주율, 변하지 않고 일정한 값 ' 상수 '
let radius = 0; 
//반지름,빈 값을 표현하면서 일정하게 들어갈 값의 자료형을 간접적으로 표현하고 싶을 때는 문자형일 때는 null, 숫자형일 때는 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());

상수는 변하지 않는 값이라는 것을 미리 선언해주는 것이 좋다.
const pi = 3.14;