Programming/TIL

[8] JavaScript 기본문...법?

Noah.log() #0818 2025. 8. 23. 15:03

음...?

오늘 배운 내용

JavaScript

  • 웹 페이지에 "동작"을 넣어주는 프로그래밍 언어
  • 웹 브라우저에서 주로 사용, Node.js를 이용하여 콘솔 환경에서 사용
  • 자바와 기본 구문이 비슷하다

기본 문법

HTML 자바스크립트 사용

  • <script> </script> 태그를 사용
  • 문서 내의 위치의 제약이 없다

한 줄 마무리에 세미콜론(;)을 사용하지 않아도 동작함
스크립트 엔진이 잘못 해석하는 경우가 있으므로 작성 권장

외부스크립트 참조하기

  • .js확장자를 가진 파일을 생성
    • outer.js
    console.log('hello');
    • html
    <body>
	<h1>외부 스크립트 파일 참조</h1>
	<script src="outer.js">console.log("실행되지 않는 부분임");</script>
	<script>
		console.log("파일 호출과 별도의 태그를 만들어서 실행");
	</script>
</body>

주석 (Comment)

  • // : 한 줄 주석
  • /* */ : 여러 줄 주석

변수 (Variable)

  • 자바스크립트의 변수 타입은 가리키는 값에 대한 타입을 나타냄
  • var, let, const 키워드를 이용해서 변수를 선언
    (생략 시 전역 객체 window의 멤버 변수 취급 → 사용 지양)
  • undefined 는 변수에 아무 값도 없어서 타입을 알 수 없는 경우를 말함
  • 동적 타입 : 대입되는 값에 따라서 용도가 변경되는 방식
  • 문자, $, _ 로 시작, 대소문자 구분, 예약어 사용 x
  스코프 재선언 재할당
var 함수 O O
let 블록 X O
const X X

 

var

  • 재 선언 가능, 재 할당 가능
  • ES6 이전에 변수 선언 시 사용
  • 호이스팅 (Hoisting) 특성이 있음
  • 함수 스코프

let

  • 재 선언 불가, 재 할당 가능
  • 블록 스코프

const

  • 재 선언 불가, 재 할당 불가
  • 블록 스코프
  • 대문자 SNAKE_CASE 사용
  • 선언 시 값을 할당해야 함
  • 상수로 사용

undefined

  • 변수에 값이 대입되지 않은 상태

데이터 타입 (Data Type)

  • 기본 데이터 타입 (Primitive type)
    • String, Number, Boolean, null, undefined
  • 객체 타입 (Reference Type)
    • Object - function, array 등
  • 값을 할당할 때 타입 결정
  • 타입 간의 변환이 자유로움 → 자동 연산 수행

typeof - 변수의 자료형 검사

  • typeof 데이터
  • typeof 의 결과는 문자열 반환
  • null의 데이터 타입은 object (설계 실수)
  • function 은 기능을 가진 객체
  • *es6 추가된 타입
    • Symbol(변경 불가능한 기본 타입)

동적 데이터 타입 - 다양한 값의 대입이 가능

숫자형 (Number)

  • 정수와 실수로 나누어 구분하지 않음 (부동 소수점 형식)
  • 일반적인 숫자 외 특수 숫자 포함 (Infinity, NaN …)
  • e 를 활용하여 거듭제곱 표현 가능

문자열 (String)

  • “”로 감싼다
  • ‘’로 감싼다
  • Template Literal (ES6) → `` (backtick) 으로 감싼다.
    • 여러 줄 입력이 가능 - 공백, 줄 넘김 유지 문자열 내 ${변수명}을 이용하여 변수와 문자열을 결합
  • UTF-16 코드 유닛으로 저장 및 처리

문자열 연산

  • 문자열과 숫자 타입의 + 연산 → 문자열
  • 문자열과 숫자 타입의 + 연산 이외 → 숫자

자바스크립트 false

  • 논리 값 false로 인식
    • false
    • null
    • undefined
    • 0
    • ‘’ (빈 문자열)
    • NaN (Not a Number)
  • 나머지 값은 true로 인식

