1주차 강의

변수 선언 (키워드)

var

• 변수를 선언하기 위한 키워드
• 재할당 가능, 재선언 가능 (마지막에 할당된 값이 변수에 저장됨)
• 함수 스코프를 가지며, 호이스팅 됨.

const

• 상수(constant)를 선언하기 위해 사용되는 키워드 
• 재할당 불가능 (한 번 값이 할당되면 다른 값을 할당할 수 없음)
• 블록 스코프를 가지며, 호이스팅 되지 않음

let

• 변수를 선언하기 위한 키워드
• 재할당 가능, 재선언이 금지
• 블록 스코프를 가지며, 호이스팅 되지 않음

스코프
- 변수의 유효 범위를 나타내는 개념
- 함수 스코프: 변수가 함수 내에서 유효한 범위를 갖는 것을 의미
                    : 함수 스코프 내에서 선언된 변수는 해당 함수 내에서만 접근 가능, 함수 외부에서는 접근 불가능

- 블록 스코프: 변수가 블록 내에서 유요한 범위를 갖는 것을 의미

호이스팅
- 변수 및 함수 선언이 스코프의 상단으로 끌어올려지는 동작
- 변수 선언과 함수 선언은 실행 단계보다 먼저 처리

 

 

데이터 타입

• 데이터 타입은 코드를 작성할 때가 아니라 실제 코드가 실행될 때 타입이 결정
• typeof 함수를 이용해 변수의 타입 확인 가능

let test = 1;
typeof test; // number

 

• 숫자
  1. 정수형 숫자 (Integer)
  2. 실수형 숫자 (Float)
  3. 지수형 숫자 (Exponential)
  4. NaN (Not a Number): 숫자가 아님을 나타내는 값
  5. Infinity: 무한대를 의미
• 문자열
  • 문자의 나열을 의미
  • 작은 따옴표(')나 큰 따옴표(")로 감싸서 표현문자열 (String)
  • 문자열 관련 함수

// 문자열 길이 (length)
let str1 = 'hello world';
let strLength = str1.length; // 11

// 문자열 결합 (concat)
let str1 = 'hello ';
let str2 = 'world';
let str3 = str1.concat(str2); // hello world

// 문자열 자르기 (substr, slice)
let str1 = 'hello, world!';

// substr(시작 인덱스, 길이);
// 시작 인덱스는 포함
str1.substr(7, 5); // world 

// slice(시작 인덱스, 종료 인덱스);
// 시작 인덱스는 포함, 종료 인덱스는 불포함
str1.slice(7, 12); // world

// 문자열 검색 (search)
// 문자열을 입력한 경우 문자열의 시작 인덱스 값을 반환
let str1 = 'hello, world!';
str1.search('world'); // 7

// 문자열 대체 (replace)
let str1 = 'hello, world!';
let str2 = str1.replace(", ", " "); // hello world

// 문자열 분할 (split)
let str = "apple, banana, kiwi";
let result = str.split(","); // ["apple", " banana", " kiwi"]

• 불리언 (boolean)
  • 참(true)과 거짓(false)을 나타냄
• undefined
  • 값이 할당되지 않은 변수를 의미
• null
  • 값이 존재하지 않음을 의미
• 객체 (Object)
  • 속성과 메소드를 가지는 컨테이너
  • 중괄호를 사용 {}
  • key-value pair
• 배열 (Array)
  • 여러 개의 데이터를 순서대로 저장하는 데이터 타입
  • 대괄호를 사용 []

 

 

형변환

• 암시적: 자동으로 수행되는 형변환
• 명시적: 수동으로 수행되는 형변환 (개발자가 직적 자료형을 변환)

 

 

연산자

1. 산술 연산자
   • 더하기: +
   • 빼기: -
   • 곱하기: *
   • 나누기: /, %
     • /: 나눗셈을 수행 (몫)
     • %: 나머지를 구함
2. 할당 연산자
   • 등호 연산자: =, +=, -=, *=, /=, %=
3. 비교 연산자
   • 일치 연산자: ===
   • 불일치 연산자: !==
4. 논리 연산자
   • 논리곱: &&
   • 논리합: ||
   • 논리 부정: !
5. 삼항 연산자

let x = 10;
// 조건 ? true : false;
let result = (x > 5) ? "크다" : "작다";

 

 

함수

// 함수 선언문
function add(x, y) {
	return x + y;
}

// 함수 표현식
let add = function (x, y) {
	return x + y;
}


// 화살표 함수
let add = (x, y) => x + y;


// 함수 스코프
// 1. 전역 스코프: 전체에서 사용 가능
let x = 10;
function printF(x){
	console.log(x);
}
printF();

// 2. 지역 스코프: 선언된 지역에서만 사용 가능
function printF(){
	let x = 10;
	console.log(x);
}
printF();
console.log(x); // 여기서는 접근 불가

// 3.블록 스코프: 선언된 블록에서만 사용 가능
if (true) {
	let x = 10;
    console.log(x);
}
console.log(x); // 여기서는 접근 불가

 

 

조건문

// if
let x = 10;
if (x > 0) {
	console.log('양수');
}
    
// if -else
let x = 10;
if (x > 0) {
	console.log('양수');
} else {
	console.log('음수');
}



// else if
let x = 0;

if (x > 0) {
  console.log("x는 양수입니다.");
} else if (x < 0) {
  console.log("x는 음수입니다.");
} else {
  console.log("x는 0입니다.");
}



// switch
// break 필수, 해당 구문이 없으면 블록을 빠져나가지 않고 다음 코드 블록들을 실행
let fruit = "사과";

switch (fruit) {
  case "사과":
    console.log("사과는 빨간색입니다.");
    break;
  case "바나나":
    console.log("바나나는 노란색입니다.");
    break;
  case "오렌지":
    console.log("오렌지는 주황색입니다.");
    break;
  default:
    console.log("해당하는 과일이 없습니다.");
    break;
}



// 조건부 실행
et x = 10;

(x > 0) && console.log("x는 양수입니다.");

 

 

반복문

// for
for (let i = 0; i < 10; i++) {
  console.log(i);
}



// for in
let person = { name: "John", age: 30, gender: "male" };

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



// while: 조건 체크하여 반복 여부 결정
let i = 0;

while (i < 10) {
  console.log(i);
  i++;
}



// do while: 한 번은 코드를 실행, 그 이후에 조건 체크하여 반복 여부 결정
let i = 0;

do {
  console.log(i);
  i++;
} while (i < 10);

 

 

객체

// 객체 생성
// 1. 기본
let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

// 2. 생성자 함수 사용
function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}

