2024/04/22 자바스크립트 문법 1

YIS·2024년 4월 22일
2024.04TIL내일배움캠프정의

[TIL(Today I learned)] 정의

목록 보기
19/43
post-thumbnail

자바스크립트

정의

1995년 Livescript (Javascript) 탄생

2005년 AJAX등장
자바스크립트 기반 AJAX쓰게 된 이유:
그전에는 효율성, 속도면 부족. 버튼하나 눌러서 어떤 동작을 실행시 페이지 전체 새로고침 했었음.
ajax는 해당되는 영역만 새로고침
일어난 현상: UX의 폭발적인 향상

2009년 node.js등장
브라우저에서만 사용가능했던 전과달리 모든부분에서 사용가능하게 바뀜
프론트엔드, 백엔드 ,DB부분에서 모두 사용가능하게 됨 = fullstack
자바스크립트입장에서 획기적인 사건의 해

2015 ECMAScript 6(ES6) 현재 쓰고있는 자바스크립트 버전


특징

  • 객체 지향 프로그래밍
    위에서부터 아래로 순서대로가아닌 객채라는 그룹으로 묶어서 프로그래밍을 구현하는것
    ㄴ여러군데에서 재활용이 가능
    ㄴ복잡한 프로그래밍수준을 요구하는 지금 필연적으로 써야함.

  • 동적 타이핑
    다른언어들은 변수를 지정할때 타입을 지정해줘야함.
    자바스크립트는 런타임때 결정 = 코드가 작성된 상태가 아니라 코드가 돌아갈때 결정

  • 함수형 프로그래밍

  • 비동기 처리

  • 클라이언트 측 및 서버 모두에서 사용가능
    node.js등장으로 웹개발 전반에 활용가능



기본문법

변수와 상수

기억하고싶은 값을 메모리에 저장. 그값을 재사용하기 위해 선언
var : 오래된 변수선언방식 . 특정상황 아니면 가급적 사용 자제

ES6이후
let : 선언된 블록(중괄호 {}로 둘러싸인 영역) 내에서만 접근가능 .
같은이름으로 재선언 불가 . 할당된 값은 변경가능

const : let과 마찬가지로 블록레벨범위를 가짐. 단 한번 선언된 후 할당한
값을 변경할수 없음.

데이터 타입과 형 변환

데이터 타입

값 타입을 알수있는 명령어 : typeof 값

1. 숫자

  • 정수형 숫자
  • 실수형(float) 숫자
  • 지수형(exp) 숫자
    2.5e5 //2.5 x 10^5
  • NAN (Not a Number) 숫자가 아닌 값
  • Infinity (무한대) / -Infinity (-무한대)