연산자 (Operator)

  •  + (덧셈), 단 항 사용시 Number() 와 동일한 역할
  •  - (뺄셈)
  •  * (곱셉)
  •  / (나눗셈)
  •  % (나머지)
  •  ** (거듭제곱)
  •  = (할당 연산자)
  •  +=, -=, *=, … (복합 할당 연산자)
  •  ++, -- (증감연산자)

일치 연산자

  • 값과 타입이 일치하는지 체크
  • ===, !==

제어문 (Java 유사)

  • 조건문 (Condition)
    • if, else if, else
    • switch
  • 반복문 (Loop)
    • for
    • while
    • do…while
    • for…of
    • for…in

배열 (Array)

  • 배열의 생성 : [] 또는 Array() 활용
  • 배열의 크기는 동적으로 변경된다
  • 크기가 지정되어 있지 않은 경우에도 데이터의 입력 가능
  • 배열은 여러가지의 데이터 타입을 하나의 배열에 입력할 수 있음
  • 함수를 이용하여 데이터 추가 기능
    • .pop
    • .push
    • .unshift
    • .shift
    • .splice
    • .slice
    • .join
    • .reverse
    • .concat
    • …

반복문

  • while
  • do…while
  • for
  • for…of
  • for…in
  • foreach

while

  • 조건이 true 인 동안 반복

do…while

  • 조건을 나중에 검사하여, 무조건 한번은 실행되는 while 문

for

  • 가장 일반적인 반복문
  • for 문 안에 사용할 변수를 정의하고, 해당 변수를 기준으로 조건이 false 가 될 때까지 반복

for…of

cosnt foods = [ "pizza", "chicken", "hamburger" ]
for (const food of foods) {
	console.log(food);
}
  • 배열에서 요소를 하나씩 순회하며 반복하는 반복문
  • 꺼내지는 모든 요소는 블록 내에서 변수로 선언되기 때문에 변수 선언 키워드 작성 필수

for … in

  • object → key || Array → index 를 순회하는 반복문
  • object
cosnt foods = [ p: "pizza", c: "chicken", h: "hamburger" ]
for (const key of foods) {
	console.log(`${key}: ${foods[key]}`);
}
  • Array
cosnt foods = [ "pizza", "chicken", "hamburger" ]
for (const idx of foods) {
	console.log(`${idx+1}: ${foods[idx]}`);
}

객체 (Object)

  • 객체는 문자열로 이름을 붙인 값들의 집합체 (Key : Value)
  • 객체에 저장하는 값을 프로퍼티(Property) 라고 함
  • 객체는 prototype 이라는 특별한 프로퍼티를 가지고 있음

객체 만들기

  • 객체 리터럴 이용 : {}
  • Object 생성자 이용 : new Object()
  • 생성자 함수 이용

객체 프로퍼티 (Object Property)

  • 생성자 함수를 사용해서 Property 추가 기능 & this 키워드 사용 가능
let member1 = {id: "park", eamil:"park@tistory.com"}
function Member(id, email) {
	this.id = id;
 	this.eamil = email;
}

let member2 = new Member("kim", "kim@tistory.com")
console.log(member2)   // {id: 'kim', eamil: 'kim@tistory.com'}
  • .(dot) 또는 []를 이용하여 프로퍼티의 조회 및 변경을 처리
