JavaScript(2)

💡객체와 배열

객체는 중괄호({})를 사용하며 키(key)와 값(value)의 한쌍으로 이루어진다. 배열(array)는 복수의 데이터를 정의할 수 있는 자료형이다.

//배열
let scores = [10, 20, 30, 40, 50];
let names = ['정청' , '이자성', '이중구'];

console.log(scores);
console.log(scores[2]); //index로 접근할 수 있다.
console.log(names);

🔽실행 결과

//객체
let stu1 = {
  stuid:14155,
  name:'나이름',
  age:15
};

console.log(stu1);
console.log(stu1.name);
console.log(stu1['name']); //키값으로 접근할 수 있다.

🔽실행 결과

💡연산자

• 이항 산술 연산자 : 연산을 수행하는데 피연산자가 2개 필요한 연산자
  +, -, *, /, %, **
• 단항 산술 연산자 : 연산을 수행하는데 피연산자가 1개만 필요한 연산자
  ++, --, +, -
• 대입 연산자 : 데이터를 대입하는 연산을 수행하는 연산자
  =
• 복합 대입 연산자 : 산술 연산자와 대입 연산자를 함께 사용해 산술과 할당을 한 번에 수행하는 연산자
  +=, -=, *=, /=, %=, **=

//복합 대입 연산자의 예
x += y; //x = x + y;
x **= y; //x = x ** y; x의 y거듭제곱

• 비교 연산자 : 피연산자를 비교한 뒤, 논리형 값인 참(true) 혹은 거짓false)를 반환하는 연산자
  ==, ===, !=, !==, <, <=, >, >=
  💬 == 은 두 값이 값으면 true를 반환하고 ===은 두 값과 자료형이 같으면 true를 반환한다.

//==과 ===의 비교
let num100 = 100;
let str100 = '100';
console.log(num100 == str100); //true를 반환
console.log(num100 === str100); //false를 반환

• 논리 연산자 : 연산자를 논리적으로 평가한 뒤, 조건에 맞는 피연산자를 반환
  &&, ||, !
• 삼항 연산자 : 세 항 중 가장 왼쪽에 있는 피연산자의 참, 거짓에 따라 나머지 두 항에 있는 피연산자를 선택적으로 반환
  x ? y : z

💡조건문

• if else else if문 : if 뒤에 오는 소괄호(()) 안의 조건식이 참이면 중괄호({}) 안의 코드를 실행하는 조건문으로 if문의 조건식이 거짓일 때는 else문이 실행
  else if는 if문에 조건을 추가하고 싶을 때 사용하는 블록문

• switch문 : switch 뒤에 오는 소괄호 안의 값과 일치하는 case문이 있을 때 해당 코드를 실행하는 조건문

💡반복문

• while문 : 특정 조건을 만족하는 동안 블록문을 실행
• do...while문 :특정 조건이 참으로 평가되는 동안 do 다음에 오는 블록문을 반복 실행
• for문 : 지정한 횟수가 끝날 때까지 블록문을 반복 실행하는 반복문
• for in문
  for(가변수 in 배열/객체 리터럴){ //블록문 }

//for...in [배열]
let arr = ['가', '나', '다'];

for(let idx in arr){
  console.log(idx + " " + arr[idx]);
}

🔽실행 결과

//for...in {객체}
let person = {
  name : "내이름",
  age:30,
  phone:"010010"
};

for(let key in person){
  console.log(key + " " + person[key]);
}

🔽실행 결과

💬 추가로 살펴보는 for of문

//java의 '향상된 for문'과 같은 기능을 한다.
let arr = ['가', '나', '다'];

for(let val of arr){
  console.log(val);
}

🔽실행 결과

💡함수(function)

함수는 어떤 목적을 가지고 작성한 코드를 모아 둔 블록문이다. 함수를 정의한다는 것은 블록문을 function 키워드, 식별자, 소괄호와 함께 묶어 함수를 생성하는 것이다. 함수를 정의하고 나면 코드를 새로 작성할 필요 없이 정의한 함수를 호출하면 된다.
💬함수와 메소드
함수는 어떤 특정한 기능을 수행하기 위한 블록이라면 메소드는 객체 단위로 개발하는 특정 클래스 내부의 특정 코드들의 모임이라고 볼 수 있다. 두 개념을 비슷한 개념으로 이해하고 넘어가도 좋다.

📖 함수를 정의하는 방법

1. 함수 선언문으로 함수 정의
   function 식별자 () {}

2. 함수 표현식으로 함수 정의
   const 변수명 = funtion() {}; -> 익명 함수
   const 변수명 = funtion 식별자() {}; -> 네이밍 함수

3. 화살표 함수로 함수 정의
   () => {};

아래에서 코드를 이용해 자세히 살펴보겠다.

//1. 함수 선언문으로 함수 정의
function gugudan(){
  for(let i=1; i<=9; i++){
    console.log(`3 * ${i} = ${3*i}`);
  }
}
gugudan();

🔽실행 결과

//2. 함수 표현식으로 함수 정의-네이밍 함수
const funcGugudan4 = function gugudan4(){
  for(let i=1; i<=9; i++){
    console.log(`4 * ${i} = ${4*i}`);
  }
}
funcGugudan4();

🔽실행 결과

//2. 함수 표현식으로 함수 정의-익명 함수
const funcGugudan5 = function(){
  for(let i=1; i<=9; i++){
    console.log(`5 * ${i} = ${5*i}`);
  }
}
funcGugudan5();

🔽실행 결과

//3. 화살표 함수로 함수 정의
const funcGugudan6 = ()=> {
  for(let i=1; i<=9; i++){
    console.log(`6 * ${i} = ${6*i}`);
  }
}
funcGugudan6();

🔽실행 결과

📖매개변수와 인수

매개변수는 함수가 호출될 때 전달받은 데이터를 할당하기 위해 함수에서 선언하는 변수이다.
인수는 정의한 함수를 호출할 때 전달하는 데이터이다.

즉, 함수 선언문을 살펴보면

function 함수명(매개변수1, 매개변수2, ... 매개변수n) {}

이렇게 함수를 정의할 때 전달받는 용도로 사용하는 것이 매개변수이다.

함수를 호출할 때

함수명(인수1, 인수2, ... 인수n);

이렇게 함수에 넘겨주는 값(변수)이 인자이다.

매개변수는 함수를 호출하며 데이터를 전달해도 매개변수를 정의하지 않으면 데이터를 전달받지 못한다. 하지만 오류는 발생하지는 않는다. 매개변수의 기본값은 undefined이다.

📖return

함수 내부에서 함수를 호출한 곳으로 데이터를 전달할 때는 return문을 사용한다.

function sum(num1, num2){
  let result = num1 + num2;
  return result;
}
let result = sum(50, 40);
console.log(result); //90이 출력된다.

💬return은 함수가 종료되는 역할로도 쓸 수 있다.

function sample(){
  console.log(1);
  console.log(2);
  return;
  console.log(3);
}
sample();

🔽실행 결과

=> return 아래의 코드는 실행되지 않은 결과를 볼 수 있다.

💬화살표 함수에서 중괄호({})를 생략하면 화살표 다음에 오는 코드는 return문으로 처리된다. 아래와 같이 쓸 수 있다.

const sum = (num1, num2)=> num1 + num2;