JS : 변수 선언, 자료형, 조건문, 반복문 정리

• 변수

※ 사용하는 이유
- 데이터를 보다 효율적으로 관리하고 재사용성을 높이기 위해서 사용한다.

※ 종류
- var, let, const

※ 사용 방법
- var (ES6 이전) : 재선언, 재할당 모두 가능한 변수타입

// 호이스팅 시 undefined로 초기화가 되기때문에 별도의 TDZ 구간이 발생하지 않는다.
// 개발자가 예상하지 못한 방식으로 개발이 진행될수도 있기때문에 요즘들어서는 잘 사용하지 않는 방식이다.

console.log(message); // undefined

// message 변수 선언
var message = "Hello JavaScript";

console.log(message); // Hello Javascript

// message 변수 재선언
var message = "Bye Javascript";

console.log(message); // Bye Javascript

// message 변수 재할당
message = "I'm Javascript";

console.log(message); // I'm Javascript

- let (ES6) : 재선언은 불가능하고 재할당은 가능한 변수타입

// 호이스팅 시 별도로 초기화가 되지 않기때문에 개발자가 초기값을 입력한 구간까지 TDZ 구간이 발생한다.
// TDZ 구간에서 접근 시 ReferenceError가 발생한다.

console.log(message1); // ReferenceError
// TDZ 구간
let message1 = "Hello JavaScript";

let message2 = "Bye Javascript";
message2 = "I'm Javascript";
console.log(message2); // I'm Javascript

- const (ES6) : 재선언과 재할당 모두 불가능한 변수타입 (원시타입일 경우 불변성 유지)

// 호이스팅 시 별도로 초기화가 되지 않기때문에 개발자가 초기값을 입력한 구간까지 TDZ 구간이 발생한다.
// TDZ 구간에서 접근 시 ReferenceError가 발생한다.

console.log(message1); // ReferenceError
// TDZ 구간
const message1 = "Hello JavaScript";

const message2 = "Bye Javascript";
message2 = "I'm Javascript"; // TypeError

 

 

• 자료형 (원시 타입)

※ 종류
- Number, String, Boolean, null, undefined, Symbol, BigInt

※ 사용 방법
- Number (숫자) : 정수, 부동 소수점 숫자

let integerNumber = 32; // 정수
let floatingPointNumber = 3.14; // 부동 소수점 숫자​

 

