JavaScript 기본 문법 1

H_Chang·2023년 10월 13일
6일차JavaScript객체내일배움캠프TIL데이터 타입배열변수와 상수불리언형 변환
0

변수와 상수

  • 변수

기억하고 싶은 값을 메모리에 저장한다.
메모리의 저장된 값을 읽어들여서 재사용한다.

  • 변수의 5가지 주요 개념

변수 이름 : 저장된 값의 고유 이름
변수 값 : 변수에 저장된 값
변수 할당 : 변수에 값을 저장하는 행위
변수 선언 : 변수를 사용허가 위해 컴퓨터에 알리는 행위
변수 참조 : 변수에 할당된 값을 읽어오는 것

  • 변수를 선언할 수 있는 3가지 방법
    var, let, const
  1. var
 var myVar = "Hello World";
 console.log(myVar);  // Hello World  출력
  • var키워드는 let, const 키워드와 달리 다시 선언할수있다.
  1. let
 let myLet = "Hello World1";
 console.log(myLet);  // Hello World1  출력
  • var, let 키워드는 값을 재할당 할수있다.
  1. const
 const myConst = "Hello World2";
 console.log(myConst);  // Hello World2  출력
  • const 키워드는 값을 한번 할당하면 재할당 할수 없다.

데이터 타입

  • runtime : run 하는 time
  • 코드를 작성할 때가 아니라, 실제 코드가 실행될 때 (vscode 터미널에 코드가 실행될 때) 그 때, 데이터 타입이 결정된다.

숫자(Number)

  1. 정수형 숫자(Integer)
let num1 = 10;
console.log(num1); // 10
console.log(typeof num1); // "number"
  1. 실수형 숫자(Float)
let num2 = 3.14;
console.log(num2); // 3.14
console.log(typeof num2); // "number"
  1. 지수형 숫자(Exponential)
let num3 = 2.5e5; // 2.5 x 10^5
console.log(num3); // 250000
console.log(typeof num3); // "number"
  1. NaN(Not a Number)

NaN(Not a Number)은 자바스크립트에서 숫자가 아님을 나타내는 값입니다. 보통 수학적으로 정의되지 않는 계산을 수행하거나, 숫자가 아닌 값을 숫자로 변환하려고 할 때 발생합니다.

  1. Infinity (무한대)
let num5 = 1 / 0;
console.log(num5); // Infinity
console.log(typeof num5); // "number"

5-1. Infinity (무한대 마이너스)

let num6 = -1 / 0;
console.log(num6); // -Infinity
console.log(typeof num6); // "number"

_

문자열(String)

  • 문자열은 작은 따옴표(')나 큰 따옴표(")로 감싸서 표현한다.
  1. 문자열 길이(length) 확인하기
let str = "Hello World";
consile.log(str.length);  //  12  출력
  1. 문자열 결합(concatenation)
let str = "Hello, ";
let str = "World!";

let result = str1.concat(str2);
console.log(result);  // Hello, World!  출력
  1. 문자열 자르기(substr, slice)
let str3 = "Hello, World!";
console.log(str3.substr(7, 5));  // World  출력
console.log(str3.slice(7, 12));  // World  출력
  • substr: 시작 위치부터 몇개 까지 자를것 인지 지정해 자른다.
  • slice: 시작 위치부터 자를 끝 위치를 지정해 자르는것을 정한다.
  1. 문자열 검색(search)
let str4 = "Hello, World!";
console.log(str4.search("World"));  // 7  출력
  • search: str이 몇번째 부터 시작되는지 찾는 역할을 한다.
  1. 문자열 대체(replace)
let str5 = "Hello, World!";
let result01 = str5.replace("World", "Javascript")
console.log(str5.result01);  // Hello, Javascript! 출력
  1. 문자열 분할(split)
let str6 = "apple, banana, kiwi";
let result02 = str6.split(",")
console.log(result02);  // ['apple', 'banana', 'kiwi']  출력

불리언(Boolean)

  • 불리언은 참(true)과 거짓(false)을 나타내는 데이터 타입이다.
  • 불리언 데이터 타입은 조건문(if, else, switch 등)과 논리 연산자(&&, ||, !)와 함께 많이 사용된다.

EX)

