[JS] 스코프

# 스코프? 함수, 변수에 접근할 수 있는 범위 외부에서는 접근 불가능한 범위 스코프의 종류로는 전역, 로컬(블록, 함수) let scope1 = 10 { console.log(scope1)// 10, 위에서 찾아옴 } let scope1 = 10 { console.log(scope1)// 오류남 let scope1 = 20 } 왜 오류..? → 자신의 스코프 안에서 먼저 찾는데, 밑에서 선언을 하니까 오류부터 남 # 블록 스코프? if, for, 함수 등의 중괄호 내부를 가리킴 블록 스코프를 가지는 변수는 바깥에서는 접근 불가능 let x = 1 if (x == 1) { let x = 2 console.log(x) // 2 } console.log(x) // 1 지역 변수가 없다면 상위로 가서 찾음 l..

• format_list_bulleted FrontEnd/JavaScript
• · 2023. 10. 25.
• textsms

[JS] 배열(Array)

# 배열이란? Object 중에서 순서가 있는 collection 순서가 있는 데이터 집합을 저장하는 자료구조 서로 관련있는 데이터들을 하나의 변수에 할당 대괄호를 이용해 작성 배열 요소 자료형: 제약 없음 length 속성을 사용해서 몇개가 있는지 알 수 있음 음수 인덱스는 없음 → 마지막 요소는 length - 1 인덱스 사용 JS에서는 명시적 타입이 없기때문에 여러자료형을 가질 수 있음 많은 method들이 내장되어있음 # 배열의 메서드 1. 기본적인 method push / pop: 배열의 끝 요소를 추가 / 제거 + 반환 unshift / shift: 배열의 앞 요소를 추가 / 제거 + 반환 join: 파이썬에서의 join과 비슷한 역할, array의 요소들을 구분자로 이어줌 const arr1..

• format_list_bulleted FrontEnd/JavaScript
• · 2023. 10. 25.
• textsms

[JS] JSON

# JSON = JavaScript Object Notation Key-Value 형태로 이루어진 자료 표기법 형식이 있는 문자열임 → Object로 변경해야 함 Object → JSON는 JSON.stringify(json) JSON → Object는 JSON.parse(obj) # JavaScript의 this 함수를 하나만 만들어서 여러 객체에서 재사용할 수 있다는 장점이 있지만 실수가 빈번하므로 동작 방식을 이애하고, 실수를 피하는 것에 집중해서 사용해야 한다.

• format_list_bulleted FrontEnd/JavaScript
• · 2023. 10. 25.
• textsms

[JS] Object(객체)

# Object 키로 구분된 데이터 집합을 저장하는 자료형 (객체지향 프로그래밍에서 쓰는 객체와는 다름) 객체의 구조 중괄호를 이용해 작성 중괄호 안에는 key: value 쌍으로 구성된 속성을 여러개 작성 가능 key는 문자형만 value는 모든 자료형 가능 const user = { name: 'Yongbok', 'key' : true, geeting: fun () {// 함수도 가능 return 'hello' } } 속성 참조 점이나 대괄호로 객체 요소 접근 key 이름에 띄어쓰기 같은 구분자가 있다면 대괄호만 가능 // 조회 console.log(user.name)// Youngbok console.log(user['key'])// true // 추가 user.type = 'cute' // 수정 ..

• format_list_bulleted FrontEnd/JavaScript
• · 2023. 10. 25.
• textsms

[JS] 참조 자료형, 함수

# 참조 자료형이란? 객체의 주소가 저장되는 자료형 가변적이며, 주소가 복사됨 (↔ 원시자료형) 함수의 구조 function name ([para1[, para2[....,]]]) { statements return value } 함수의 정의 방법은 선언식과 표현식이 있음 // 선언식 function add (num1, num2) { return num1 + num2 } // 표현식 const sub = function (num1, num2) { return num1 - num2 } // 둘다 사용할때는 똑같음 add(1, 2)// 3 sub(2, 1)// 1 둘이 뭐가 다른데,..? 표현식은 익명함수를 쓸 수 있음 선언식과 달리 표현식으로 정의한 함수는 호이스팅 되지 않으므로 함수를 정의하기 전에 먼저..

• format_list_bulleted FrontEnd/JavaScript
• · 2023. 10. 25.
• textsms

[JS] 헷갈리는 문법들

# 문자열로 이루어진 숫자에서 계산하기 1. 덧셈일 때 정수 → 문자열로 형 변환 console.log('1' + 2) // 12 console.log(1 + '2') // 12 2. 덧셈이 아닌 연산들 문자열 → 숫자로 형 변환됨 console.log(5 - '2') // 3 console.log(5 * '2') // 10 console.log(5 / '2') // 2.5 3. 섞여있다면? console.log("10" * 3 + "10" - 2) 뭐가 나올까... 우선, 사칙연산의 우선순위는 지켜지므로 곱셈, 앞에서부터 console.log("10" * 3) 이때는 +가 아니므로 문자열이 숫자로, 10 * 3인 30이 나옴 그 다음은 "10" 이 더해짐 console.log("10" * 3 + "10..

• format_list_bulleted FrontEnd/JavaScript
• · 2023. 10. 24.
• textsms