- String (문자열) : 작은따옴표(')나 큰따옴표(")로 감싸진 문자의 나열

let greeting = 'Hello, World!';
let name = "Daniel";​

 

- Boolean (불리언) : 참(true) 또는 거짓(false) 값

let isTrue = true;
let isFalse = false;​

 

- null : 값이 없음

let myVar = null;​

 

- undefined : 초기화되지 않았거나 값이 할당되지 않았을 때의 기본값

let notDefined;
console.log(notDefined); // 출력 결과: undefined

 

- Symbol : 고유하고 변경 불가능한 원시 데이터 유형으로, 객체 속성의 키로 주로 사용

const mySymbol = Symbol('description');​

 

- BigInt : 매우 큰 정수를 나타내기 위한 원시 데이터 유형으로, 정수 뒤에 n을 붙여 표현

const bigInteger = 9007199254740991n;

 

• 자료형 (참조 타입)

※ 종류
- Array, Object, function, Map, Set, Date

※ 사용 방법
- Array (배열) : 여러 개의 값을 순서대로 저장하는 자료 구조

let arrNumber = [1, 2, 3, 4, 5];
let arrString = ['안', '녕', '하', '세', '요'];

 

- Object (객체) : 이름과 값으로 이루어진 프로퍼티를 가지는 자료 구조

let myObject = {
  name: 'Daniel',
  age: 32,
  isStudent: true
};

 

- Function (함수) : 재사용 가능한 코드 블록을 정의하고 호출하는 데 사용되는 자료 유형

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

let sum = add(5, 10);
console.log(sum); // 15

 

- Map : 키-값 쌍의 컬렉션을 나타내는 자료 구조 (객체와 유사하지만, 키에 다양한 데이터 유형 사용 가능)

let myMap = new Map();

myMap.set('key1', 'value1');
myMap.set('key2', 'value2');

 

- Set : 중복되지 않는 값을 가지는 컬렉션을 나타내는 자료 구조

let mySet = new Set([1, 2, 3, 1, 2]);

// 중복된 숫자는 제거된 상황
console.log(mySet); // Set { 1, 2, 3 }

 

- Date : 날짜와 시간 정보를 다루는 데 사용되는 자료 유형

let currentDate = new Date();

console.log(currentDate); // 현재 날짜와 시간을 출력

 

• 얕은 복사, 깊은 복사

※ 값의 저장 위치
- 원시타입 : 값이 콜 스택에 저장된다.
- 객체타입 : 값은 힙에 저장이 되고 콜 스택에는 힙에 저장된 값의 주소값을 저장한다.

※ 깊은 복사, 얕은 복사
- 객체 얕은 복사 방법 : Spread 연산자, object.assign({}, 복사할 객체)
- 배열 얕은 복사 방법 : Spread 연산자, Array.from, slice(), concat()
- 객체 깊은 복사 방법 : JSON.parse(JSON.stringify(복사할 객체))
- 배열 깊은 복사 방법 : JSON.parse(JSON.stringify(복사할 배열))

※ 얕은 복사, 깊은 복사 예시 코드

const arr1 = [3, 4, 5];
const arr2 = arr1;
arr2[2] = 6;
arr2.push(5);
console.log(arr1, arr2); // 대입 연산자를 사용할 경우 하나의 값이 변하면 나머지 값도 변한다.
// [ 3, 4, 6, 5 ] [ 3, 4, 6, 5 ]


const arr3 = [3, 4, 5];
const arr4 = [...arr3];
arr4[2] = 6;
arr4.push(5)
console.log(arr3, arr4); // 1차원 배열에서는 얕은 복사를 하더라도 개별적으로 동작한다.
// [ 3, 4, 5 ] [ 3, 4, 6, 5 ]


const arr5 = [3, 4, 5];
const arr6 = Array.from(arr5);
arr6[2] = 6;
arr6.push(5)
console.log(arr3, arr4); // 1차원 배열에서는 얕은 복사를 하더라도 개별적으로 동작한다.
// [ 3, 4, 5 ] [ 3, 4, 6, 5 ]


const arr7 = [3, 4, [5, 6]];
const arr8 = [...arr7];
arr8[2][1] = 10;
console.log(arr7, arr8); // 2차원 배열에서는 얕은 복사를 할 경우 값이 같이 변경된다.
// [ 3, 4, [ 5, 10 ] ] [ 3, 4, [ 5, 10 ] ]


const arr9 = [3, 4, [5, 6]];
const arr10 = Array.from(arr9);
arr10[2][1] = 10;
console.log(arr9, arr10); // 2차원 배열에서는 얕은 복사를 할 경우 값이 같이 변경된다.
// [ 3, 4, [ 5, 10 ] ] [ 3, 4, [ 5, 10 ] ]


const arr11 = [3, 4, [5, 6]];
const arr12 = JSON.parse(JSON.stringify(arr11));
arr12[2][1] = 10;
console.log(arr11, arr12); // JSON.parse, JSON.stringify를 사용해서 깊은 복사를 할 수 있다. (완전히 새로운 메모리 주소 참조)
// [ 3, 4, [ 5, 6 ] ] [ 3, 4, [ 5, 10 ] ]

 

 

• 조건문

※ 사용하는 이유
- 특정 조건에 따라 코드를 실행시켜야할때 사용한다. (참, 거짓으로 조건을 판단)

※ 종류
- if, else-if, switch, 삼항연산자

※ 사용 방법
- if : 주어진 조건이 참이면 코드 블록을 실행

let number = 10;

if (number > 5) {
  console.log('Number is greater than 5');
} else {
  console.log('Number is not greater than 5');
}

- else-if : 여러 개의 조건을 검사하고자 할 때 사용

let grade = 75;

if (grade >= 90) {
  console.log('A');
} else if (grade >= 80) {
  console.log('B');
} else if (grade >= 70) {
  console.log('C');
} else {
  console.log('F');
}

- switch : 특정 변수의 값을 여러 경우 중 하나와 비교하고자 할 때 사용

let dayOfWeek = 'Monday';

switch (dayOfWeek) {
  case 'Monday':
    console.log('It\'s the start of the week');
    break;
  case 'Friday':
    console.log('It\'s almost the weekend');
    break;
  default:
    console.log('It\'s a regular day');
}

- 삼항연산자 : 간단한 조건문을 한 줄로 표현할 때 사용

let isRaining = true;

let weather = isRaining ? 'Bring an umbrella' : 'Enjoy the sunshine';
console.log(weather);

 

• 반복문

※ 사용하는 이유
- 특정한 조건이 참인 동안 또는 특정한 횟수만큼 코드 블록을 반복 실행하는 데 사용

※ 종류
- for, while, do-while, for-in, for-of, map, filter, reduce, forEach, some, every

※ 사용 방법
- for : 배열 또는 문자열의 각 요소에 대해 인덱스를 사용하여 반복

// 배열
let numbers = [1, 2, 3, 4, 5];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}