let x = 10;
let y = 5;

if (x > y) {
  console.log("x is greater than y");
} else {
  console.log("x is less than or equal to y");
}

let a = true;
let b = false;

console.log(a && b); // false
console.log(a || b); // true
console.log(!a); // false
  • if 조건문을 사용하여 x가 y보다 큰 경우에는 "x is greater than y"를 출력하고, 그렇지 않은 경우에는 "x is less than or equal to y"를 출력합니다. 또한, 논리 연산자를 사용하여 a와 b의 논리적인 AND(&&)와 OR(||) 연산을 수행하고, NOT(!) 연산을 수행한다.

undefined

  • undefined는 값이 할당되지 않은 변수를 의미한다.
let x;
console.log(x);  // undefined  출력

null

  • null은 값이 존재하지 않음을 '명시적'으로 나타낸다.
    undefined와는 다르다.
let y = null;
console.log(y);  // null  출력

객체(Object)☆☆☆

  • key-value pair - ☆☆☆!
  • key에 할당되는 value 에는 어떤 값도 올 수 있다.
  • 하나의 변수에 여러개의 값을 넣을수 있다.
  • 자바스크립트에서는 객체는 매우 중요한 역할을 한다.
  • 객체는 속성과 메소드를 가지는 컨테이너이고, 중괄호({})를 사용하여 객체를 생성한다.

1. 객체 생성 방법

1-1. 기본적인 객체 생성 방법

예시) 1

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

1-2. 생성자 함수를 이용한 객체 생성 방법

예시) 2

function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}

let person1 = new Person("홍길동", 30, "남자");
let person2 = new Person("홍길순", 20, "여자");
  • 장점 : 굉장히 많은 객체를 한꺼번에 여러 개 생성할수 있다.

2. 접근하는 방법

예시) 3

console.log("1", person.name);
console.log("2", person.age);
console.log("3", person.gender);
  • 예시)1의 person이라는 객체 에서 name속성에 접근하기위해 서는 console.log에 객체의 이름을 써주고 온 점을 통해서 '.'을 통해 그 객체의 속성(property)에 접근할수 있다

3. 객체 메소드

  • 객체가 가진 여러가지 기능 : Object.~~~

3-1. Object.key()

  • key를 가져오는 메소드 이다.

예시) 1

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

let keys = Object.keys(person);
console.log("keys => ", keys);     // keys => [ 'name', 'age', 'gender' ]

3-2. values

예시) 2

let values = Object.values(person);
console.log("values => ", values);     // values => [ '홍길동', 30, '남자' ]

3-3. entries

  • key와 value를 묶어서 배열로 만든 배열!! (2차원 배열)

예시) 3

let entries = Object.entries(person);
console.log("entries =>", entries);     // entries => [ [ 'name', '홍길동' ], [ 'age', 30 ], [ 'gender', '남자' ] ]

3-4. assign

  • 객체를 복사한다.
  • {}중괄호를 사용해 부분 수정이 가능하다.

예시) 4

