primitive type 원시 타입
Number,String,Undefined,Null,Boolean
let number= 12;
값이 바뀔 수는 있지만 한번에 하나의 값만 가질 수 있음
하나의 고정된 저장 공간 기용
Non-primitive Type 비 원시 타입
Object,Array,Function
let array = [1,2,3,4];
한번에 여러 개의 값을 가질 수 있음
여러 개의 고정되지 않은 동적 공간 사용
[원시타입]
숫자형
let age = 25; //정수
let tall = 175.9; // 실수
let inf = Infinity; //무한
let minusInf = -Infinity; // 음의 무한
let nan = NaN; // 수학적인 연산의 실패
문자형
let name = "winterlood";
let name2 = '이정환';
let name3 = `winterlood ${name2}`; //백틱은 문자열 안에 변수의 값을 집어 넣게 해줌
달러 기호와 중괄호 안에 변수를 담아서
문자열로 바꾸는 문법을 템플릿 리터럴이라고 부른다.
boolean
let isSwithOff = false;
null
null은 우리가 의도적으로
'이 값은 아무것도 안가지고 있다'를 가리킬때 사용한다.
undefined
변수를 선언하고 아무런 값도 할당하지 않으면
변수는 자동으로 undefined라는 값을 할당받게 됨
값은 유지, 자료형은 변환하는 형변환
let numberA = 12;
let numberB = “2”;
console.log(numberA * numberB) // 24 출력
숫자와 문자를 곱했는데, 숫자와 숫자를 곱한 것 처럼 나왔다.
이것은 자바스크립트가 문자열 "2"를
자동으로 숫자 2로 인지하여 계산한 결과이다.
자바스크립트 엔진은 적절하게 자료형을 자동으로 변환한다.
형변환을 캐스팅 이라고함
우리가 의도하지않고, 이렇게 자바스크립트 엔진이 알아서 형변환 해주는 것을
묵시적 형변환 이라고 함
let numberA = 12;
let numberB = “2”;
console.log(numberA + numberB)
덧셈을하면 122가 나온다.
숫자와 문자를 더했을때는 숫자를 문자로 변환시켜서
문자열로 합친다.
이렇게 의도적으로 형변환 하는 것을
명시적 형변환 이라고 함.
+
parseInt() 는 문자를 받아서 숫자로 바꿔줌
==
값만 같냐
===
값도,타입도 같냐
!=
값만 같지 않냐
!==
값도 같지않고 타입도 같지않냐
a ?? b
양쪽의 피연산자 중
null 이나 undefined가 아닌 값을 선택한다.
switch
switch(비교의 대상 값) {
case ‘비교 값’ :
어쩌구
break;
};
switch 사용법이다.
let a = "cn";
switch(a){
case "ko" :
console.log("한국");
break;
default:
console.log("한국이 아님");
break;
}
예시이다. 참고하자
break를 사용하지않으면 아래가 모두 코드로 인식된다.
그래서 적절한 타이밍에 break로 끊어줘야 원하는 코드까지 나온다.
function getArea(){
let width = 10;
let height = 20;
let area = width * height;
console.log(area);
}
// 함수 선언식, 함수 선언 방식의 함수 생성
getArea()
//함수 호출
함수를 호출하면, 함수에 속한 중괄호의 실행을 끝날 때 까지 다음 동작을 실행하지 않는다.
함수를 값처럼 취급해서 변수나 상수에 담아서 사용할 때
let hello = function() {};
이 함수는 hello라는 이름의 변수로 불리면 되기에
굳이 함수의 이름을 지정할 필요 없다.
즉 함수를 변수에 담을 때는 함수의 이름을 명시하지않아도 된다.
사용할 때는 함수를 담고 있는 변수의 이름이 곧 함수의 이름이라고 생각하고 사용하면 된다.
ex) hello()
let hello = function (){
return "안녕하세요 여러분";
};
//무명함수, 함수 표현식
위와 같이 함수를 만드는 방법을 '함수 표현식'이라고 한다.
function helloFunc(){
return "안녕하세요 여러분";
} // 함수 선언식
위와 같이 함수를 만드는 방법을 '함수 선언식'라고 한다.
자바스크립트는 호이스팅이라는 특징이 있다.
함수 선언식으로 만들어진 함수들은
프로그램 실행전에 프로그램의 최상단으로 끌어올려진다.
예를들어 함수가 7번째 줄에 만들어져있을때
1번줄에서 함수를 호출해도 실행이 된다.
함수 표현식은 호이스팅이 일어나지않는다.
함수를 밑바닥에 박아놔야한다 = 함수 선언식
그럴 필요 없다 = 함수 표현식 or 함수 선언식
함수표현식을 더 간단히 사용하는 방법 : 화살표 함수
let helloA = function(){
return "안녕하세요 여러분";
};
let helloA = () => {
return "안녕하세요 여러분"
};
위의 함수 표현식을 더 간단하게 사용하면
아래의 화살표 함수처럼 쓰면 된다.
let helloA = (width,height) => {
let area = width * height
return area;
};
console.log(helloA(2,4)) // 8출력
화살표 함수의 예제이다.
콜백함수란?
어떤 다른 함수에 매개변수로 함수를 넘겨준 것을 의미함
객체는 두 가지 방법으로 만들 수 있다.
1. 객체 생성자
let person = new Object();
new 키워드가 붙으면 뒤의 객체를 생성한다고 생각하자.
person라는 객체를 생성한 것이다.
2. 객체 리터럴 방식
let person = {};
객체 리터럴이 더 만들기 쉽다.
그래서 앞으로 리터럴 쓸거임
let person = {
key: "value"
};
중괄호 안의 객체의 값은
키와 벨류의 구조로 넣어야한다.
키,벨류 쌍으로 저장되는 데이터를 ‘프로퍼티’라고 함
‘객체 프로퍼티(속성)’라고 부르기도 한다
모든 자료형이 프로퍼티의 벨류로 사용될 수 있다.
단, 키는 반드시 문자열로만 이뤄져야함
let person = {
key: "value", // 프로퍼티 (객체 프로퍼티)
key1: "value2",
key2: true,
key3 : undefined,
key4 : [1,2],
key5 : function() {}
};
위의 객체에서 key1에 담긴 값만을 꺼내고 싶을 때
console.log(person.key1);을 하면
value2 가 출력된다.
이런식으로 프로퍼티의 값에 접근 하는 것을 표기법이라고 하고
점을 통해 접근하는 것을 점 표기법 이라고 함
값에 접근하는 두 가지 방식
let person = {
name : "이용진",
age : 24
};
console.log(person.name);
console.log(person.age);
점 표기법이다.
let person = {
name : "이용진",
age : 24
};
console.log(person["name"]);
console.log(person["age"]);
괄호 표기법이다.
위,아래 두 개의 코드는 같은 값을 출력한다.
아래의 괄호 표기법에는 꼭 따옴표를 넣고 키값을 써야함
키를 꺼내야하는데, 키가 고정되어있지 않은 상황같은 경우
점 표기법이 아니라, 괄호 표기법을 통해 객체의 프로퍼티에 쉽게 접근 가능하다.
객체 생성 이후 프로퍼티 추가,수정,삭제 방법
let person ={
name : "이용진",
age : 25
};
person.key = “value”
하면 객체에 프로퍼티가 추가된다.
person.location = “한국”;
person["location"] = "한국";
을 입력하면 person객체에
location:”한국” 프로퍼티가 추가된다.
person.name = “이용진 A”
를 입력하면 name의 value값이 이용진에서 이용진 A로 수정된다.
괄호표기법을 사용해도 된다.
객체를 let이 아니라 const로 생성했을때는 프로퍼티
수정이 안될 것 같지만 수정이 가능하다.
프로퍼티라는 값을 수정하는 행위는 const person이라는 상수 자체를 수정하는 행위가 아니기 때문이다.
즉 person이라는 상수가 가지는 객체를 수정하는 행위인 것이지
person이라는 상수 자체를 수정하는 것이 아니다.
그러면 person이라는 상수 자체를 수정하는 것은 뭘까?
바로 대입연산자를 통해 person = {}; 이런식으로
새로운 객체를 할당하는 것이다.
객체는 상수로 선언을 했더라도, 이런식으로 객체의
프로퍼티를 추가하고, 수정하고, 변경할 수 있다.
delete preson.age;
를 입력하면 age가 삭제된다.
괄호 표기법을 사용해도 된다.
단 이러한 삭제는
객체와 삭제 대상인 프로퍼티 간의 연결을 끊을 뿐
실제로 메모리에서 age값이 지워지는 것은 아니다.
preson.age = null;
이런식으로 null로 바꾸면 기존의 가지던 값을 메모리에서 날릴 수 있다.
const person = {
name: "이용진", // 멤버
age: 24, // 멤버
say: function(){ // 메서드
console.log("안녕");
}
};
person.say();
객체 안에 들어있는
함수가 아닌 프로퍼티를 멤버라고 부르고
함수인 프로퍼티를 메서드(방법) 라고 부른다.
만약 say라는 메서드에서 console로 “안녕”을 출력할 때
자기를 소개하면서 출력하려고 하면 어떻게 해야할까?
const person = {
name: "이용진",
age: 24,
say: function(){
console.log(`안녕 나는 ${this.name}`);
}
};
person.say();
'안녕 나는 이용진'이 출력된다.
console.log 부분의 코드를 보면
this라는 이름을 갖는 객체의 프로퍼티를 불러오는 것 같이 생겼다.
여기서 this는 자기 자신 객체를 말한다.
객체 안의 메서드를 만들면 메서드 안에서는 자기 자신을 this라는 이름으로 부를 수 있다.
즉 this.name은 person.name과 같은 것이다.
객체에 특정 프로퍼티가 존재하는지 확인하는 방법
console.log(`name : ${“name” in person}`
을 입력하면 name이라는 이름을 가진 프로퍼티가
person 객체에 있는지 확인 할 수 있다.
있다면 name : true 없다면 name : false가 출력될 것이다.
즉 객체에 특정 프로퍼티가 존재하는지 확인하려면
in 연산자를 사용하면 된다.
존재하지 않는 프로퍼티에 접근하면 undefined가 출력된다.
존재 하지 않는 프로퍼티를 추가할 것이 아니라면 굳이 접근하지 않는 것이 제일 좋다.
배열
let arr = new Array();
let arr = []; // 배열 리터럴
두 가지 방법을 통해 만들 수 있다.
배열은 객체와 다르게 대괄호를 쓴다.
배열은 객체와 동일하게 자료형 아무거나 들어와도 상관없다.
let arr = [1,2,3,4,5];
console.log(arr[0]); // 1
console.log(arr[1]); // 2
console.log(arr[2]); // 3
console.log(arr[3]); // 4
console.log(arr[4]); // 5
배열은 인덱스를 통해 각각의 값에 접근 할 수 있다.
배열에 요소를 추가
let arr = [1,2,3,4,5];
arr.push(6);
인덱스 5번 자리에 6이 추가된다.
push라는 함수를 사용하면 배열의 가장 마지막 자리에 원소를 추가할 수 있다.
객체든,뭐든 다 추가할 수 있다.
배열의 길이를 변수로 받아오는법
console.log(arr.length);
객체의 프로퍼티 접근법과 같다.
배열 자체도 객체로 이뤄져있다.
자신에게 유용한 프로퍼티나 함수들을 객체처럼 저장해놔서
프로퍼티인 length를 꺼내오면 현재 배열의 길이를 알 수 있다.
반복문
for (초기식; 조건식; 연산; ){
// 반복 실행할 명령
};
초기식에는 반복의 주체가 되는 변수를 선언한다.
조건식에는 '반복이 조건식에 부합할때만 돌아가게 해라!' 라는 뜻으로 조건을 명시
연산에는 반복이 한 번 수행될 때마다 할 연산을 적어주면 된다.
동작 순서
for (let i = 1; i <= 100; i++){
console.log(“이용진”);
};
초기식으로 반복문의 수행이 시작되면서
i라는 변수에 1이라는 값을 할당해서 초기화 진행한다.
i가 1일때 console.log(“이용진”)이 실행되고
i++로 인해 1이 증가된다.
i가 2니까 다시 실행.. 또 증가.. 실행 증가 실행..증가….
i가 101이 될때 반복이 중단되면서 총 100번이 실행되는 것이다.
const arr = ['a', 'b', 'c'];
for(let i = 0; i < arr.length; i++){
console.log(arr[i])
};
for문은 배열을 순회할 때 매우 유용하게 사용할 수 있다.
순회 : 배열내의 모든 요소에 한번 씩 접근하는 것
객체 Key순환
const personKeys = Object.keys(person);
console.log(personKeys)
객체의 키 값만 뽑아서 배열로 반환시키는 객체의 내장함수이다.
Object.keys 함수에 객체 자체를 넣어주게 되면
이 객체의 키들을 배열로 반환해서 돌려준다 .
let person = {
name: "이용진",
age: 25,
tall: 179
};
const personKeys = Object.keys(person);
for(let i = 0; i < personKeys.length; i++){
console.log(personKeys[i])
}
person 객체의 key들이 배열 형식으로 personKeys 변수에 담겨있고
for문을 통해 하나 하나 출력시킨다.
이처럼 반환된 배열을 순회하면 객체를 순환하는 것이다.
value까지 순회하는 법
let person = {
name: "이용진",
age: 25,
tall: 179
};
const personKeys = Object.keys(person);
for(let i = 0; i < personKeys.length; i++){
const curKey = personKeys[i];
const curValue = person[curKey];
console.log(`curKey : ${curKey} curvalue : ${curValue}`);
}
curKey 변수를 생성해서 키 값을 넣어주고
person[curKey]를 통해 그 객체의 벨류값에 접근해서 curValue 변수에 저장한다.
그리고 출력하면 키 값과 벨류 값을 둘 다 순회할 수 있게 된다.
목적이 키와 벨류를 같이 순회하는 것이 아니라,
벨류만 순회하고 싶다면
const personValues = Object.values(person);
console.log(personValues);
Object.Values 함수에 객체 자체를 넣어주게 되면
이 객체의 벨류들을 배열로 반환해서 돌려준다 .
+++
궁금한점? 이해안되는 점? 궁금?질문?감사합니다?
지금은 정리해두고 시간날때 알아보자
let person ={
name : "lee",
age : "24",
location : "seoul"
};
const personKeys = Object.keys(person);
const personValues = person[personKeys[0]];
const personValues1 = person[name];
const personValues2 = person["name"];
console.log(personValues);
console.log(personValues1);
console.log(personValues2);
괄호 표기법에서는 꼭 따옴표와 함께 키 값을 입력해야한다고 들었다.
presonValues1은 undefined가 출력되고
personValues2는 lee가 출력된다.
근데 personValuse는 왜 lee가 출력되는걸까???
personKeys 배열 안에 따옴표가 포함돼서
"name"으로 저장이 되어 있는 건가??
-->> 맞구나.. Object.keys(person)을 통해 person객체의 key값을
배열으로 만들면 ["lee", "age", "location"]으로 저장된다.
그러니 person객체의 괄호 표기법에 바로 넣어도 정상적으로 value 값이 나왔던 것..
console.log만 찍어봐도 알았을텐데, 난 너무 멍청해 하하
배열의 내장함수
배열은 다양한 내장함수를 가지고 있다.
forEach
const arr = [1,2,3,4];
for(let i = 0; i < arr.length; i++){
console.log(arr[i]);
};
배열 순회이다.
배열 내장함수 forEach를 사용하면 위의 코드를 한 줄로 줄일 수 있다.
const arr = [1,2,3,4];
arr.forEach((elm) => console.log(elm));
콜백 함수가 화살표 함수로 써진 것이다.
const arr = [1,2,3,4];
arr.forEach(function(elm){
console.log(elm);
});
이 코드와 위의 코드는 동일하다.
forEach라는 배열의 내장함수는
배열의 모든 요소를 한번 씩 순회하는 내장함수이다.
배열 하나하나의 요소를 forEach 매서드,
즉 콜백함수의 파라미터로 한 번씩 전달을 해주면서
이런식으로 원하는 작업을 할 수 있게 해주는것.
배열의 모든 요소에 곱하기 2를해서 출력하고 싶으면
const arr = [1,2,3,4];
arr.forEach(function(elm){
console.log(elm * 2);
});
를 하면 된다.
정리하면
arr이라는 배열에 forEach라는 메서드, 즉 내장함수를 사용하게 되면
내장함수에 전달하는 콜백함수를 배열의 각각의 요소에 대해 실행한다
즉 무명함수 function은 elm(파라미터)로 1을 한 번 받고, 2를 한 번 받고 …
3,4를 한번 전달받는다고 생각하면 된다.
만약 배열 자체를 2배씩 하고 싶다면
const arr = [1,2,3,4];
const newArr = [];
arr.forEach(function (elm){
newArr.push(elm * 2);
});
console.log(newArr);
이런식으로 하면 될 것이다.
map
위의 방법이 나쁜 것은 아니지만 더 쉬운 방법이 있다.
바로 map이다.
const arr = [1,2,3,4];
const newArr = arr.map((elm => {
return elm * 2;
}));
console.log(newArr);
map이라는 내장함수는 callback함수에서 return을 할 수 있다.
forEach와 마찬가지로 map내장함수는 배열의 각각 모든 요소에 대해
한 번씩 콜백함수를 수행한다고 보면 된다.
즉 내장함수 map은
arr이라는 배열에 1*2를 하나 return을 하고, 2*2를 하나 return하고, 3*2를 return하고,
4*2를 return해서 이것들을 배열로, 순서대로 합쳐서 새로운 배열을 return하는 함수
배열에서 어떤 값이 있으면 true, 없으면 false를 출력하는 코드
const arr = [1,2,3,4];
let number = 3;
console.log(arr.includes(number));
includes라는 내장함수는
주어진 배열에서 전달받은 인자와 일치하는 값이 존재하는지를 확인한다.
=== 연산을 사용해서 값을 찾기에 “3”과 3은 다르다고 판단함
주어진 요소가 배열에 있는지,없는지만 확인하는 것이 아니라
존재하면 몇 번째에 있는지 index를 출력하는 내장함수
const arr = [1,2,3,4];
let number = 3;
console.log(arr.indexOf(number));
주어진 값과 배열안의 값이 일치하는 것이 하나도 없다면
indexOf함수는 -1을 반환한다.
findIndex
const arr = [
{ color: "red"},
{ color: "black"},
{ color: "blue"},
{ color: "green"},
];
let number = 3;
console.log(arr.indexOf(number));
만약 arr이라는 배열이 위처럼 복잡한 객체도 포함하는 배열이라면
includes나 indexOf는 사용하기 힘들어 보인다.
객체 배열에서 원하는 속성을 갖는,
예를 들어 'color가 green인 배열의 요소의 인덱스를 가져다줘!' 를 작성하려면
findIndex라는 배열의 메서드를 사용하면 되고, 파라미터 안에는 콜백함수를 넣어주면 된다.
const arr = [
{ color: "red"},
{ color: "black"},
{ color: "blue"},
{ color: "green"},
];
console.log(
arr.findIndex((elm) => {
return elm.color === "blue";
})
);
arr.findIndex는 arr이라는 배열의 모든 요소를 순서대로 순회한다.
0번째 요소인 {color : “red”}가 elm 파라미터에 들어오게 되고,
현재 elm.color은 “red”가 된다.
그 다음 코드에서 elm.color === “red”; 가 성립하기에
0을 바로 반환해준다.
만약 elm.color = “blue”라면
2번째 요소인 {color: “blue”}가 인자로 들어갔을 때 성립되었을 것이므로
2를 반환했을 것이다.
find
const arr = [
{ color: "red"},
{ color: "black"},
{ color: "blue"},
{ color: "green"},
];
const element = arr.find((elm) => {
return elm.color === "red";
});
console.log(element);
find함수와 findIndex는 결국 전달하는 콜백함수의 역할은 똑같다
‘조건에 만족하는 첫 번째 요소를 반환한다.’
단
find는 만족하는 요소 자체를 반환
findIndex는 그 요소의 index를 반환
배열 필터링
const arr = [
{ num: 1, color: "red"},
{ num: 2, color: "black"},
{ num: 3,color: "blue"},
{ num: 4, color: "green"},
{ num: 5, color: "blue"},
];
console.log(arr.filter((elm) => elm.color === "blue"));
color가 blue인 친구들만 가져오는 코드
filter 메서드는
전달한 콜백함수가 true를 반환하는 모든 요소를
배열로 반환하는 친구이다.
말 그대로 filter역할을 함
배열에서 특정한 조건을 만족하는 요소들을 다시 배열로 반환받고 싶을 때 사용한다.
배열 자르기
const arr = [
{ num: 1, color: "red"},
{ num: 2, color: "black"},
{ num: 3,color: "blue"},
{ num: 4, color: "green"},
{ num: 5, color: "blue"},
];
console.log(arr.slice(0,2));
slice(시작지점, 끝지점-1);
예를들어 slice(0,2)로 범위를 지정하면
0번 1번만 잘라서 반환
배열 붙이기
const arr1 = [
{num: 1, color: "red"},
{num: 2, color: "black"},
{num: 3, color: "blue"},
];
const arr2 = [
{num : 4, color: "green"},
{num : 4, color: "blue"},
];
console.log(arr1.concat(arr2));
arr1.concat(arr2); 를하면
첫 번째 명시한 arr1 뒤에 arr2를 붙여서
하나의 배열을 만들고 반환한다.
배열 정렬
let chars = ['나', '다', '가'];
chars.sort();
console.log(chars);
문자열을 사전 순으로 저장하고 싶을 때
sort() 메서드를 사용하면 된다.
단 정렬된 배열을 반환해주는 것이 아니라
원본 배열의 순서를 정렬해서 바꿔버린다.
let numbers = [0,1,3,2,10,30,20];
numbers.sort();
console.log(numbers);
위 코드를 입력하면
[0, 1, 10, 2, 20, 3, 30]가 출력된다.
sort 메서드는 숫자를 기준으로 정렬하는 것이 아니라,
문자열을 기준으로 정렬한다,
즉 사전순으로 정렬을 하기에, 위와 같은 결과가 나온다.
숫자를 기준으로 정렬하려면
sort메서드의 인자로 비교함수를 직접 넣어주면 된다.
(아래 코드 참고)
let numbers = [0,1,3,2,10,30,20];
const compare = (a,b) => {
if (a>b){
return 1;
}
else if(a<b){
return -1;
}
else{
return 0;
}
};
console.log(numbers.sort(compare));
‘크다’일 때 1을 내놓고
‘작다’일 때 -1을 내놓고
‘같다’일 때 0을 내놨다.
a와 b를 전달 받았을 때
a가 b보다 클 때 1을 반환한다는 뜻은 a가 b보다 뒤에 있어야 한다는 뜻이다.
즉 큰 값이 뒤로 간다.
a가 b보다 작을 때 -1을 반환한다는 뜻은 작은 값이 앞으로 가야한다는 뜻이다.
위의 코드는 오름차순 순서이다.
크다와 작다의 return값을 변경하면 내림차순 순서로 변경할 수 있다.
(이해가 잘 안됨.. 다시 읽어보면서 이해되면 정리하자)
이런식으로 비교함수를 직접 제작해서 sort메서드에 전달하면
정수 말고도,객체배열, 배열의 배열, 함수의 배열등 원하는대로 정렬할 수 있다.
배열내의 모든 요소를 문자열 형태로 합치는 메서드
const arr = ["이용진","님","안녕하세요","또오셨군요"];
console.log(arr.join());
join 메서드를 사용하면 쉼표로 구분되어, 하나로 합친 문자열로 return 해준다
쉼표가 싫으면 join의 인자로 공백을 넣어주면 쉼표 대신 공백이 나온다.
즉 join에 전달하는 무언가는 구분자가 되는 것이다. 예를들어 언더바(_)를 넣으면 쉼표대신 언더바가 나옴
'프로그래밍 언어 > JavaScript' 카테고리의 다른 글
Array 객체의 여러 함수들 (0) | 2023.09.26 |
---|---|
자바스크립트 기초 훑기 - 2 (0) | 2023.07.21 |
자바스크립트 함수,이벤트 (0) | 2023.06.28 |
자바스크립트 제어문 (0) | 2023.06.26 |
자바스크립트 변수 (0) | 2023.06.25 |