✔️할당 연산자(Assignment operators)

let name = '코드잇';
let x = 5;

x = x - 2;
console.log(x);

//3

js에서 =는 수학에서 처럼 '같다'라는 의미가 아니라 등호 오른쪽에 있는
피연산자를 왼쪽에 할당한다 라고 이해하기.
코드를 해석할 땐 할당연산자의 오른쪽부터 계산하기
5 빼기 2는 3이니까 x는 3이된다.

✔️복합 할당 연산자

할당 연산자와 결합해서 자주 쓰이는 표현을
더 간략하게 쓸 수 있게 해주는 연산자를
복합 할당 연산자(Compound assignment operators)라고 합니다.

// 다음 두 줄은 같습니다
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!');  //여기까지 sayHello 함수를 정의해주는 부분
}           

  console.log('함수 호출 전'); //함수 호출전 이라는 문자열 출력
  sayHello();                 //sayHello함수를 호출 후 그 함수의 내용을 한줄씩 실행.
                              //처음엔 'Hello'라는 문자열을 출력
                              //그 다음엔 'Welcome to Codeit!' 출력
                              //함수를 다 실행하고 나면 함수를 호출했던 sayHello로 돌아옴.
                              //그렇지만 이미 함수를 호출하는 역할을 다 했기 때문에 
                              //그 다음줄 호출

  console.log('함수 호출 후');  //함수 호출 후 출력 후 프로그램 종료

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

📢예시1.

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

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

//
함수 호출 전
25
함수 호출 후

✔️return문 제대로 이해하기⭐⭐

❗return의 2가지 역할❗
1. 함수 호출 부분에 어떤 값을 되돌려 준다.
2. 함수 자체의 실행을 중단한다.

📢Return문 제대로 이해하기⭐⭐

function square(x){
  console.log('return 전');// (2) 출력
  return x * x;            // (3) x값에 3대입후 10번째줄로 가서= 9출력
  console.log('return 후'); // -->이 부분은 출력되지 않음.Dead code
}

console.log('함수 호출 전');// (1) 호출하고 함수 맨 윗줄부터 출력함
console.log(square(3));     // (3)
console.log('함수 호출 후');//(4) 출력

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

⭐ return은 두 가지 역할을 한다⭐

1.어떤 값을 되돌려주는 output역할
2.함수의 실행을 중단: 함수 호출부분에 return키워드가 나오면 그대로 함수의 실행이 중단됨

4번줄은 어떤식으로 호출을 해도 리턴문으로 인해서 함수가 종료가 되기 때문에
리턴문 아래 코드들은 절대로 실행될 일이 없음. Dead Code라고 부름.
절대로 작성될 일이 없으니까 당연히 작성하지 않는것이 좋음

✔️Return과 console.log의 차이

📢예제1.

function printSquare(x){
  console.log(x * x); //(2) 3*3=9 라는 결괏값 나와서 printSquare함수 종료
} 

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

printSquare(3); //(1)함수의 인자값 3을 x에 대입

//9 출력

📢예제2.

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

  function getSquares(x) {  //(1)변수3 대입
  return x * x;             //(2)3*3=9
}                           //리턴문이 실행돼서 함수 끝남.
                            //근데 함수 호출만 했지 그 다음동작 작성 코드 없음
getSquares(3);             //그래서 프로그램 종료.실행하면 아무것도 출력안됨

📢예제2+콘솔추가

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

  function getSquares(x) {  
  return x * x;            //(2)3*3=9 출력
}                          
                           
console.log(getSquares(3)); //(1)콘솔로그로 감싸준다 

//9 출력

📢예제2+콘솔추가+printSquare(x)로 변수 변경

< function printSquare(x){   
 console.log(x * x);       // (1)3*3=9
} 

 function getSquares(x) { 
 return x * x;            
}                          
                          
console.log(printSquare(3)); //return문을 선언하지 않으면 undefined값 출력됨

// 9
undefined(맨아래 콘솔부분의 리턴값을 출력한 결과)출력

⭐⭐⭐

함수를 선언할 때 return문을 따로 작성하지 않으면 undefined값을 리턴
return은 함수를 실행하고 어떤 값을 돌려주는 것이고
console.log는 콘솔에 어떤것을 출력해 주는 함수

✔️옵셔널 파라미터

▪️파라미터가 있는데 함수를 호출할 때 아무런 값도 전달하지 않을 경우에는
언디파인드가 출력된다.

📢예시1.⭐⭐⭐⭐⭐

  function sayHello(name) {
    console.log(`안녕하세요 ${name}님!`)
  }
 
  sayHello('좋아요')
  sayHello('코드잇')
  sayHello('사랑해')
  sayHello();-------->파라미터 없어서 언디파인드
 
  let x;------>변수를 선언하고 아무것도 할당하지 않아서 언디파인드
  console.log(x);
  console.log(sayHello('코드잇최고'))--->'코드잇최고'부분은 출력이 됐지만 sayHello함수 호출했지만 리턴문이 없음.언디파인드

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