let person1 = new Person("홍길동", 30, "남자");
let person2 = new Person("홍길순", 25, "여자");



// 객체 메소드
// 1) key 접근
let keys = Object.keys(person);

// 2) value 접근
let values = Object.values(person);

// 3) 객체의 속성의 이름과 값들을 2차원 배열로 반환
let entries = Object.entries(person);
// [ [ 'name', '홍길동' ], [ 'age', 30 ], [ 'gender', '남자' ] ]

// 4) 객체 복사
let newPerson = Object.assign({}, person, { age: 35 });
// newPerson = { name: "홍길동", age: 35, gender: "남자" }

// 5) 객체 비교
let person1 = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let person2 = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

console.log(person1 === person2);   // false
console.log(JSON.stringify(person1) === JSON.stringify(person2));   // true

// 6) 객체 병합
let person1 = {
  name: "홍길동",
  age: 30
};

let person2 = {
  gender: "남자"
};

let mergedPerson = {...person1, ...person2};
// mergedPerson = { name: "홍길동", age: 30, gender: "남자" }

 

배열

// 1) 배열 생성
// 1-1) 기본
let fruits = ["사과", "바나나", "오렌지"];


// 1-2) 빈 배열
// new Array(길이);
let numbers = new Array(5);



// 2) 배열의 메소드
// 삽입
// 가장 마지막에 요소 넣기 (push)
let fruits = ["사과", "바나나"];
fruits.push("오렌지"); // ["사과", "바나나", "오렌지"]

// 가장 앞에 요소 넣기 (unshift)
let fruits = ["바나나", "오렌지"];
fruits.unshift("사과"); // ["사과", "바나나", "오렌지"]


// 삭제
// 가장 마지막 요소 삭제 (pop)
let fruits = ["사과", "바나나", "오렌지"];
fruits.pop(); // ["사과", "바나나"]

// 첫 번째 요소 삭제 (shift)
let fruits = ["사과", "바나나", "오렌지"];
fruits.shift(); // ["바나나", "오렌지"]


// 특정 위치 요소 삽입, 삭제, 교체 (splice)
// array.splice(start, deleteCount, item1, item2, ...);
// start: 시작 인덱스
// deleteCount: 제거할 요소의 수, 0이면 제거X, 생략하게 되면 start 인덱스부터 모든 요소 제거
// item: 배열에 추가할 요소, start 인덱스부터 해당 요소가 추가됨
let fruits = ["사과", "바나나", "오렌지"];
fruits.splice(1, 1, "포도"); // ["사과", "포도", "오렌지"]


// 지정된 범위 요소들을 추출하여 새로운 배열 반환 (slice)
// array.slice(start, end);
let fruits = ["사과", "바나나", "오렌지"];
let slicedFruits = fruits.slice(1, 2); // ["바나나"]


// 배열 요소 나열
// 나열 가능: for, forEach, for of, map
// 나열 불가능: for in
let numbers = [1, 2, 3, 4, 5];

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

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

// for...of 
for (var number of numbers) {
  console.log(number);
}

// map
let squaredNumbers = numbers.map(function(number) {
  return number;
});


// 조건에 부합하는 값을 새로운 배열로 반환 (filter)
let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});
// evenNumbers = [2, 4]


// 배열 각 요소에 주어진 콜백 함수를 실행하고 하나의 값을 반환 (reduce)
// array.reduce(callback, initialValue);
// callback: 실행할 콜백 함수
// initialValue: 콜백 함수에서 사용할 초기값 (생략하게 되면 배열의 첫 번째 요소가 초기 값으로 설정)
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
// sum = 15


// 검색
// 주어진 조건에 만족하는 첫 번째 요소 반환 (find)
let numbers = [1, 2, 3, 4, 5];
let foundNumber = numbers.find(function(number) {
  return number > 3;
});
// foundNumber = 4

// 주어진 조건에 만족하는 요소가 하나 이상 있는 검사 (some)
let numbers = [1, 2, 3, 4, 5];
let hasEvenNumber = numbers.some(function(number) {
  return number % 2 === 0;
});
// hasEvenNumber = true

// 주어진 조건에 모든 요소가 만족하는지 검사 (every)
let numbers = [2, 4, 6, 8, 10];
let isAllEvenNumbers = numbers.every(function(number) {
  return number % 2 === 0;
});
// isAllEvenNumbers = true


// 정렬 (sort)
// 오름차순 정렬
let numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
numbers.sort(function(a, b) {
  return a - b;
});
// [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

// 내림차순 정렬
numbers.sort(function(a, b) {
  return b - a;
});
// [9, 6, 5, 5, 5, 4, 3, 3, 2, 1, 1]


// 뒤집기 (reverse)
let numbers = [1, 2, 3, 4, 5];
numbers.reverse(); // [5, 4, 3, 2, 1]