Let student = { name: "김싸피", 
				age: 45, 
                hobby: ["연구", "운동"], 
                "favorite singer": "IU",
｝

console.log(student.name);
console.log(student[age]); // ERROR

console.log(student[ "age" ]); // 45 
console.log(student["favorite singer"]); 
console.log(student."favorite singer"); // ERROR

 

추가/수정/삭제

  • 동적 프로퍼티 추가
var member = {id: "park", eamil:"park@tistory.com"}
member.name = "noah"  // 동적 프로퍼티 추가
console.log(member)   // {id: 'park', eamil: 'park@tistory.com', name: 'noah'}
  • 동적 프로퍼티 수정
let member = {id: "park", eamil:"qkr@tistory.com"}
member.["id"] = "tistory"
member.email = "kim@tistory.com"
console.log(member)   // {id: 'tistory', eamil: 'kim@tistory.com'}
  • 동적 프로퍼티 삭제
let member = {id: "park", eamil:"park@tistory.com"}
delete member.id
console.log(member) // {eamil: "park@tistory.com"}

객체 변수에는 주소가 저장되어 공유 가능

let memeber1 = {id: "park", email: "park@tistory.com"}
let member2 = memeber1;
member2.id = "kim";

console.log(member1.id)  // kim
console.log(member2.id)  // kim

함수안에서의 this는 함수를 호출한 객체

var m1 = {name: "박노아"}
var m2 = {name: "김노아"}
function msg() {
	// console.log(this)
    console.log(this.name + "님이 등장"}
}
m1.msg = msg
m1.msg()  // 박노아님이 등장

m2.msg = msg
me.msg()  // 김노아님이 등장

 

회고

자바스크립트의 경우 어느정도 자바와 문법이 비슷하고 앞서 배웠던 HTML과 CSS와 달리 계산, 동작 하는 프로그래밍 언어이다 보니

그래도 이해하는데 크게 어려움은 없었다. 물론 기본문법이지만...

어려운 부분은 아무래도 타입과 변수, 그리고 자바와 다른 어떤 연산적이 과정이다.

설계의 실수가 있는 편이다 보니 변수나 예외에 대한 부분을 확실히 알아야할 것 같다

(불?친절하게도 예외, 에러 메세지를 잘 띄어주지 않는다...)

개선점 or 피드백

  • 원래도 계속 하루동안 배운 노트 정리를 TIL에 녹이는 방식으로 하려고 했는데 생각보다 그 양이 너무 많다
  • TIL은 하루동안 배운 내용을 기록하는 거지 정리하는 건 아닌 것같아서 Java나 JavaScript같은 많은 양의 내용을 다루는 것은 따로 카테고리를 만들어서 빼야겠다.
  • 곧 있으면 또 다시 A형 역량테스트를 보게 된다. 앞으로도 혼자서라도 A형 문제를 찾아서 푸는 습관을 들여놓자

 

오답노트

https://www.acmicpc.net/problem/17298 백준 : 17298번 오큰수

 

문제의 핵심은 수열이 주어진대로 각각의 오른쪽에 위치한 자신보다 큰 수들 중 가장 왼쪽, 즉 오른쪽에 위치한 자신보다 큰 가장 먼저 만나는 수를 찾아서 출력하는 문제이다.

 

처음 2중 for문을 사용해서 풀이하려 했을 때 O(N x M)의 시간복잡도로 수열의 크기인 N의 크기가 1,000,000까지 허용되니

시간초과가 났다.

 

결국 스택을 사용해서 풀게 됐는데 이 풀이 과정은 글로 정리해봤다.

2025.08.22 - [Programming/코테 공부] - [JAVA] 백준 17298번 : 오큰수

 

[JAVA] 백준 17298번 : 오큰수

문제 유형자료구조스택풀이 방법 도출문제에서 나온 말 그대로, 수열의 각 원소에 대해서 오른쪽에 있는 자신보다 큰 수 중 가장 왼쪽에 있는 수를 구하는 문제이다.말은 어렵지만 각 원소에 대

noah0818.tistory.com

 

그러나 또 시간초과가 났었는데 이유는 출력과정에 있었다.

System.out.println();을 사용할 때와 StringBuilder 에 담아 출력할 때와의 시간차이가 꽤 많이 났던 것 같다.

아직도 시간복잡도 최적화에 대한 공부나 연습이 부족하지만 이런 경험을 토대로 좀 더 성장할 수 있을 것 같다.

'Programming > TIL' 카테고리의 다른 글

[10] 비트(Bit) 주세요 🕶️  (2) 2025.08.28
[9] JavaScript 함수...  (1) 2025.08.27
[7] 'CSS' IS AWESOME_2탄  (5) 2025.08.21
[6] 'CSS' IS AWESOME_1탄  (4) 2025.08.21
[5] 어떤 개발 언어 쓰세요? HTML이요.  (2) 2025.08.20

'Programming/TIL'의 다른글

  • 현재글[8] JavaScript 기본문...법?

관련글

티스토리툴바