🔹옵셔널 파라미터(미리 값을 할당한 것)

: 반드시 가장 뒤쪽으로 선언해줘야함

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

  introduce('코드잇', 4, '미국'); // 값을 모두 전달한 경우
  console.log('');
  introduce('코드잇', 4); //파라미터 값을 생략한 경우. 미리 할당한 값이 출력됨

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

✔️변수의 scope(글로벌변수/로컬변수)

:변수의 유효범위를 알아보자.

📢변수를 함수 동작부분에 담고 함수를 호출해보자

function myFunction(){
  let x = 3;
  console.log(x);
}

myFunction();
// 3

📢함수 밖에서 변수 x를 출력해보면 어떻게 될까?

function myFunction(){
  let x = 3;
  console.log(x);
}

myFunction();
console.log(x)-->이 부분에서 에러뜸
//3
  error
자바스크립트에서는 중괄호로 감싼 코드를 블록문(Block Statement)이라고 함.
이 블록문 안에 선언된 변수들을 '로컬변수' 혹은 '지역변수'라고 부르는데
이 로컬변수는 블록문 내에서만 사용할 수 있음. 그래서 함수 밖 콘솔부분의 변수 x는
변수가 유효하지 않은 곳에서 사용한거니까 정의되지 않았다는 오류가 발생.

📢이번엔 변수 x를 함수 밖으로 가져가보자

let x = 3;

function myFunction(){ 
    console.log(x)        
}                       

myFunction();           
console.log(x)          
//3 
  3 출력됨

블록문 밖에서 선언한 변수는 블록문 안에서도 사용할 수 있음.
이러한 변수를 '글로벌변수' 또는 '전역변수'라고 부른다.

📢함수 내부에서 똑같은 이름의 로컬변수를 선언하면 어떻게 될까?

let x = 3;              //(1)글로벌 변수x 선언        (7)글로벌변수 x선언
         
function myFunction(){  //(2)함수 선언
  let x = 5;            //(4)로컬변수 x 또 선언
  console.log(x)        //(5)로컬변수 출력 -------->5
}                       //(6)함수 종료

myFunction();           //(3)함수호출
console.log(x)          //                ----->(8) 3 출력
//
  5
  3 출력

✔️상수

상수(constant): 절대 변하지 않고 일정한 값

  const PI = 3.14; // 원주율
  let radius = 0; // 반지름  -->선언만 하고 할당해 주지 않은 변수는 undefined/
                              //빈 값이라고 명시적으로 표현하고 싶으면 null 할당하기
                              //변수에 일정하게 들어갈 값의 자료형도 간적접으로 표현하고 싶을떄는 
                              //문자열일 경우에는 빈 문자열('')을 숫자의 경우에는 숫자0을 할당
                              //지금같은 경우에는 반지름이니까 0을 할당하기
 

  //원의 넓이를 계산하는 함수(글로벌 변수 2개 활용해서 원의 넓이를 계산한 값을 리턴)
  function calculateArea() {
    return PI * radius * radius; 
  }

  //반지름에 따른 원의 넓이를 출력하는 함수를 활용해서 만든 템플릿 문자열을 리턴하는 함수
  function printArea() {
     return `반지름이 ${radius}일 때, 원의 넓이는 ${calculateArea()}`;
  }
 
  //radius의 값을 변경해 가면서 printArea결괏값을 콘솔에 출력하는 코드
  radius = 4;
  console.log(printArea());
 
  radius = 7;
  console.log(printArea());
 
  radius = 8;
  console.log(printArea());

//
"반지름이 4일 때, 원의 넓이는 50.24"
"반지름이 7일 때, 원의 넓이는 153.86"
"반지름이 8일 때, 원의 넓이는 200.96"

상수는 값을 재할당하려고 하면 실행했을때 오류가 나타나기 때문에
상수의 값을 보호할 수 있다. 그리고 값을 변경할 수 없기 때문에
선언할 때 값을 할당해 주지 않아도 오류가 나옴

상수는 이름을 지을 때 대문자와 밑줄로 작성해주는 암묵적인 규칙이 있다.
❗이름에 들어가는 모든 알파벳을 대문자로 쓰고 두개 이상의 단어가 있을때는
밑줄로 두 단어를 구분한다.(ex.myNumber->MY_NUMBER)❗
이렇게 쓰는 이유는 변수와 상수를 구분하고 위함.

선언할 때는 ❗const라는 키워드❗로 상수와 변수를 구분할 수 있지만
실제로 상수를 사용할 때는 키워드 없이 상수 이름으로 사용되기 때문에
변수와 상수를 구분하기 위한 규칙이 필요.

Author And Source

이 문제에 관하여(JavaScript_2_추상화), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kimhyesu-_-/JavaScript2추상화

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

JavaScript_2_추상화