2. 문자(String)
작은 따옴표(')나 큰 따옴표(")로 감싸서 표현

  • 문자열 길이 확인하는 법 (length)
let str = "Hello, world!";
console.log(str.length); // 13 띄어쓰기,!도 포함
  • 문자열 결합 (concat)
    원본 문자열 변경하지 않고 새로운 문자열 반환
let str1 = "Hello, ";
let str2 = "world!";
let result = str1.concat(str2);
console.log(result); // "Hello, world!"
  • 문자열 자르기(substr,slice)
    원본 문자열 변경하지 않고 새로운 문자열 반환
let str = "Hello, world!";
console.log(str.substr(7, 5)); // "world"
//시작위치(7)부터 몇개까지 자르고(5) 반환
console.log(str.slice(7, 12)); // "world"
//시작위치(7)부터 지정된 위치까지 자르고(12) 반환
  • 문자열 검색(search)
let str = "Hello, world!";
console.log(str.search("world")); // 7 str변수안에 world가 시작되는 지점을 반환
  • 문자열 대체(replace)
    원본 문자열 변경하지 않고 새로운 문자열 반환
let str = "Hello, world!";
let result = str.replace("world", "JavaScript");
//(바꿔야할 문자열 , 바꿀 문자열) 
console.log(result); // "Hello, JavaScript!"
  • 문자열 분할(split)
    원본 문자열 변경하지 않고 새로운 문자열 반환
let str = "apple, banana, kiwi";
let result = str.split(",");
//(구분자(여기서는 ","콤마),반환할때 요소갯수 (여기선 생략중))
//문자열을 배열로 바꿀때 자주씀 구분자를("") 빈문자열 사용시 각각 개별문자로 쪼개서 출력
console.log(result); // ["apple", " banana", " kiwi"]




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

4. undefined
un : not ,defined : 정의하다.
값이 할당이 되지 않음.

5.null
값이 존재하지 않음을 명시적으로 나타내는 방법
null !== undefined 널과 언디파인드는 다른의미
단 null == undefined 이건 true. 상대적으로 느슨한 동등비교시 둘다 값이 없다는 의미로 .

6.객채
속성과 메서드를 가지는 박스.{}안에 속성으로는 키와 키값으로 구성,
메서드는 속성중에 함수로 정의된 것.

7.배열
여러개의 데이터를 순서대로 저장하는 데이터타입.[]안에 배열내 요소들은
각각의 위치값을 가지고 있고 그걸 인덱스라고함. 0부터시작


형 변환

  • 암시적 형변환

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

    1 . 문자열
    문자열 + 숫자형 , 문자열 + 불리언 , 문자열 + null 등 형변환시 문자열이
    우선시 됨
    {},null,undefined +"1" => 문자열

    2 .숫자
    문자열 - 숫자 ,문자열 * 문자등 +를 제외한 나머지 연산자 *-/는 숫자가
    우선시 됨
    (1 - "2"=-1), ("2" * "3"=6), (4 + +"5"=9) =>숫자

  • 명시적 형변환

    개발자가 직접 자료형을 변환하는 것
String(123) = "123" //(문자열로 바뀜)
Number("123") = 123 //(숫자형으로 바뀜)
boolean("false") = true//(문자열 false는 true. 불린형으로 바뀜 )



연산자

1. 산술 연산자

  • 더하기(+) : 숫자나 문자열을 더함.
    문자열 "숫자" + 숫자는 자동으로 문자열로 변환
  • 빼기(-) : 숫자를 뺌.
    문자열 "숫자" - 숫자는 자동으로 숫자로 변환
  • 곱하기(*) : 숫자를 곱함.
    문자열 "숫자" * 숫자는 자동으로 숫자로 변환
  • 나누기(/) : 숫자를 나눔.
    문자열 "숫자" / 숫자는 자동으로 숫자로 변환
  • 나머지(%) : 숫자를 나누고 그 나머지 몫을 반환.
    문자열 "숫자" % 숫자는 자동으로 숫자로 변환

2. 할당 연산자

  • 등호 연산자(=) : 등호 오른쪽 값을 왼쪽에 할당함.
    let a = 1; (a에 1을 할당함.)
  • 더하기 등호 연산자(+=) : 등호 오른쪽 값을 왼쪽에 할당된 값과 더한후 왼쪽에 할당함.
    let a = 1;
    a += 2 // 3 (a=a+2)
  • 빼기 등호 연산자(-=) : 등호 오른쪽 값을 왼쪽에 할당된 값을 뺀후 왼쪽에 할당.
    a -= 2 // -1 (a=a-2)
  • 곱하기 등호 연산자(*=) : 등호 오른쪽 값을 왼쪽에 할당된 값에 곱한후 왼쪽에 할당.
    a *= 2 // 2 (a=a*2)
  • 나누기 등호 연산자(/=) : 등호 오른쪽 값을 왼쪽에 할당된 값에 나눈후 왼쪽에 할당.
    a /= 2 // 0.5 (a=a/2)
  • 나머지 등호 연산자(%=) : 등호 오른쪽 값을 왼쪽에 할당된 값에 나누고 그나머지 값을 반환.
    a %*= 2 // 1 (a=a%2)

3. 비교 연산자
두값을 비교후 그 결과에 따라 불리언 값을 반환

  • 일치 연산자(===) : 두 값이 같은지 비교하며 타입도 같아야함. 같으면 true

  • 불일치 연산자(!==) : 두 값이 다른지 비교하며 타입도 달라야함. 다르면 true

  • 작다(<) 연산자 : 첫번째 값이 두 번째 값보다 작은지 비교. 작으면 true

  • 크거나 같다(>=) 연산자 : 첫번째 값이 두번째 값보다 크거나 같은지 비교.
    크거나 같으면 true

4.논리 연산자

  • 논리곱(&&) 연산자 : 모든 조건이 참일 때 true를 반환.
    조건 중 하나라도 거짓이면 false를 반환

  • 논리합(||) 연산자 : 조건 중 하나라도 참이면 true를 반환.
    모든 조건이 거짓일 때만 false를 반환.

  • 논리부정(!) 연산자 : 논리 값을 반전시킴.
    참을 거짓으로, 거짓을 참으로 변경

논리연산자는 단축평가를 수행함. 앤드연산자(&&)에서 첫번째 조건이 false면
두번째 조건을 평가하지 않고 첫번째 조건의 결과를 반환함.
반대로 or연산자(||)는 첫번째 조건이 true일 경우, 두 번째 조건을 평가하지않고 첫번째 조건을 결과를 반환함.
이걸 왜 주석을 다냐면 문제풀때 이거때문에 헷갈린적이있어서.

5.삼항 연산자

  • 조건에 따라 값을 선택함. if-else문의 축약형
    조건식 ? 값 1 : 값 2
    조건식이 true면 값1을 , false면 값2를 반환함.
    다수의 조건을 평가해야할 경우도 가능하지만, 가독성이 떨어질수 있음
    ex)
    조건식1 ? 값1 :
    조건식2 ? 값2 :
    조건식3 ? 값3 : 값4