// 문자열
let numbers = '12345';

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

- while : 배열의 각 요소에 대해 제공된 함수를 실행

// 배열
let numbers = [1, 2, 3, 4, 5];

numbers.forEach(function (number) {
  console.log(number);
});

numbers.forEach(number => console.log(number));

- do-while : 일단 코드 블록을 실행한 후에 조건을 평가 (최소 한번 이상 실행)

let count = 0;

do {
  console.log(count);
  count++;
} while (count < 5);

- for-in : 객체의 열거 가능한 속성들에 대해 반복

let person = {
  name: 'Daniel',
  age: 32,
  job: 'FrontEnd Developer'
};

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

- for-of : 반복 가능(iterable)한 객체(배열, 문자열 등)의 값을 반복

let numbers = [1, 2, 3, 4, 5];

for (let num of numbers) {
  console.log(num);
}

- forEach : 배열의 각 요소에 대해 제공된 함수를 실행 (일반적으로 화살표 함수 사용)

let numbers = [1, 2, 3, 4, 5];

numbers.forEach(function (number) {
  console.log(number);
});

numbers.forEach(number => console.log(number));

- map : 배열의 각 요소에 대해 새로운 배열을 반환하는 함수를 실행

let numbers = [1, 2, 3, 4, 5];

let squaredNumbers = numbers.map(number => number * number);

console.log(squaredNumbers);

- filter : 주어진 함수로 필터링된 배열을 반환

let numbers = [1, 2, 3, 4, 5];

let evenNumbers = numbers.filter(number => number % 2 === 0);

console.log(evenNumbers);

- reduce : 배열의 각 요소에 대해 주어진 함수를 실행하고, 누적된 결과를 반환 (누적된 결과가 아니어도 가능)

let numbers = [1, 2, 3, 4, 5];

let sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum);

- some : 배열의 하나 이상의 요소가 주어진 조건을 만족하는지 확인

let numbers = [1, 3, 5, 7, 9];

let hasEvenNumber = numbers.some(number => number % 2 === 0);

console.log(hasEvenNumber); // true (하나 이상의 짝수가 있음)

- every : 배열의 모든 요소가 주어진 조건을 만족하는지 확인

let numbers = [2, 4, 6, 8, 10];

let allEvenNumbers = numbers.every(number => number % 2 === 0);

console.log(allEvenNumbers); // true (모든 수가 짝수임)