let newPerson = {};
Object.assign(newPerson, person, {// 수정});
console.log("newPerson =>", newPerson);     // newPerson => { name: '홍길동', age: 30, gender: '남자' }

3-5. 객체 비교

  • 다른 데이터 베이스에 비해 크기가 상당히 크다!! -> 메모리에 저장할 때 별도의 공간에 저장한다.

예시) 5

// person1 별도 공간에 대한 주소를 저장
let person1 = {
  name: "홍길동",
  age: 30,
  gender: "남자",
};
// person2 별도 공간에 대한 주소를 저장
let person2 = {
  name: "홍길동",
  age: 30,
  gender: "남자",
};

// str은 크기가 크지않기 때문에 직접 저장한다.
let str1 = "aaa";
let str2 = "aaa";

console.log("answer =>", person1 === person2);   // nswer => false 
console.log("answer2 =>", str1 === person2);     // nswer2 => true
  • console.log("answer =>", person1 === person2)값이 false인 이유로는 person1과 person2가 각각 별도 공간에 대한 주소를 저장하기 때문이다.
  • 그렇다면 어떻게 비교하면 true가 될까?
console.log(JSON.stringify(person1) === JSON.stringify(person2));    // true
  • JSON 이라는 것에서 제공하는 stringify라는기능을 사용한다.
  • stringify(문자열화)란? 문자열(string)을 문자열화(stringify) 시킨다는 뜻이다.

3-6. 객체 병합

예시) 6

let person1 = {
  name: "홍길동",
  age: 30,
};

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

// ... : spread operrator
let perfectMan = { ...person1, ...person2};
console.log(perfectMan);    // { name: "홍길동", age: 30, gender: "남자" }
  • spread operrator 명령어(...) : 중괄호{}를 다 풀어 헤쳐줘

배열(Array)

  • 배열은 여러 개의 데이터를 순서대로 저장하는 데이터 타입이다.
  • 대괄호([])를 사용하여 배열을 생성한다.
  • 배열은 나열이기 때문에 항상 index를 가지고 있다.

1. 생성

1-1. 기본생성

let number = [1, 2, 3, 4, 5];
let fruit = ["사과", "바나나", "오렌지"];

1-2. 크기 지정

let number = new Array(5);

console.log(fruits.length);   // 3
console.log(number.length);   // 5

2. 요소 접근

  • 배열 에서는 key가 아닌 index로 접근한다.
console.log(fruits[0]);   // 사과
console.log(fruits[1]);   // 바나나
console.log(fruits[2]);   // 오렌지

3. 배열 메소드

3-1. push

let fruits = ["사과", "바나나"];
console.log("1 =>", fruits);    // 1 => ["사과", "바나나"]

// push
fruits.push("오렌지");
console.log("2 =>", fruits);    // 2 => ["사과", "바나나", "오렌지"]

3-2. pop

  • 마지막 요소를 삭제하는 메소드이다.
let fruits = ["사과", "바나나"];
console.log("1 =>", fruits);;    // 1 => ["사과", "바나나"]

// pop
fruits.pop();
console.log("2 =>", fruits);;    // 2 => ["사과"]

3-3. shift

  • 첫번째 요소를 삭제하는 메소드이다.
let fruits = ["사과", "바나나", "키위"];
console.log("1 =>", fruits);    // 1 => ["사과", "바나나", "키위"]

// shift
fruits.shift();
console.log("2 =>", fruits);    // 2 => ["바나나", "키위"]

3-4. unshift

  • 제일 첫번째 요소에 추가하는 메소드이다.
let fruits = ["사과", "바나나", "키위"];
fruits.unshift("포도");
console.log(fruits);    // ["포도", "사과", "바나나", "키위"]

3-5. splice

  • 요소의 순서를 지정하고 지정한 요소로 부터 몇개를 삭제할지 값을 준다음 삭제한 요소 대신 다른요소를 추가하는 메소드이다.
let fruits = ["사과", "바나나", "키위"];
fruits.splice(1, 1, "포도");
console.log(fruits);    // ["사과", "포도", "키위"]