6.타입 연산자

  • 변수나 값의 타입을 문자열로 반환.
    어떤 타입의 데이터를 가지고 있는지 확인할 때 사용.



함수

input(매개변수)과 output(반환값 return)을 가지고 있는 단위.
코드의 재사용성을 높일 수 있음.

1. 함수 정의하기

  • 함수 선언문
    function 키워드를 사용하여 이름이 있는 함수를 정의함.
    코드 어느위치에서든 호출가능.
function add(x, y) {
  return x + y;
}
  • 함수 표현식
    함수를 변수에 할당하는 형태로 정의.
    변수에 할당된 시점 이후에만 호출 가능.
const add = function(x, y) {
  return x + y;
};

2. 함수 호출하기
함수 이름 뒤에 괄호 ()를 붙이고, 괄호 안에 필요한 경우 인수를 넣음

function add(x, y) { // 매개변수 x,y에 각각 2,3이 들어옴
  return x + y; //더한후 리턴
}

console.log(add(2, 3));   // 5 인수로 2,3을 넣음

let add1 = function(a,b){ //변수 add1은 매개변수 a,b를 받는 함수임
	return a+b
}
let result = add1(5,10) //변수 result에 add1함수에 5,10인수를 넣음
console.log(result); // 15

3. 함수 스코프
영향을 끼칠수있는지 범위.

  • 전역 스코프
    전역공간에 선언된 변수나 함수가 어느곳에서든지 접근할수있는 범위.
let x = 10;

function printX() {
  console.log(x);
}
printX();   // 10
  • 지역 스코프
    변수가 선언된 함수 내에서만 접근할 수 있도록 제한하는 스코프
    함수 printX에서 변수 x를 참조. 해당 함수 내에서만 참조가능.
function printX() {
  let x = 10;
  console.log(x);
}
printX();   //10
  • 블록 스코프
    ES6에서 도입된 개념으로 변수를 선언한 블록내에서만 해당변수에 접근 가능.
    예로 if,for,while등의 중괄호{}로 둘러싸인 영역을 말함.
if (true) {
  let x = 10;
  console.log(x);
}

console.log(x);   // ReferenceError: x is not defined

4. 화살표 함수
ES6에서 도입된 함수를 짧게 쓸 수있는 문법. this바인딩 방식차이가 있음(이건 나중에)

  • 기본적인 화살표 함수
let add = (x, y) => { //function 대신 매개변수() 다음에 => 표시후 중괄호
  return x + y;
}
console.log(add(2, 3));   // 5
  • 한 줄로 된 화살표 함수 (가장 보편적으로 쓰는듯?)
    함수 내부에 return문이 한 줄로 작성될 경우, 중괄호와 return 키워드를 생략가능.
let add = (x, y) => x + y;

console.log(add(2, 3));   // 5
  • 매개변수가 하나인 화살표 함수
    매개변수가 하나일 경우에는 괄호를 생략가능.
let square = x => x * x;

console.log(square(3));   // 9



배열,객체 기초

객체

키(key)-값(value) 쌍으로 구성되며 여러 개의 키(프로퍼티)을 하나의 변수에 담고 관리

1. 객체 생성

  • 기본적인 객체 생성
    중괄호({})를 사용하며, 속성과 값을 콜론(:)으로 구분하여 작성, 각 속성과 값은 쉼표(,)로 구분
let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};
  • 생성자 함수를 사용한 객체 생성
    동일한 구조를 가진 객체를 여러 개 쉽게 만들 수 있음. 
function Person(name, age, gender) { //세개의 매개변수를 받음
  //함수이름의 첫글자는 대문자로
  //this 키워드를 사용하여 객체의 속성을 정의
  this.name = name; //this는 생성될 새로운 객체를 가리킴
  this.age = age;  
  this.gender = gender;
}//함수 호출 시 제공된 매개변수(name, age, gender) 값으로 초기화

let person1 = new Person("홍길동", 30, "남자");//new 키워드와 함께 Person 생성자 함수를 호출
let person2 = new Person("홍길순", 25, "여자");

2. 객체 속성 접근
점(.)을 이용하거나 []대괄호를 사용 . 보통 점사용법을 쓰고 속성(프로퍼티)이름이 동적일때 ,
유효한 변수이름이 아닐때 속성이름을 문자열로 감싼후 대괄호 안에 넣어 사용.

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

console.log(person.name);   // "홍길동"
console.log(person.age);    // 30
console.log(person["gender"]); // "남자"

3. 객체 메서드
객체가 가진 여러가지 기능

  • Object.keys() 메소드
    열거 가능한 속성들의 "이름(키)"을 배열로 반환. 객체의 속성을 반복하여 작업할 때 유용.
let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};
let keys = Object.keys(person);
console.log(keys);   // ["name", "age", "gender"]
  • Object.values() 메소드
    열거 가능한 속성들의 "값(키값)"들을 배열로 반환
let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let values = Object.values(person);
console.log(values);   // ["홍길동", 30, "남자"]
  • Object.entries() 메소드
    열거 가능한 속성들의 "이름(키)"과 값(키값)들을 배열로 반환 .배열안에 배열 (2차원배열)
let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let entries = Object.entries(person);
console.log(entries); //[ [ 'name', '홍길동' ], [ 'age', 30 ], [ 'gender', '남자' ] ]
  • Object.assign() 메소드
    원본 객체로부터 모든 열거 가능한 속성을 대상 객체로 복사하는 데 사용. 객체를 병합하거나 기존 객체에 새 속성을 추가할 때 사용
let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let newPerson = Object.assign({}, person, { age: 35 });

console.log(newPerson);   // { name: "홍길동", age: 35, gender: "남자" }
  • 객체 비교
    기본형 값은 변수자체에 직접저장. 객체나 배열은 객체가 저장된 주소가 변수에 저장.
    따라서 객채형 or 배열은 메모리상의 위치를 비교하기때문에 단순히 동등비교연산자로 값을 비교하면
    false가나옴. 동일한 "위치"를 가리키고 있을때 같다고 판단함.
    JSON.stringify() 메소드는 객체를 JSON 형식의 문자열로 변환.
    문자열은 기본값으로 취급하기때문에 객체내용이 동일하므로 두 객체안의 문자열비교에서 true가 나옴.
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
  • 객체 병합
    ES6에서 나온 문법
    스프레드문법(...) 은 객체나 배열 내부요소를 개별적으로 분리하여 사용할수 있게 해줌.
let person1 = {
  name: "홍길동",
  age: 30
};

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

let mergedPerson = {...person1, ...person2};

console.log(mergedPerson);   // { name: "홍길동", age: 30, gender: "남자" }
profile
YIS
엉덩이가 무거운 사람
이전 포스트

2024/04/16 "TIL특강" TIL은 왜 쓰는가?

다음 포스트

2024/04/23 자바스크립트 문법 2

0개의 댓글