fruits.splice((삭제할 요소의 위치순서), (삭제할 요소의 개수 ), "(넣을요소)";

3-6. slice

  • 요소의 순서를 지정해 원하는 요소만 잘라내 출력하는 메소드이다.
let fruits = ["사과", "바나나", "키위"];
let slicedFruits = fruits.slice(1, 2);
console.log(slicedFruits);    // ["바나나"]

ForEach

  • 매개변수 자리에 함수를 넣는 것 : 콜백 함수
let numbers = [4, 1, 5, 4, 5];
numbers.forEach(function (item) {
  console.log("item입니다 =>" + item);
});
// item입니다 => 4
   item입니다 => 1
   item입니다 => 5
   item입니다 => 4
   item입니다 => 5

Map

  • Map은 기존에 있었던 배열을 가공해서 새로운 배열을 생산해 내는 역할을 한다.
  • map 함수에 들어가는 function은 반드시 return문을 가져야만 한다.
  • ☆항상 원본 배열의 길이만큼이 return 된다.
let numbers = [4, 1, 5, 4, 5];

let newNumbers = numbers.map(function (item) {
  return item * 2;
});

console.log(newNumbers);    // [8, 2, 10, 8, 10]

Filter

  • 함수에 필터링할 조건을 추가하고 조건에 해당하는 요소만 return 된다.
let numbers = [4, 1, 5, 4, 5];

let filteredNumbers = numbers.filter(function (item) {
  return item === 5;
});

console.log(filteredNumbers);    // [5, 5]

Find

  • filter와 유사하게 return문을 통해서 조건에 맞는 것만 반환한다. 단 첫 번째로 들어오는 것만 반환한다.
let numbers = [4, 1, 5, 4, 5];

let result = numbers.find(function (item) {
  return item > 3;
});

console.log(result);    // 4

형 변환

암시적 형 변환(implicit coercion)

  • 암시적 형 변환은 자바스크립트에서 자동으로 수행되는 형 변환이며, 일반적으로 연산자를 사용할 때 발생한다.

1-1. 문자열 변환

let result1 = 1 + "2";
console.log(result1);   // 12  출력
console.log(typeof result1);   // string  출력

let result2 = "1" + true;
console.log(result2);   // 1ture  출력
console.log(typeof result2);   // string  출력
  • 문자열과 다른 데이터 타입이 "+" 연산자를 만나게 되면 형 변환이 될때 문자열이 우선시 된다.
  • {}, null. undefined + "1" => 문자열

1-2. 숫자 변환

let result3= 1- "2";
console.log(result3);   // -1  출력
console.log(typeof result3);   // number  출력

let result4= "2" * "3";
console.log(result4);   // 6  출력
console.log(typeof result4);   // number  출력
  • "+"연산자가 아닌 "-"(빼기), "*"(곱하기) 등의 연산자일 경우 숫자가 우선시 된다.

명시적 형 변환(explicit coercion)

  • 명시적 형 변환은 개발자가 직접 자료형을 변환하는 것을 말한다.

2-1. 불리언 변환

console.log(Boolean(0));   // false
console.log(Boolean(""));   // false
console.log(Boolean(null));   // false
console.log(Boolean(undefined));   // false
console.log(Boolean(NaN));   // false
console.log(Boolean("false"));   // true
console.log(Boolean({}));   // true
  • 위의 예제에서는 Boolean() 함수를 사용하여 불리언 값으로 변환한다.
  • 이때, 0, 빈 문자열(""), null, undefined, NaN은 false로 변환된다.
  • 그 외의 값은 true로 변환된다.

2-2. 문자열 변환

let result5 = String(123);
consolr.log(typeof result5);  // string
console.log(result5)  // 123

let result6 = String(true);
consolr.log(typeof result6);  // string
console.log(result6)  // true

let result7 = String(false);
consolr.log(typeof result7);  // string
console.log(result7)  // false

let result8 = String(null);
consolr.log(typeof result8);  // string
console.log(result8)  // null)

let result9 = String(undefined);
consolr.log(typeof result9);  // string
console.log(result9)  // undefined
  • 위의 예제에서는 String() 함수를 사용하여 다른 자료형을 문자열로 변환한다.

2-3. 숫자 변환

let result10 = Number("123");
console.log(result10);  // 123
console.log(typeof result10);  // number
profile
H_Chang
프론트 엔드 시작하는 뉴비!
이전 포스트

JavaScript 조건문 (If, else, switch)

다음 포스트

JavaScript 기본 문법 2

0개의 댓글